How to fix missing Open Graph tags
Add og:title, og:description, og:image and og:url to every page, plus twitter:card for X. Without them, shared links render as a bare URL with no preview, which measurably reduces clicks. The image should be 1200×630 pixels and referenced with an absolute URL.
Last updated 2026-07-28
What are Open Graph tags?
They are meta tags in the <head> that tell any platform unfurling your link what title, description and image to show in the preview card. They use the property attribute rather than name, and they are read by software that never sees your CSS — so they are the only control you have over how a shared link looks.
Open Graph originated at Facebook in 2010 but the protocol long ago outgrew it. LinkedIn, Slack, WhatsApp, Discord, iMessage, Signal, Teams and X all read the same tags, as do most chat and AI interfaces that render a link preview.
Without them, the platform falls back to scraping whatever it can find — usually the page title and the first paragraph of text — or renders a bare blue URL with no card at all. Both outcomes cost clicks on every share, forever.
Which Open Graph tags are actually required?
Four: og:title, og:description, og:image and og:url. Add og:type and twitter:card and you have covered essentially every platform; everything beyond that is refinement for specific cases.
Keep og:title close to but not identical to your title tag — the social version has more room and no brand-suffix convention, so it can be a full sentence. og:description is a separate field from the meta description search engines read and should be written for someone scrolling a feed, not scanning results.
<meta property="og:type" content="website" />
<meta property="og:title" content="Audra — Website & SEO Audit App for Mac" />
<meta property="og:description" content="Whole-site audits for performance, SEO and accessibility. $19 once, no subscription." />
<meta property="og:url" content="https://audra.greta.sh/" />
<meta property="og:image" content="https://audra.greta.sh/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The Audra report screen showing an Audra Score of 92" />
<meta name="twitter:card" content="summary_large_image" />What size should the Open Graph image be?
1200 by 630 pixels, a 1.91:1 ratio. That single size renders correctly on Facebook, LinkedIn, X, Slack, Discord and iMessage without any platform cropping it awkwardly, which is why it has become the de facto standard rather than one option among several.
- 1200×630 (1.91:1) is the size to use. Facebook rejects images below 200×200 outright, and X requires at least 300×157 for the large card.
- Always reference it with an absolute URL including the protocol. Relative paths silently fail on almost every scraper, which is the single most common Open Graph bug.
- Keep the file comfortably under 5MB — X caps images at 5MB and Facebook at 8MB, and slow-loading images time out before the card renders.
- Keep readable text in the middle 80% of the frame. Platforms crop the edges differently, and square-crop contexts will cut both sides.
- PNG or JPG only. SVG is not supported by any major scraper, and WebP support is inconsistent enough to avoid.
- Declare og:image:width and og:image:height so the platform can reserve space before the image loads, and add og:image:alt so the card is described to screen-reader users.
Why does my link preview show the wrong image or nothing at all?
Almost always caching. Platforms scrape a URL once and store the result for a long time — LinkedIn in particular holds a preview for around seven days — so a fix deployed after the first share does not appear until the cache expires or you force a re-scrape.
Every major platform provides a tool to force that refresh: Facebook's Sharing Debugger, LinkedIn's Post Inspector, and X's card validator. Paste the URL, re-scrape, and the next share picks up the new tags.
The other frequent causes are structural. A relative og:image path resolves to nothing for an external scraper. Tags injected by JavaScript are invisible, because no social scraper executes scripts — Open Graph must be in the server-rendered HTML. And an og:url that disagrees with the page's canonical URL causes some platforms to unfurl the canonical target instead, showing a different page's card entirely.
Do I still need separate Twitter Card tags?
Only one: twitter:card. X falls back to Open Graph for the title, description and image, so the sole thing it cannot infer is which card layout you want — and summary_large_image is what turns a small thumbnail into a full-width image card.
The twitter:title, twitter:description and twitter:image tags remain valid and will override their Open Graph equivalents where present, which is useful if you genuinely want different copy on X. For most sites that is maintenance for no benefit, and one extra tag is the whole job.
This matters increasingly beyond social feeds. Chat clients and AI assistants render link previews from exactly these tags, so a page with no og:image gets a plain text link in the same conversation where a competitor gets a branded card — a small difference repeated on every share.
How do I check Open Graph coverage across the site?
Crawl every URL and record which of the core tags are present on each, rather than testing the homepage in a debugger and assuming the rest match. Coverage is usually all-or-nothing because previews come from one shared template — but the pages built outside that template are exactly the ones people share most, such as campaign landing pages and blog posts using a custom layout.
Audra checks each crawled page for the presence of Open Graph and Twitter Card tags and reports the pages missing them, as part of the same pass that covers titles, descriptions and canonicals. Because it reads the rendered HTML from your own installed Chrome, it also catches the case where tags exist in the DOM but only after JavaScript runs — technically present, invisible to every scraper that matters. Reports export as self-contained HTML or PDF if you need to hand the list to whoever owns the template.
The fix, step by step
- 1Add og:title, og:description, og:url and og:image to your base template.
- 2Create a 1200×630 PNG or JPG and reference it with an absolute URL.
- 3Add og:image:width, og:image:height, og:image:alt and twitter:card="summary_large_image".
- 4Confirm the tags are in the server-rendered HTML rather than injected by JavaScript.
- 5Force a re-scrape in each platform's debugger, then re-crawl to confirm coverage across every page.
Frequently asked questions
What size should an Open Graph image be?
1200×630 pixels, a 1.91:1 ratio. That size renders correctly on Facebook, LinkedIn, X, Slack and iMessage without awkward cropping, and it clears every platform minimum.
Do Open Graph tags affect SEO?
Not directly — they are not ranking signals. They raise click-through on shared links, which drives real traffic, and they increasingly control how your page appears when a chat or AI interface previews it.
Do I need separate Twitter tags?
Only twitter:card. X falls back to Open Graph for title, description and image, so the card type is the one thing it cannot work out on its own.
Why did my preview not update after I fixed the tags?
Platforms cache the first scrape, often for days. Force a refresh with Facebook's Sharing Debugger, LinkedIn's Post Inspector or X's card validator, and check the tags are server-rendered rather than added by JavaScript.