What Open Graph tags are
Open Graph tags are <meta> tags in a page’s <head> that describe how the URL should look when it’s shared. They use the og: prefix and come from the Open Graph protocol Facebook published in 2010. The five that matter most:
- og:title — the headline shown on the preview card.
- og:description — one or two sentences under the title.
- og:image — the preview image, as an absolute URL.
- og:url — the canonical URL for the content being shared.
- og:type — what it is (website, article, and so on).
Twitter Cards, in one paragraph
Twitter Cards are X/Twitter’s layer on top of Open Graph. The one tag you need is twitter:card, set to summary_large_image for a big image preview (or summary for a small thumbnail). X falls back to your og: tags for the title, description and image, so you don’t duplicate every field — add twitter:card and optionally twitter:site, and let Open Graph supply the rest.
Why they matter
Link previews are everywhere. The moment someone pastes your URL into Slack, iMessage, WhatsApp, LinkedIn or X, the platform fetches your page and builds a card from these tags. With them, your link is a title, a crisp description and an image. Without them, it’s a bare, low-trust URL that gets fewer clicks.
Machines read them too. Search and AI answer engines treat Open Graph as another explicit statement of your title, description and canonical URL — reinforcing what your <title>, meta description and structured data already say. Consistent signals across all of them help a machine trust and summarize the page.
The image spec that actually works
- 1200 × 630 pixels — the 1.91:1 ratio that fills a large card without cropping on the major platforms.
- Absolute https:// URL — og:image must be fully qualified. A relative path is the number-one reason previews show no image.
- Under ~5 MB, PNG or JPG — and keep important text well inside the frame, since edges get trimmed at different aspect ratios.
- Not too small — below roughly 600 × 315 some platforms drop to a small thumbnail instead of the big card.
A copy-paste example
A complete, valid set — swap in your values and drop it in the page’s <head>:
<!-- Open Graph — read by most platforms -->
<meta property="og:title" content="How to reduce Largest Contentful Paint" />
<meta property="og:description" content="A practical guide to cutting LCP on real sites." />
<meta property="og:image" content="https://example.com/og/reduce-lcp.png" />
<meta property="og:url" content="https://example.com/blog/reduce-lcp" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Example" />
<!-- Twitter Card — X-specific, falls back to og: -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@example" />Keep og:title / og:description aligned with the page’s real <title> and meta description — mismatched previews read as clickbait and erode trust.
Common mistakes
- ✕No og:image at all. The image is what makes a shared link stop the scroll. Without it you get a text-only card — or on some platforms, nothing.
- ✕A relative image URL. og:image must be an absolute https:// URL. A path like /og.png won’t resolve for the platform fetching it.
- ✕Wrong dimensions. Square or tiny images get cropped awkwardly or downgraded to a thumbnail. Ship a 1200 × 630 asset.
- ✕Title and description that don’t match the page. A preview promising one thing and a page delivering another looks like bait and costs you trust and clicks.
- ✕Assuming edits show instantly. Platforms cache previews aggressively. After changing tags you usually have to re-scrape the URL in their debugger to see the new card.
How to validate
After adding the tags, paste the URL into a platform’s debugger — Facebook’s Sharing Debugger, LinkedIn’s Post Inspector, or Slack’s own unfurl — to see the card each one renders and to force a fresh scrape past any stale cache. Confirm the image loads, the title and description are right, and og:url points at the canonical URL.
AvocadoScore checks Open Graph and Twitter Card completeness across your pages, alongside structured data and the rest of your SEO and AI readiness — as part of the readiness scorecard and the full audit.
Questions, answered
What are Open Graph tags?+
Open Graph tags are <meta> tags in a page’s <head> that describe how the page should appear when its URL is shared — the title, description, image, canonical URL and content type. They use the og: prefix (og:title, og:description, og:image, og:url, og:type) and come from the Open Graph protocol Facebook introduced in 2010. Almost every platform that renders a link preview — social networks, messaging apps, Slack, iMessage — reads them.
What is the difference between Open Graph and Twitter Cards?+
Open Graph is the shared standard most platforms read; Twitter Cards are X/Twitter’s own layer on top. The key tag is twitter:card (usually summary_large_image for a big preview image). X falls back to Open Graph tags when Twitter-specific ones are absent, so in practice you write a full set of og: tags and add just twitter:card (and optionally twitter:site) — you do not need to duplicate every field.
What size should an Open Graph image be?+
Use 1200 x 630 pixels (a 1.91:1 ratio) — the size that fills a large link-preview card without cropping on the major platforms. Keep it under about 5 MB, use PNG or JPG, and put any important text safely inside the frame since edges can be trimmed. Below roughly 600 x 315 some platforms downgrade to a small thumbnail instead of the large card.
Why is my link preview not showing an image?+
The usual causes are a missing og:image, a relative image URL (og:image must be an absolute https:// URL), an image that is too small or too large, or the platform serving a stale cache from before you added the tag. Fix the tag, then re-scrape the URL in the platform’s debugger (for example Facebook’s Sharing Debugger) to refresh the cached preview.
Do Open Graph tags help with SEO or AI?+
They are not a direct Google ranking factor, but they raise click-through by making shared links look credible, and that engagement matters. They also give search and AI answer engines another clean, explicit statement of a page’s title, description and canonical URL — reinforcing what your <title>, meta description and structured data already say. Consistent signals across all of them help a machine trust and summarize the page.
See which of your pages are missing social meta tags
AvocadoScore checks Open Graph, Twitter Cards and structured data across your whole site, alongside SEO, performance and AI readiness. Free, every fix unlocked.