Open Graph Tags

Control link previews with Open Graph and Twitter card meta — og:title, image, type, absolute URLs, and debugging scrapers.

intermediate3 min readUpdated Aug 4, 2026

html
open-graph
seo

Open Graph (og:*) meta tags tell Facebook, Slack, LinkedIn, iMessage, and others how to render a link preview. They don’t replace on-page SEO, but a missing og:image is how your launch post looks like a sad blank card.

Docs: Open Graph protocol, MDN meta, Twitter/X cards.

Minimum viable set

<head>
  <title>Flexbox fundamentals — Frontend Beauty</title>
  <meta
    name="description"
    content="Flex container vs items, grow/shrink/basis, alignment, and real layout bugs."
  />

  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="Frontend Beauty" />
  <meta property="og:title" content="Flexbox fundamentals" />
  <meta
    property="og:description"
    content="Flex container vs items, grow/shrink/basis, alignment, and real layout bugs."
  />
  <meta property="og:url" content="https://example.com/learn/css/flexbox-fundamentals" />
  <meta property="og:image" content="https://example.com/og/flexbox.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:locale" content="en_US" />

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Flexbox fundamentals" />
  <meta
    name="twitter:description"
    content="Flex container vs items, grow/shrink/basis, alignment, and real layout bugs."
  />
  <meta name="twitter:image" content="https://example.com/og/flexbox.png" />
</head>

Note: Open Graph uses property, many Twitter tags use name.

Image rules of thumb

Prefer 1200×630 (1.91:1) for large cards
Absolute HTTPS URLs — relative paths often fail scrapers
Keep safe margins; platforms crop differently
File size moderate; some scrapers timeout on huge images
Text on image should stay large and high-contrast

Types

`og:type`	Use
`website`	Generic marketing / home
`article`	Blog/docs with author/time optional
`product`	Commerce (extensions exist)

Article extras:

<meta property="article:published_time" content="2025-10-06T00:00:00Z" />
<meta property="article:author" content="https://example.com/about" />

Dynamic apps

Scrapers often do not execute your SPA JS. If OG tags are only set in useEffect, Slack will see the shell. Use:

SSR / SSG meta
Prerender
Edge-injected meta per path

Validate with:

Facebook Sharing Debugger
LinkedIn Post Inspector
Twitter/X Card Validator

Expect cache — refresh/scrape again after fixes.

Consistency

Align og:title with <title> enough that users aren’t bait-and-switched. og:url should match the canonical URL you want shared.

Interview out-loud

“Open Graph tags drive link previews: title, description, url, image, type. Images need absolute URLs and sensible dimensions. I put tags in the initial HTML for scrapers, pair with Twitter card tags, and re-scrape after changes because platforms cache previews.”

Footguns

Relative og:image.
Client-only meta in SPAs.
200×200 logos on large card type.
Mismatched http/https or trailing-slash duplicates.
Forgetting cache bust when swapping images (?v=2 or new path).

Per-route SSR pseudo-code

function renderHead({ title, description, url, image }) {
  return `
    <title>${escape(title)}</title>
    <meta property="og:title" content="${escape(title)}" />
    <meta property="og:description" content="${escape(description)}" />
    <meta property="og:url" content="${escape(url)}" />
    <meta property="og:image" content="${escape(image)}" />
    <meta name="twitter:card" content="summary_large_image" />
  `;
}

Escape attribute values. Generate absolute image URLs from a known site origin config, not from request Host headers alone (host header injection risks).

Image generation pipelines

Many sites generate OG images per title with edge functions. Cache aggressively by slug; include versioning when the template design changes. Ensure the generator returns PNG/JPEG with correct content-type. Test Unicode titles and long headlines for overflow in the template. Keep a default brand image fallback when generation fails.