Open Graph tags: the 7 you actually need

Every time I audit a site for a friend, the link preview is broken. Sometimes it is fully blank. Sometimes the image is the favicon stretched to 1200x630 and pixelated. Sometimes the title is whatever React put in document.title at SSR time, which is just "My App".

The fix takes maybe ten minutes. Here is the actual minimum. Skip the rest of the spec, you do not need it.

1. og:title

Under 60 characters. Slack truncates around there, X clips a bit later. Write it like a headline, not a sentence. "Vibestat — free SEO audit" beats "Welcome to my new website where you can audit things."

2. og:description

120 to 180 characters. This is the bit under the title in the preview card. It is also what the AI search engines tend to quote, so write it like a tweet you would not be embarrassed by.

3. og:image

1200 by 630 pixels. PNG or JPG. Under about 1 MB or some platforms quietly skip it. Put your product name on the image itself in big text, because in iMessage and tiny Slack previews the text label disappears and only the image survives.

If you generate it dynamically (Vercel og image, satori, anything similar), set a real cache header. We had a stretch where ours was returning a zero-byte body cached for a year. The link looked fine in localhost and broken everywhere else. Took me an hour to spot.

4. og:url

The canonical URL of the page. Same thing as your <link rel="canonical">. Without this, two URLs that share OG tags will be treated as duplicates by some scrapers and as separate cards by others.

5. og:type

Almost always "website" for marketing pages and "article" for blog posts. The difference is small but real: setting type=article unlocks article:published_time and friends, which some readers (NetNewsWire, Feedly, certain Mastodon instances) actually use.

6. twitter:card

Set this to "summary_large_image". If you skip it, X collapses your link to a tiny square thumbnail next to the title and your beautifully designed og:image becomes 60 pixels tall. Yes, X will read your og:image; you do not need to also set twitter:image unless you want a different one.

7. og:site_name

Your brand. Shows up as a small label above or below the title in some clients. Easy to forget, takes one line, helps people remember where the link came from.

What I left out and why

• og:locale — useful for multi-language sites; if you have one language, do not bother
• fb:app_id — only matters if you have a Facebook app and want analytics in their console; you do not
• twitter:site / twitter:creator — handles for X; nice to have but not required for the card to render
• All the article:* tags — set them on blog posts only if you want them to show up in feed readers

How to test it

Three free tools, in order of how strict they are. Run all three; if all three render, you are done.

1. OpenGraph.xyz — closest to what most chat apps actually show
2. X (Twitter) Card Validator — the only one that tells you if X will render the big image
3. LinkedIn Post Inspector — also useful for forcing a re-scrape after a fix

Or paste your URL into vibestat.app/audit. We check all of these in the social section and tell you exactly which ones are missing or wrong.

Two gotchas worth knowing

First: most platforms cache your OG card aggressively, sometimes for a week. After you fix the tags you may need to manually re-scrape (LinkedIn and Facebook both have buttons for this) or wait. Slack and Discord cache for a few hours. iMessage caches per-thread, basically forever, which is why your friend keeps seeing the broken preview from last month.

Second: if your site requires JavaScript to render the OG tags, you are gambling. Most scrapers do not run JS. Render them server-side, in the initial HTML. In Next.js this is automatic via metadata; in plain React you need to think about it.