Implementation · 9 min read

Open Graph meta tags: the complete reference

Every Open Graph meta tag, what it does, and a copy-paste example. Includes the minimum viable set, Twitter card tags, and the mistakes that break previews.

Updated October 27, 2026

The short answer

Open Graph meta tags go in the page's <head> and describe how a link should look when shared. The minimum viable set is og:title, og:type, og:image, and og:url; add og:description, og:site_name, og:image:width, og:image:height, and og:image:alt. Use absolute HTTPS URLs, serve the tags in the initial HTML, and add twitter:card plus twitter:image for X.

Placement: Inside <head>
Required: title, type, image, url
Image URL: Absolute, public, HTTPS
Image size: 1200 x 630 px
X card tag: twitter:card
Validation: Facebook Debugger, LinkedIn Inspector

On this page

The minimum viable set
Every tag, and when to use it
The Twitter card tags
Where the tags go, and why order matters
Absolute URLs are not optional
The mistakes that break previews
How to validate the tags
Framework notes

Open Graph tags are ordinary <meta> elements. They do not change the page, they do not appear in the browser, and they do not need JavaScript. Their only job is to give a scraper a clean description of the page so it can build a link preview without guessing.

That simplicity is why the mistakes are so repetitive. A tag in the wrong place, a relative image path, or a second set of tags from a plugin can break the preview while the page itself looks perfect. This reference covers the tags worth using, the order to add them in, and the checks that catch the failures.

The minimum viable set

Four tags that make a valid preview

<meta property="og:title" content="A clearer way to ship" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://example.com/og/a-clearer-way-to-ship.png" />
<meta property="og:url" content="https://example.com/blog/a-clearer-way-to-ship" />

Those four are the properties the Open Graph protocol lists as required. In practice, a card without og:description looks unfinished, and a card without image dimensions can jump while it loads. The recommended set is longer, and it is worth using.

The full set for a page

<meta property="og:title" content="A clearer way to ship" />
<meta property="og:description" content="What changed, why it matters, and what to try first." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/a-clearer-way-to-ship" />
<meta property="og:site_name" content="Example" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="https://example.com/og/a-clearer-way-to-ship.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Dark card with the headline: A clearer way to ship" />
<meta property="og:image:type" content="image/png" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="A clearer way to ship" />
<meta name="twitter:description" content="What changed, why it matters, and what to try first." />
<meta name="twitter:image" content="https://example.com/og/a-clearer-way-to-ship.png" />
<meta name="twitter:image:alt" content="Dark card with the headline: A clearer way to ship" />
<meta name="twitter:site" content="@yourhandle" />

Every tag, and when to use it

Tag	Required	What it does	Practical rule
`og:title`	Yes	The card headline	Keep it under about 60 characters; do not duplicate the site name
`og:type`	Yes	The kind of object	`website` for home pages, `article` for posts, `product` for products
`og:image`	Yes	The preview image	Absolute HTTPS URL, 1200 x 630, public, under 1 MB
`og:url`	Yes	The canonical page URL	The page, not the image; use the canonical URL
`og:description`	Recommended	The supporting line	One or two sentences, about 100-160 characters
`og:site_name`	Recommended	The publication name	The brand, not the page title
`og:locale`	Optional	The content locale	`en_US`, `en_GB`, `de_DE`; useful on multilingual sites
`og:image:width`	Recommended	Image width in pixels	Must match the real file
`og:image:height`	Recommended	Image height in pixels	Must match the real file
`og:image:alt`	Recommended	Image description	Describe the image literally; do not repeat the title
`og:image:type`	Optional	MIME type	`image/png`, `image/jpeg`, `image/webp`
`og:image:secure_url`	Optional	HTTPS image URL	Only needed when the image URL differs from `og:image`
`og:video`	Optional	Video URL	Rarely useful for link cards; check platform support
`og:audio`	Optional	Audio URL	Rarely used by modern platforms
`article:published_time`	Optional	Publication date	ISO 8601; helps some readers and crawlers
`article:modified_time`	Optional	Last update	ISO 8601
`article:author`	Optional	Author profile	A URL, not a name
`article:section`	Optional	Article section	A short category label
`article:tag`	Optional	Article tags	One tag per meta element

The Twitter card tags

X reads Open Graph tags as a fallback, but the twitter:* tags take precedence and control the card type. If you care about how the link looks on X, add them rather than relying on the fallback.

Tag	What it does	Common values
`twitter:card`	Selects the card layout	`summary_large_image` or `summary`
`twitter:title`	Card headline	Usually the same as `og:title`
`twitter:description`	Card description	Usually the same as `og:description`
`twitter:image`	Card image	1200 x 628 or the same 1200 x 630 file
`twitter:image:alt`	Image description	Literal description for accessibility
`twitter:site`	The site's X handle	`@yourhandle`
`twitter:creator`	The author's X handle	`@authorhandle`

Use summary_large_image when you have a purpose-built 1.91:1 card. Use summary when you want the compact square layout, which is more common for a profile or a small utility page. X's card markup reference is the source of truth for the current tags.

Where the tags go, and why order matters

Put the tags inside <head>, before the closing </head>. Order among the meta tags does not matter to the protocol, with one exception: if the same property appears more than once, scrapers typically use the first or the last value depending on the platform. That ambiguity is the problem. There should be exactly one og:image per page unless you are deliberately providing multiple images and have checked the platform's behaviour.

