Meta Tags: What They Do for SEO and Sharing

You've already used two meta tags without much explanation: charset and viewport, both back in the document structure lessons. This lesson covers the broader family of meta tags, what they actually do for search engines and social media sharing, and which ones are worth your time as a beginner.

Meta tags live inside <head> and follow a general pattern using name and content attributes:

<meta name="description" content="A blog about Tony Stark's workshop, Iron Man suit development, and engineering breakthroughs.">

The Meta Description Tag

This particular tag, the meta description, is one of the most practically important ones for a real website. When your page shows up in search engine results, that short snippet of text under the blue title link usually comes directly from this tag, assuming you've written one. If you skip it, search engines will auto-generate a snippet by grabbing some text from your page content, often awkwardly, mid-sentence. Writing your own, concise, honest description, roughly one to two sentences, gives you actual control over how your page is presented to someone deciding whether to click it.

A common beginner mistake is either skipping the description entirely, or writing something far too long. Search engines truncate descriptions past a certain length, roughly 150 to 160 characters is a safe practical target, cutting off anything beyond that with an ellipsis, which can end mid-word in an ugly way.

The Outdated Keywords Tag

Next, the keywords meta tag deserves a brief, honest mention specifically because beginners often assume it's important when it genuinely no longer is:

<meta name="keywords" content="iron man, suits, tony stark, engineering">

Major search engines today largely ignore this tag entirely for ranking purposes; it was heavily abused with keyword stuffing years ago and lost its influence as a result. You can include it harmlessly, but don't waste time carefully optimizing it, and don't mistake it for a meaningful SEO lever the way the description tag actually is.

Open Graph For Social Sharing

Now let's cover social sharing, which uses a different family of meta tags, typically referred to as Open Graph tags, originally created by Facebook but now read by most platforms, including Twitter/X, LinkedIn, and messaging apps like WhatsApp when a link preview card is generated.

<meta property="og:title" content="The Evolution of the Iron Man Suit">
<meta property="og:description" content="From the Mark I to the Mark 50, a look at how the armor evolved.">
<meta property="og:image" content="https://starkblog.example.com/images/mark50-og.jpg">
<meta property="og:url" content="https://starkblog.example.com/suits/mark-50">

Notice these use property instead of name, a small but real syntax difference worth remembering, since mixing them up silently breaks the tag with no visible error anywhere. Without these tags, when someone pastes your page's link into a chat app or social post, the resulting preview card is often blank, generic, or pulls the wrong image entirely, guessed from whatever the platform finds first on the page. With them set deliberately, you control exactly what title, description, and image appear in that shared preview, which matters a lot for how professional a shared link looks.

A frequent mistake here: forgetting og:image, or pointing it at a relative path instead of a full absolute URL. Social platforms fetching your page for a preview generally need the complete, absolute image URL, since they're not rendering your page as a browser would with its own base context; a relative path often simply fails to load.

Revisiting Charset And Viewport

Let's also revisit the two meta tags from earlier in this course with a bit more context now that you understand the broader pattern. <meta charset="UTF-8"> declares the text encoding, as covered already. <meta name="viewport" content="width=device-width, initial-scale=1.0"> tells mobile browsers to render the page at the device's actual width rather than a shrunken desktop layout. Both are technically meta tags in the same family as description and Open Graph tags, just serving a more structural purpose than a descriptive one.

Controlling Search Indexing

One more worth knowing, specifically for pages you don't want search engines indexing at all, like a private staging page:

<meta name="robots" content="noindex, nofollow">

noindex tells search engines not to list this page in results; nofollow tells them not to follow links found on this page for discovering other pages. This is a genuinely useful tag for test pages or private content you don't want accidentally surfacing in a public search.

A practical tip: a description that's accurate and specific to that exact page beats a generic one copied across every page of a site. Each page's meta description is an opportunity to tell both search engines and real human visitors precisely what that specific page offers, in your own words, before they even click.

Before you move on, try this: add a proper description meta tag and the four core Open Graph tags, og:title, og:description, og:image, and og:url, to a page you built earlier in this course. If you have access to a social media debugging tool from any major platform, paste your page's URL in and see exactly how your title, description, and image render as a shared preview card.