What is OG in meta tags?

OG stands for Open Graph, a protocol Facebook introduced in 2010 for describing a web page to the apps that share it. Open Graph meta tags live in the of your HTML and use a property attribute like property="og:title". Facebook, LinkedIn, Slack, Discord, iMessage, and WhatsApp all read them to build the rich preview card that appears when someone shares your link.

What are the required OG tags?

Four are effectively required for a preview card: og:title, og:type, og:image, and og:url. In practice you also want og:description, which fills the summary line under the title. Miss og:image and most platforms fall back to a bare text link with no picture, so treat those five as the baseline for every shareable page.

What is the metadata og:image for?

og:image points to the picture shown in the link preview. It should be an absolute https URL, at least 600 by 315 pixels, and ideally 1200 by 630 to render the large card. The crawler fetches that exact URL, so it has to be publicly reachable and not behind an auth wall. A common pattern is to render an on-brand HTML template and capture it as the image.

og:type is the category of the page: website is the safe default, article is right for blog posts and news, and there are richer types like video.movie, book, and profile. The type controls which extra structured tags a platform will read (for example article:published_time on an article). If you set nothing, most crawlers assume website.

What is the og:title meta tag?

og:title is the headline of the preview card, independent of the page's element. Keeping it close to your is fine, but og:title lets you write a version tuned for sharing. Aim for under about 60 characters so it does not truncate in the card, and make it specific rather than just your site name.

Do I need twitter: tags if I already have og: tags?

Not strictly. X falls back to og:title, og:description, and og:image when the matching twitter: tags are absent. The one you do want is twitter:card set to summary_large_image, which tells X to render the big image card instead of a small thumbnail. Beyond that, twitter:title and twitter:image only matter if you want a different headline or picture on X than everywhere else.

Back to blog

OG images

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

August 8, 2026 · 6 min read · Grabbit Team

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.

FAQ

What is OG in meta tags?: OG stands for Open Graph, a protocol Facebook introduced in 2010 for describing a web page to the apps that share it. Open Graph meta tags live in the <head> of your HTML and use a property attribute like property="og:title". Facebook, LinkedIn, Slack, Discord, iMessage, and WhatsApp all read them to build the rich preview card that appears when someone shares your link.
What are the required OG tags?: Four are effectively required for a preview card: og:title, og:type, og:image, and og:url. In practice you also want og:description, which fills the summary line under the title. Miss og:image and most platforms fall back to a bare text link with no picture, so treat those five as the baseline for every shareable page.
What is the metadata og:image for?: og:image points to the picture shown in the link preview. It should be an absolute https URL, at least 600 by 315 pixels, and ideally 1200 by 630 to render the large card. The crawler fetches that exact URL, so it has to be publicly reachable and not behind an auth wall. A common pattern is to render an on-brand HTML template and capture it as the image.
What is an og:type?: og:type is the category of the page: website is the safe default, article is right for blog posts and news, and there are richer types like video.movie, book, and profile. The type controls which extra structured tags a platform will read (for example article:published_time on an article). If you set nothing, most crawlers assume website.
What is the og:title meta tag?: og:title is the headline of the preview card, independent of the page's <title> element. Keeping it close to your <title> is fine, but og:title lets you write a version tuned for sharing. Aim for under about 60 characters so it does not truncate in the card, and make it specific rather than just your site name.
Do I need twitter: tags if I already have og: tags?: Not strictly. X falls back to og:title, og:description, and og:image when the matching twitter: tags are absent. The one you do want is twitter:card set to summary_large_image, which tells X to render the big image card instead of a small thumbnail. Beyond that, twitter:title and twitter:image only matter if you want a different headline or picture on X than everywhere else.

Capture any website with one API call

Get a free test key and capture your first screenshot in two minutes.

Get your free test key Learn more

Written by

Grabbit Team

Screenshots as a service

The team behind Grabbit, the screenshot API for developers and AI agents. We write about web capture, rendering, and automating screenshots at scale.

Keep reading

OG imagesWhat Is an OG Image? Why Your Shared Links Look Broken

OG images

What Is an OG Image? Why Your Shared Links Look Broken

An OG image is the preview image that appears when a link is shared on social media. Learn what it is, why it breaks, and how to automate one per page.

Jun 13, 2026 · 5 min read

OG images

How to Test and Preview Your OG Image Before Publishing

Preview your OG image before you publish using platform debuggers and a screenshot API. Test how a link unfurls on X, Facebook, LinkedIn, Slack, and from localhost.

Jun 14, 2026 · 10 min read

OG images

Open Graph Debugger: How to Fix a Broken Link Preview

Use an Open Graph debugger to fix a broken link preview. Read the Facebook, LinkedIn, and X validators, force a re-scrape to clear a stale cache, and generate a correct og:image.

Jul 8, 2026 · 6 min read