The shape of a document

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>A clearer way to ship</title>
    <meta name="description" content="What changed, why it matters, and what to try first." />

    <!-- Open Graph -->
    <meta property="og:title" content="A clearer way to ship" />
    <meta property="og:description" content="What changed, why it matters, and what to try first." />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="https://example.com/blog/a-clearer-way-to-ship" />
    <meta property="og:image" content="https://example.com/og/a-clearer-way-to-ship.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />

    <!-- X -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:image" content="https://example.com/og/a-clearer-way-to-ship.png" />

    <link rel="canonical" href="https://example.com/blog/a-clearer-way-to-ship" />
  </head>
  <body>
    ...
  </body>
</html>

Keep og:url and the canonical link in sync. They do different jobs, but a mismatch tells the platform that the preview belongs to one URL while search engines treat another as canonical. On a site with query parameters, tracking links, or syndicated copies, that mismatch is common and easy to miss.

Absolute URLs are not optional

The scraper fetches the image from outside your page. It has no reliable way to resolve /og.png against your domain, and different platforms handle the ambiguity differently. Always write the full URL, including the protocol and host:

Do this

<meta property="og:image" content="https://example.com/og/card.png" />

Not this

<meta property="og:image" content="/og/card.png" />
<meta property="og:image" content="http://localhost:3000/og/card.png" />
<meta property="og:image" content="https://example.com/api/image?id=123" />

The last example is not always wrong, but it is risky. If the endpoint requires a session, rate-limits requests, or returns a redirect chain, the scraper may fail. A static file or a stable public image endpoint is more reliable.

The mistakes that break previews

Tags injected only by JavaScript. Many social crawlers do not execute your app. Server-render the tags or use your framework's metadata API.
Duplicate tags. A CMS plugin and a hand-written set can both emit og:image, and the platform may pick the wrong one. Pick one source of truth.
A 404 or hotlink-protected image. The page can be fine while the image is blocked by a CDN rule, an authentication wall, or a referrer policy.
A relative image URL. Use the full HTTPS URL.
A mismatch between declared and actual dimensions. Set og:image:width and height to the real numbers.
A square image in a wide card. The platform crops it and removes the headline. Design at 1.91:1.
A stale cache. Replacing the file at the same URL does not refresh the preview. Change the filename or force a re-scrape.
Tags in the body. Some scrapers ignore them. Keep them in the head.
A missing `og:url` on filtered or paginated pages. The preview may point at the wrong canonical.

How to validate the tags

01View the page source. Confirm the tags are in the initial HTML response, not only in the DOM after hydration.
02Fetch the image URL directly. It should return 200, the right content type, and the dimensions you declared.
03Use the Facebook Sharing Debugger. It shows the scraped tags, the image, and any warnings, and it can force a re-scrape.
04Use the LinkedIn Post Inspector. It shows the preview and cache state for LinkedIn.
05Paste the URL into an X draft. The composer preview is the practical test for the card X will show.
06Re-paste in Slack and Discord. Both cache; a new query string or filename forces a fresh fetch.

Framework notes

Next.js App Router: export a metadata object or generateMetadata from the page. Set metadataBase so relative image paths resolve to absolute URLs. Use opengraph-image.tsx when the image needs to be generated per page.
WordPress: an SEO plugin usually owns the tags. Set a default social image, then override it per post. If you add tags by hand, remove the plugin's output or disable its social module first.
Static HTML: write the tags in the head. If you use a templating language, make the image URL a variable so it cannot drift from the page URL.
Single-page apps: the tags must be in the HTML the server returns. A client-side router that updates document.head after load will not help most social crawlers.

If you want the tags generated for you, the Open Graph meta tag generator builds the block from a form and shows a live card preview. For the Next.js implementation, see the Next.js Open Graph guide.

Frequently asked questions

What are the required Open Graph tags?

The Open Graph protocol lists four required properties: og:title, og:type, og:image, and og:url. Add og:description, og:site_name, and the image dimensions for a complete card.

Where do Open Graph meta tags go?

Inside the page's <head>, in the initial server-rendered HTML. Tags injected only by client-side JavaScript are invisible to many social crawlers.

Do Open Graph tags need to be absolute URLs?

The image URL should be absolute in practice. A relative path such as /og.png is resolved inconsistently by different scrapers. Use https://yourdomain.com/og.png.

What is the difference between og:image and twitter:image?

og:image is the Open Graph image used by Facebook, LinkedIn, Slack, Discord, and most other platforms. twitter:image is X's override. They can point at the same file, which is the simplest setup.

Can I have multiple og:image tags?

The protocol allows multiple images, but platform behaviour varies. For a predictable card, use one og:image. If you need a square variant for a specific platform, use that platform's own tag rather than stacking Open Graph images.

Do Open Graph tags affect SEO?

They are not a Google ranking factor. They affect how a link looks when shared, which changes click-through and can lead to more links and discovery. Google's rich results use schema.org, not Open Graph.

How long should og:title and og:description be?

Keep og:title under about 60 characters and og:description around 100-160 characters. Platforms truncate at different points, so put the important words first.

Why does my CMS show two different OG images?

A plugin and a theme, or a plugin and hand-written tags, are both emitting og:image. Disable one source of truth, then re-scrape the URL. Use the page source to confirm only one image tag remains.

Sources and further reading

Written and maintained by GxAditya

The person who builds ogimg.in. Last updated October 27, 2026. 9 min read.

About the project

Free, no account

Make the image, then copy the tags

Start from a template or a blank canvas. Export a 1200 x 630 PNG, JPEG, or WebP, and copy the Open Graph tags from the preview panel.

Open the canvas Browse templates