Meta Tags & Open Graph: Titles, Descriptions & Social Cards

Q: What's the difference between the title tag and the H1?

The title tag (<title) is metadata that appears in the browser tab and as the clickable headline in search results — it's for search engines and the SERP, and isn't shown in the page body. The H1 is an on-page heading visible to users at the top of the content. They often contain similar text but serve different purposes and can differ: the title might include the brand and be optimized for the search listing, while the H1 reads naturally for visitors. Both matter for SEO and clarity, but they're distinct elements with distinct audiences.

Q: Why does my link preview look broken when shared?

Almost always missing or incorrect Open Graph tags. Social platforms (Facebook, LinkedIn, Slack, X) build link previews from og:title, og:description, and especially og:image — not from your <title tag. If those are absent, the preview is blank, pulls the wrong content, or shows no image, which tanks engagement. Set complete OG tags (with a properly-sized ~1200×630 image), and use each platform's debugger (e.g. Facebook's Sharing Debugger) to validate and refresh the cached preview after fixing them.

Q: How long should titles and descriptions be?

Keep title tags around 50–60 characters so they don't get truncated in search results, and front-load the most important words. Keep meta descriptions around 150–160 characters — long enough to be compelling, short enough to display fully. These are guidelines, not hard limits (Google measures by pixel width, not exact characters, and truncation varies), but staying in these ranges keeps your key message visible. Most importantly, make every title and description unique and written to earn the click, rather than padding to hit a length.

Meta Tags & Open Graph

Meta tags are the HTML metadata that control how your pages appear in search results and social media shares — the title, the description snippet, the preview image when someone posts your link. They don't live on the visible page, but they're the first thing a potential visitor sees, and they directly drive whether anyone clicks. A page can rank well or be widely shared and still get no traffic if its title is generic and its preview is broken.

There are two distinct audiences: search engines (title tag and meta description shape your search listing) and social platforms (Open Graph and Twitter Cards shape the link preview on Facebook, LinkedIn, Slack, X, etc.). Getting both right is low-effort, high-leverage work — well-specified, easy to template, and immediately visible in how your links present everywhere they're shared.

TL;DR

Meta tags shape how pages appear in search and social shares — the click-driving first impression.
Title tag + meta description control the search listing.
Open Graph + Twitter Cards control social link previews (title, description, image).
Write them to earn the click — accurate, compelling, and the right length.

Quick Example

The essential metadata for search and social:

Search Metadata

Title tag (<title>) — the clickable headline in search results and the biggest on-page SEO signal among meta tags. Make it accurate, include the key term, front-load what matters, and keep it ~50–60 characters so it isn't truncated. Unique per page.
Meta description (<meta name="description">) — the snippet beneath the title. Not a direct ranking factor, but it heavily influences click-through. Write it as compelling ad copy, ~150–160 characters, unique per page. (Google may rewrite it, but a good one is often used.)

💡 Every page should have a unique title and description. Duplicate or auto-generated ones waste your most valuable search real estate.

Social Metadata

When someone shares your link, social platforms build a preview card from Open Graph (and Twitter Card) tags — not your title tag. Miss them and you get an ugly, blank, or wrong preview that nobody clicks:

og:title, og:description — the preview's headline and text.
og:image — the preview image (the most important for engagement; use a correctly-sized, compelling image, ~1200×630).
og:type, og:url — content type and canonical URL.
Twitter Cards (twitter:card, etc.) — X's equivalent; summary_large_image for a big preview.

Most platforms fall back to Open Graph if Twitter tags are absent, so OG is the priority.

Other Useful Meta Tags

<meta name="viewport"> — required for mobile responsiveness (and mobile-friendliness is a ranking factor).
<meta name="robots"> — indexing directives like noindex (see Crawlability & Indexing).
<link rel="canonical"> — the canonical URL (duplicate-content control).
charset — character encoding.

Best Practices

Unique title + description per page — never duplicate or leave them blank.
Write for clicks — accurate, compelling, key term in the title, right lengths.
Always set Open Graph (title, description, image, url) so shares look good everywhere.
Provide a correctly-sized og:image (~1200×630) — it dominates the preview.
Generate metadata from your data/templates so every page is covered consistently.

Common Mistakes

Missing Open Graph tags

Duplicate or generic titles

FAQ

What's the difference between the title tag and the H1?

The title tag (<title>) is metadata that appears in the browser tab and as the clickable headline in search results — it's for search engines and the SERP, and isn't shown in the page body. The H1 is an on-page heading visible to users at the top of the content. They often contain similar text but serve different purposes and can differ: the title might include the brand and be optimized for the search listing, while the H1 reads naturally for visitors. Both matter for SEO and clarity, but they're distinct elements with distinct audiences.

Does the meta description affect rankings?

Not directly — Google has stated the meta description is not a ranking factor. But it strongly affects click-through rate, because it's the snippet users read when deciding whether to click your result. A compelling, accurate description can meaningfully increase clicks (and click behavior can indirectly influence performance), while a poor or missing one wastes the opportunity. Note that Google often rewrites descriptions based on the query, so it's not guaranteed to use yours — but writing a good, unique one per page maximizes the chance it's shown and that people click.

Why does my link preview look broken when shared?

Almost always missing or incorrect Open Graph tags. Social platforms (Facebook, LinkedIn, Slack, X) build link previews from og:title, og:description, and especially og:image — not from your <title> tag. If those are absent, the preview is blank, pulls the wrong content, or shows no image, which tanks engagement. Set complete OG tags (with a properly-sized ~1200×630 image), and use each platform's debugger (e.g. Facebook's Sharing Debugger) to validate and refresh the cached preview after fixing them.

How long should titles and descriptions be?

Keep title tags around 50–60 characters so they don't get truncated in search results, and front-load the most important words. Keep meta descriptions around 150–160 characters — long enough to be compelling, short enough to display fully. These are guidelines, not hard limits (Google measures by pixel width, not exact characters, and truncation varies), but staying in these ranges keeps your key message visible. Most importantly, make every title and description unique and written to earn the click, rather than padding to hit a length.