Open Graph Generator

How to use Open Graph Generator

1. Enter the title, description, absolute image URL and page URL.
2. Copy the block into your head, server-rendered rather than injected.
3. Run the platform debuggers to force a re-scrape and confirm the preview.
4. og:image must be an absolute URL — the commonest cause of a blank preview.
5. 1200×630 is the standard size; keep important text away from the edges.
6. Add twitter:card=summary_large_image or X shows the small square card.

The image is what people actually see

In a feed the card image occupies far more space than the text, and it is what decides whether anyone stops. 1200×630 is the standard, a 1.91:1 ratio, and it must be an absolute URL — relative paths are the single most common reason a preview shows nothing. Keep it under about 5 MB, use PNG or JPEG, and remember platforms crop differently: keep text away from the edges, and do not rely on small text surviving the thumbnail.

Open Graph covers nearly everything, with one addition

Facebook created Open Graph, and LinkedIn, WhatsApp, Slack, Discord, Pinterest and most messaging apps read the same tags — so og:title, og:description, og:image, og:url and og:type cover the majority of sharing. Twitter/X reads Open Graph as a fallback but prefers its own, so adding twitter:card with summary_large_image is the one extra tag worth having. Without it you get the small square card rather than the wide one.

Caching is why your fix does not show

Platforms cache scraped previews aggressively, often for days, so correcting a tag does not change an existing preview. Each has a debugger that re-scrapes on demand: Facebook’s Sharing Debugger, LinkedIn’s Post Inspector, and Twitter’s card validator. Run them after any change. If a link has already circulated with a broken preview, that preview is what people will keep seeing until the cache expires — which is an argument for testing before launch rather than after.

Tags must be in the raw HTML

Scrapers fetch the page and read the markup; most do not execute JavaScript. So tags injected client-side by a single-page app are invisible to them, which is why a React or Vue site can look perfect in a browser and produce an empty preview everywhere. They must be server-rendered or pre-rendered into the HTML that the scraper receives. View source rather than the inspector to check — the inspector shows the tags after JavaScript has run.