Open Graph Generator
Fill in the form, watch the link preview update as you type, and copy the finished
og: tag block. This is the markup that decides whether a shared link
shows a rich image card or a bare grey URL on Facebook, LinkedIn, WhatsApp and Slack.
Must be an absolute https URL. 1200×630 is the safe size.
Live link preview
example.com
Your page title appears here
Your description appears here. Facebook shows roughly two lines before it truncates with an ellipsis.
An approximation. Facebook, LinkedIn and WhatsApp each crop and truncate slightly differently — but a card that looks right here looks right everywhere.
Your Open Graph block
What this tool does
Open Graph tags are a separate set of meta tags from the ones Google reads. They tell Facebook, LinkedIn, WhatsApp, Slack, Discord and X what to draw when someone pastes your URL — the headline, the one-line summary, the image, and the site name above it. Without them a platform guesses from your page, which usually means no image and a headline pulled from whatever text it finds first.
This generator assembles the block and previews it as you type, entirely in your browser. Two honest limitations: the preview is an approximation rather than a pixel-accurate render of any one platform, and the tool cannot clear a platform's cache for you. If you change your tags after a link has already been shared, the old preview will persist until you ask the platform to re-scrape the URL.
How to use it
- Write
og:titleas the headline you want on the card. It can differ from your SEO title — social copy can afford to be more direct. - Write
og:description. Facebook shows about two lines, so front-load the value in the first 100 characters. - Paste an absolute
httpsimage URL. Relative paths silently fail on every platform. 1200×630 is the size that fills the large card layout without cropping. - Pick the
og:typethat matches the page —articlefor blog posts,productfor a product page,websitefor everything else. - Click Generate OG Tags, copy the block, and paste it into your page head — then re-scrape the URL if it has been shared before.
Common use cases
-
Launching a product page
Make sure the first time your link is shared in a group chat it shows the product shot, not a grey placeholder.
-
Blog posts that get shared
Set
og:typetoarticleand give each post its own image so shares do not all look identical. -
Fixing a broken preview
When a client says "our link looks broken on LinkedIn", reproduce the correct block here and diff it against the live page source.
-
WhatsApp and Slack shares
Both read Open Graph. A tight title and a square-ish crop make links sent in chat look intentional rather than accidental.
Frequently asked questions
What is the difference between Open Graph tags and regular meta tags?
Regular meta tags describe your page to search engines, which render a text snippet. Open Graph tags describe it to social
platforms, which render a card with an image. The two are read by different systems, so a page can rank well in Google and
still produce a blank, image-less preview on Facebook if the og: tags are missing.
Fill in both.
Why is my Open Graph image not showing up?
The three usual causes are a relative image URL, an image smaller than 200×200 pixels, and a cached scrape.
og:image must be an absolute https URL, ideally
1200×630 and under 5MB. If the tag was added after the link was first shared, force a re-scrape with Facebook's Sharing
Debugger or LinkedIn's Post Inspector — until then the platform keeps serving the preview it cached.
How large should an og:image be?
1200×630 pixels is the safe default. That is a 1.91:1 ratio which fills the Facebook, LinkedIn and WhatsApp card layouts without cropping, and stays sharp in the large-image layout. Anything under 600×315 usually falls back to a small thumbnail beside the text, which is a noticeably weaker share.