Open Graph & Meta Tags: The Complete Guide

The three tag families, and what each one actually controls

Everything on this page falls into three separate systems that happen to live in the same <head> block:

• Core meta tags — <title>, meta name="description", link rel="canonical", and meta name="robots" — control how the page is indexed and how it appears in Google's organic search results.
• Open Graph tags (og:*) — a protocol originally built by Facebook, now read by most link-preview systems: LinkedIn, Slack, Discord, WhatsApp, and X as a fallback. They control the title, description and image shown when a link is pasted or shared.
• Twitter Card tags (twitter:*) — X's own tag set, checked before it falls back to Open Graph. They exist because X's card layouts (a large image vs. a small thumbnail) needed a control OG's spec doesn't have.

They're independent — a page can have perfect Open Graph tags and a broken title tag, or vice versa — which is exactly why a generator that shows a live search preview and a live social preview side by side, like Frost Rank's Meta / OG Tag Generator, catches mismatches a plain text editor won't.

Title and meta description: the limits that actually matter

Google doesn't enforce a hard character limit — it truncates based on pixel width, which varies by character. In practice, staying under roughly 60 characters for a title and 155–160 characters for a description keeps almost everything from being cut off with an ellipsis in desktop search results. Going over isn't an error; it just means Google is likely to truncate your copy at an arbitrary point instead of your intended one, so the sentence should still make sense if it gets cut.

The description also isn't guaranteed to be used verbatim. Google generates its own snippet from on-page content whenever it decides that produces a better answer for the specific query someone searched — documented, intentional behavior, not a sign your description is being ignored across the board. Writing an accurate, specific description still raises the odds it gets used as-is.

Open Graph, field by field

A minimal, working Open Graph block looks like this:

<meta property="og:title" content="Frost Rank | Free SEO Tools">
<meta property="og:description" content="Free, no-signup SEO tools that run in your browser.">
<meta property="og:image" content="https://frostrank.com/og-image.png">
<meta property="og:url" content="https://frostrank.com/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Frost Rank">

• og:title / og:description — usually a close match to your page title and meta description, but they don't have to be identical. Some sites write a slightly punchier, more social-toned version for og:description since it's competing for attention in a feed rather than a search results list.
• og:image — the single highest-impact field. A card with no image, or a broken image URL, gets skipped over in a social feed almost every time regardless of how good the copy is. Use an absolute URL (not a relative path) — some platforms' crawlers won't resolve relative paths correctly.
• og:type — website for most pages, article for blog posts and news (unlocks extra fields like article:published_time), product for e-commerce.
• og:url — the canonical URL for this content. Should match your rel="canonical" tag, not a tracking-parameter-laden variant.

Twitter Card tags and the fallback behavior

X checks for twitter:* tags first and only falls back to Open Graph for whatever's missing. The two card types that matter:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Frost Rank | Free SEO Tools">
<meta name="twitter:description" content="Free, no-signup SEO tools that run in your browser.">
<meta name="twitter:image" content="https://frostrank.com/og-image.png">
<meta name="twitter:site" content="@yourhandle">

summary_large_image renders a full-width image card; plain summary renders a small square thumbnail next to the text. Since large-image cards get meaningfully more visual real estate in a feed, there's rarely a reason to choose summary deliberately once you have a decent 1200×630px image to use.

Why a correct set of tags can still render broken

This is the single most common support question around Open Graph tags, and it's almost never a tag problem: Facebook, LinkedIn and X each cache a URL's preview the first time it's shared, and none of them re-check it automatically on your schedule. If you fix a broken og:image and immediately re-share the link, you'll often still see the old, broken preview — because the platform is serving its cached snapshot, not re-reading your page.

The fix is to force a re-scrape, not to edit the tags again:

• Facebook / Messenger — paste the URL into Facebook's Sharing Debugger and click "Scrape Again."
• LinkedIn — use LinkedIn's Post Inspector, which also forces a re-fetch.
• X — there's no public re-scrape tool; the cache generally clears after a period of days, or the moment X's crawler independently revisits the URL.

Common mistakes worth checking for

• Relative image URLs in og:image. /images/og.png works in a browser but many social crawlers won't resolve it against the page's domain — always use the full https:// URL.
• Duplicate or auto-generated titles across every page. A CMS default like "{Page Title} | {Site Name}" repeated with no real per-page customization gives Google little reason not to rewrite it, since it isn't distinguishing the page from any other.
• og:url pointing at the wrong canonical. If og:url includes a tracking parameter or a non-canonical variant of the URL, shares of that link fragment engagement metrics across two different tracked URLs instead of one.
• Missing twitter:card entirely. Without it, X falls back to Open Graph — usually fine, but you lose the explicit control over summary vs. summary_large_image.

Frequently asked questions