Open Graph tags, explained
Open Graph is a handful of og: meta tags that tell Facebook, LinkedIn, X, Slack and messengers how to show a link to your page — its title, description and picture.
The four tags every page needs
Put them in the page’s <head>, in the HTML the server sends. With these, every app can build a card: title, description, image, and the page they belong to.
<meta property="og:title" content="How we cut our cloud bill by 63%" />
<meta property="og:description" content="What we changed, what it saved, and what we'd do again." />
<meta property="og:image" content="https://example.com/og/cloud-bill.png" />
<meta property="og:url" content="https://example.com/blog/cloud-bill" />Every og: tag
The Open Graph protocol (ogp.me) defines more, but these are the ones apps actually read.
| Tag | What it does | Example |
|---|---|---|
| og:title | The headline of the card. Keep it under ~60 characters; it can differ from the <title>. | How we cut our cloud bill by 63% |
| og:description | One or two sentences under the title. Some apps (LinkedIn, X) don't show it in every layout. | What we changed and what it saved. |
| og:image | The picture. An absolute https URL; 1200×630 px works everywhere. | https://example.com/og/post.png |
| og:url | The page's canonical address. Facebook shows the preview of this URL, so it must point to the page itself. | https://example.com/blog/post |
| og:type | website for most pages, article for posts (then article:* tags apply), product, video.movie and others. | article |
| og:site_name | The brand shown above or below the title on Facebook, Slack and Telegram. | Example |
| og:locale | The language and region of the content. | en_US |
| og:image:width / height | The image size in pixels, so apps can lay out the card before the image loads. | 1200 / 630 |
| og:image:alt | A text description of the image, read by screen readers. | Chart of spend falling by 63% |
| og:image:type | The image's MIME type, when the URL doesn't make it obvious. | image/png |
| og:image:secure_url | An https copy of the image for old http pages. With an https og:image you don't need it. | https://… |
| og:video | A video for the card (with og:video:type, width and height). Only some apps play it inline. | https://example.com/clip.mp4 |
| article:published_time | With og:type article: when it was published (ISO 8601). Also article:author, article:section, article:tag. | 2026-10-09T09:00:00Z |
Twitter card tags
X reads its own twitter: tags and falls back to og: ones, so most sites only add twitter:card. Check the result in our Twitter card validator.
| Tag | What it does | Example |
|---|---|---|
| twitter:card | The card layout: summary_large_image (big picture) or summary (small square). Without it X shows the small card. | summary_large_image |
| twitter:title / description | Override og:title and og:description on X; without them X uses the og: ones. | — |
| twitter:image | Override og:image on X. Large card: 2:1, at least 300×157, up to 5 MB. | https://example.com/og/x.png |
| twitter:image:alt | Alt text for the card image on X. | Chart of spend falling by 63% |
| twitter:site / creator | The @handle of the site and of the author. | @example |
A complete example
Everything a blog post needs for a large card in every app. Need the picture? Make one in the OG image generator; sizes per app are in the OG image size guide.
<!-- Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Example" />
<meta property="og:title" content="How we cut our cloud bill by 63%" />
<meta property="og:description" content="What we changed, what it saved, and what we'd do again." />
<meta property="og:url" content="https://example.com/blog/cloud-bill" />
<meta property="og:image" content="https://example.com/og/cloud-bill.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Chart of monthly cloud spend falling by 63%" />
<meta property="og:locale" content="en_US" />
<!-- X (Twitter) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@example" />Which tags each app uses
- Facebookog:title, og:description, og:image, og:url, og:type, og:site_name. Caches a link after the first share — refresh it in the Sharing Debugger.
- X (Twitter)twitter: tags first, og: as the fallback. twitter:card decides big or small card. Its Card Validator no longer shows previews.
- LinkedInog:title, og:image, og:description (often not shown). Ignores twitter: tags. Caches for about 7 days; Post Inspector refreshes it.
- WhatsAppog:title, og:description, og:image — the image must be https and reportedly under ~300 KB, or the preview has no picture.
- Slack, Discord, Telegramog: tags, with twitter: as a fallback in some cases. Telegram shows a small thumbnail for images below about 300 px wide.
- iMessageog:title and og:image (it fetches the page itself when the link is sent).
Why a link preview breaks
Paste your page into the OG image checker to see which of these it has.
- A relative og:image“/images/og.png” works in a browser, not in a crawler. Use the full https URL.
- Two og:image tagsA theme and an SEO plugin both add one; apps pick one you didn't choose. Keep one.
- og:url pointing elsewhereA template copies the home page URL to every page, so every share shows the home page preview.
- An image that's too small or squareBelow 600×315 Facebook shows a small thumbnail; square images get cropped to 1.91:1.
- Tags added by JavaScriptMost crawlers don't run scripts. The tags must be in the HTML the server sends.
- Blocking crawlersA firewall, a login wall or robots rules that block facebookexternalhit, Twitterbot or LinkedInBot leave the card empty.
What is Open Graph?
A set of meta tags (og:title, og:image and others) that tells Facebook, LinkedIn, X, Slack and messengers how to show a link to your page: its title, description and picture. Facebook introduced it in 2010; today almost every app reads it.
Which Open Graph tags are required?
The protocol lists og:title, og:type, og:image and og:url. In practice add og:description too, and twitter:card for X.
Do Open Graph tags help SEO?
Not as a ranking factor in Google. They decide how your links look when shared, which affects clicks and traffic from social apps and chats.
What size should og:image be?
1200 × 630 px (1.91 : 1), PNG or JPG under 1 MB. It displays well on Facebook, X, LinkedIn, WhatsApp, Slack and iMessage.
Are Twitter cards the same as Open Graph?
They're separate tags, but X falls back to og: tags when twitter: ones are missing. Usually only twitter:card needs adding.
How do I check my Open Graph tags?
Paste the page into an OG checker: it fetches the page like a social crawler, lists the tags and shows the preview in each app.
Every page with its own og:image
getwowlink makes the image and the tags for each page of your site — and keeps them right as you publish.