< Back to blog
2023-12-12
SEO: If You Tag It, They Will Come
Introduction
As 2024 unfolds, the landscape of digital marketing continues to evolve, yet the value of SEO (Search Engine Optimization) remains undisputed. With the increasing complexity of search algorithms and the ever-expanding digital space, SEO stands as one of the most effective and essential techniques for increasing online visibility. It's not just about driving traffic; SEO is about attracting the right audience to your service by optimizing your online content.
However, amidst the flurry of SEO strategies, meta tags often fly under the radar. Consider this a friendly nudge to revisit and refine the meta tags across your website’s pages.
That being said, meta tags are sometimes overlooked.
Meta Tags: The Key to Enhanced SEO
Meta tags are snippets of text that describe a page's content; they don't appear on the page itself but only in the page's code. Two types of meta tags are particularly important for SEO and social sharing: Twitter Cards and Open Graph (OG) tags.
- Twitter Cards: These tags allow you to attach rich photos, videos, and media experiences to Tweets that drive traffic to your website. By adding Twitter meta tags to your Next.js app, you ensure that when someone tweets a link to your site, a card is created that enhances visibility and engagement.
- Open Graph (OG) Tags: Originally developed by Facebook, these tags allow any web page to become a rich object in a social graph. For instance, they are used to control how URLs are presented when shared on social media platforms like Facebook and LinkedIn.
NextJS Example
So here is how you might do this in a NextJS app -
import Head from 'next/head';
function SomePage() {
return (
<>
<Head>
<title>Your Page Title</title>
<meta name="description" content="A brief description of your page" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A brief description of your page" />
<meta name="twitter:image" content="https://yourdomain.com/your-image.jpg" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief description of your page" />
<meta property="og:image" content="https://yourdomain.com/your-og-image.jpg" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
// Other tags...
</Head>
// Your page content...
</>
);
}
Images - og:image and twitter:image Guidelines
- For og:image, which is used on platforms like Facebook and LinkedIn, the recommended dimensions are 1200 x 628 pixels with an aspect ratio of 1.91:1. It's recommended to use larger images for when users click to expand images, which could be as large as 4096 x 4096 pixels.
- For twitter:image, which is used for Twitter Cards, the recommended image size is 300 x 157 pixels at a minimum, but you can go up to 4096 x 4096 pixels for maximum impact, with an aspect ratio of 2:1. The maximum image size allowed is 5 MB. This means you should use high-resolution images that are clear and in focus, using the recommended aspect ratio to avoid having your images cut off or looking out of place in the Twitter feed.
It's also important to select the right file type. JPEG is typically best for photos with a lot of detail, while PNG is preferred for images with transparent backgrounds or lots of text.
The Drift
Regular audits of your site’s pages are essential. Content and messaging that were once pertinent may have drifted into obsolescence. Routine check-ups ensure that your website remains relevant, coherent, and aligned with your current branding strategy. This is an especially good time of year to check your tags - as your new resolution :)
Maple CMS RelevantTips
We at Maple CMS have recently released our new feature - that lets you download an entire working NextJS example based on your Schema, and it will present your Content right away - out of the box.
That being said, as for the SEO optimizations for this out-of-the-box project, it exists, but it's not perfect. You should find the <Head> sections in the generated code - find the todo comments there, and fill and adapt to your messaging, keywords, etc.
Conclusion
Remember, in the world of SEO, the devil is in the details—the right tags could be the gateway to unprecedented online prominence for your services. This is a good time to make sure you are implementing tags correctly and that your website really does speak the language of search engines.
