Nico Acosta for Grabbit

Posted on Aug 8 • Originally published at grabbit.live

Open Graph Meta Tags: The Complete Reference (Every Tag, With Examples)

#webdev #javascript #seo #html

Open Graph meta tags are the snippets in your page's <head> that control how a link looks when someone shares it. Get them right and your URL unfurls into a rich card with a title, a summary, and an image. Miss them and the same link shows up as bare text. This is the complete reference: every tag worth setting, what each one does, and copy-paste examples.

The short answer: five tags

Most pages need exactly five Open Graph tags. Put these in the <head>:

<meta property="og:title" content="Your page title" />
<meta property="og:description" content="A one-line summary of the page." />
<meta property="og:image" content="https://yoursite.com/og/your-page.png" />
<meta property="og:url" content="https://yoursite.com/your-page" />
<meta property="og:type" content="website" />

Facebook, LinkedIn, Slack, Discord, iMessage, and WhatsApp all read these. Set them and your link previews work almost everywhere. The rest of this reference covers the optional tags and the X-specific ones.

The required tags, one by one

These five carry the card. Skip any of them and the preview degrades.

Tag	What it does
`og:title`	The headline of the card. Independent of the `<title>` element.
`og:description`	The summary line under the title. One or two sentences.
`og:image`	The picture in the card. Absolute URL, 1200 by 630 for the large card.
`og:url`	The canonical URL of the page, without tracking parameters.
`og:type`	The category: `website`, `article`, `video.movie`, and so on.

A few details that trip people up:

og:title is not your <title>. They can match, but og:title lets you write a version tuned for sharing. Keep it under about 60 characters so it does not truncate.
og:url should be the canonical URL. Use the clean permanent address, not the one with ?utm_source=... on it, so every share collapses to the same object.
og:image must be an absolute https:// URL. A relative path like /og.png will not resolve for the crawler. It also has to be publicly reachable: if the image needs a login, the card shows nothing.

The image tags that make the large card render

og:image alone works, but three companion tags make the difference between a big card and a small thumbnail:

<meta property="og:image" content="https://yoursite.com/og/your-page.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A short description of the image" />

Declaring og:image:width and og:image:height lets the platform reserve the right space and render the large card immediately instead of guessing the dimensions on first fetch. Use 1200 by 630 pixels, the size every major platform treats as the full-width preview. og:image:alt is the accessibility description, read by screen readers on platforms that expose it.

The optional tags worth setting

Beyond the core five, a handful of tags add polish and matter for specific og:type values:

<meta property="og:site_name" content="Your Brand" />
<meta property="og:locale" content="en_US" />

og:site_name is the name of the overall site, shown as a small label on some cards (LinkedIn, for instance). Set it once to your brand.
og:locale declares the language and region, like en_US or fr_FR. Useful if your pages are localized.

When og:type is article, these structured tags become relevant and show up on news and blog cards:

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-08-08T09:00:00Z" />
<meta property="article:author" content="https://yoursite.com/authors/jane" />
<meta property="article:section" content="Engineering" />
<meta property="article:tag" content="open graph" />

You only need the article:* tags on pages that are genuinely articles. For a marketing page or a landing page, og:type of website and the core five are enough.

X (Twitter) tags: what you actually need

X reads its own twitter: tags but falls back to your og: tags when they are absent. The one tag you should always set is twitter:card:

<meta name="twitter:card" content="summary_large_image" />

Without summary_large_image, X renders a small square thumbnail beside the text instead of the big image card. Note the attribute difference: og: tags use property=, while twitter: tags use name=.

You can stop there. X will pull the title, description, and image from og:title, og:description, and og:image. Only add these if you want a different headline or image on X than everywhere else:

<meta name="twitter:title" content="A headline tuned for X" />
<meta name="twitter:description" content="A summary tuned for X." />
<meta name="twitter:image" content="https://yoursite.com/og/your-page.png" />

A complete, copy-paste example

Here is the full <head> block for a typical article page, combining everything above:

<head>
  <title>Open Graph Meta Tags: The Complete Reference</title>

  <!-- Open Graph -->
  <meta property="og:title" content="Open Graph Meta Tags: The Complete Reference" />
  <meta property="og:description" content="Every og: tag worth setting, with examples." />
  <meta property="og:image" content="https://yoursite.com/og/reference.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:url" content="https://yoursite.com/blog/og-meta-tags" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="Your Brand" />

  <!-- X (Twitter) -->
  <meta name="twitter:card" content="summary_large_image" />
</head>

How to generate the og:image from a URL

Writing the tags is the easy part. The hard part is producing a unique, on-brand og:image for every page without designing one by hand. The pattern that scales: build one HTML template that renders the page title and your branding, then capture that template as an image at 1200 by 630.

A screenshot API turns that into a single request. Point it at your template URL with a fixed viewport, and get back a hosted image you can drop straight into og:image:

curl -X POST https://grabbit.live/api/v1/grabs \
  -H "Authorization: Bearer sk_live_your_key" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://yoursite.com/og-template?title=Your+Post+Title",
    "width": 1200,
    "height": 630,
    "format": "png"
  }'

The response includes the hosted image URL. Set og:image to it, and every page gets its own preview card generated from real HTML, no design tool required. This is the same approach behind dynamic OG images in Next.js and any other framework: render a URL, screenshot it, ship the result.

For the deeper background on why the image matters and how platforms crop it, see what an OG image is. Once your tags are live, run the page through an OG image checker to confirm the crawler sees what you expect, and if a preview looks wrong, an Open Graph debugger shows you the exact tags each platform scraped.

Grabbit is a screenshots-as-a-service API built for exactly this job: point it at a URL, get back a hosted image, no headless browser to run. Live grabs are a flat $0.002 each on prepaid credits that never expire, and a test key renders free placeholders so you can wire up your OG pipeline before adding a card. See the screenshot API for the full reference.

Common mistakes

Injecting og: tags with client-side JavaScript. Crawlers run little to no JS, so they see an empty <head>. Server-render your meta tags.
A relative og:image path. It must be an absolute https:// URL, or the image will not resolve.
Forgetting twitter:card. Without summary_large_image, X shows a small thumbnail instead of the large card.
Not clearing the cache after a fix. Platforms cache the scrape. Use each platform's debugger to force a re-scrape once you have corrected a tag.

Originally published on the Grabbit blog.

DEV Community