What are Open Graph tags?
Open Graph (OG) tags are HTML meta tags that control how your page looks when it is shared on social platforms such as Facebook, LinkedIn and X (Twitter). They define the title, description, image and source URL shown in the preview.
What does this tool actually do?
OG Preview shows you a live preview of how a page will look on Facebook, X (Twitter) and LinkedIn. There are two modes:
- Manual Input (default): type a URL/domain, title, description and image URL. The three previews update instantly as you type.
- Fetch URL (Beta): paste a public page URL and the tool tries to read its existing OG/Twitter tags through a public CORS proxy, then renders the previews plus a table of the tags it found and which essential ones are missing.
Everything runs in your browser. The tool does not generate a downloadable code file, does not host or resize images, and does not save anything on a server.
Do I need OG tags for every page?
Ideally yes — each page should have its own title, description and image so that every shared link looks relevant instead of falling back to a generic site preview.
What is the difference between OG tags and Twitter Cards?
OG tags are the shared standard used by Facebook, LinkedIn and others. Twitter Cards are X/Twitter-specific twitter: tags. If you don't set Twitter tags, X generally falls back to your OG tags, so many sites set both.
What image size should I use?
1200×630px (a 1.91:1 ratio) is the safe default across all three platforms. Use an absolute https:// URL for the image — relative paths are not resolved by social crawlers.
What are the exact image requirements per platform?
They overlap, but the edges differ:
- Facebook & LinkedIn: 1200×630px, 1.91:1. Minimum 200×200; below that the image is dropped. Keep the file under 8 MB. JPG, PNG, WebP or GIF.
- X (Twitter), large card:
summary_large_imagewants ~1200×628, 1.91:1. Up to 5 MB for JPG/PNG/WebP, 15 MB for GIF. Minimum 300×157. - X, small card:
summaryshows a square thumbnail (minimum 144×144, up to 4096×4096).
One 1200×630 JPG under ~1 MB satisfies all of them, which is why it is the standard.
Should I set og:image:width and og:image:height?
Yes, when you can. They let a platform lay out the preview before it has downloaded the image, which avoids the common "first share shows no image, later shares do" problem. Set them to the real pixel dimensions of the file.
Why is my image cropped or showing the wrong part?
Large cards crop to 1.91:1. If your image is square or portrait, the platform cuts the top and bottom. Design the image at 1200×630 and keep logos and text away from the edges — a safe zone of about 60px on each side survives every crop.
My link shows no preview at all. What do I check?
Work down this list, in order:
- The tags sit inside
<head>, not in the body. og:imageis an absolutehttps://URL, and the image loads in a browser without a login.- The image is above the minimum size and under the file-size cap.
- The page returns HTTP 200 to a bot (no cookie wall, no redirect loop).
robots.txtdoes not block the crawler, and there is noog-blocking meta.- You have re-scraped the URL in the platform's debugger after the last change.
How long do platforms cache a preview, and how do I refresh it?
Facebook keeps a scrape for up to 30 days; paste the URL into the Sharing Debugger and hit "Scrape Again" to update it immediately. LinkedIn caches for about 7 days and clears when you run the URL through the Post Inspector. Telegram caches per URL — message @WebpageBot with the link to refresh it. X no longer offers a public validator; it re-reads tags on new posts, so appending a harmless query string (?v=2) forces a fresh fetch.
How do WhatsApp, Slack, Discord and Telegram handle previews?
All four read Open Graph tags, with quirks. WhatsApp shows a small inline thumbnail and often skips images over ~300 KB, so keep a light version. Slack reads OG and also honours oEmbed if you provide it. Discord renders og:image and additionally supports og:video for inline players. Telegram uses OG but through its own aggressive cache (see the refresh answer above).
Do Open Graph tags help my Google ranking?
No. Google builds its search snippet from the page title, meta description and structured data — it ignores og: tags for ranking. Open Graph only controls how the link looks when a human shares it on social platforms. The two jobs are separate, so set both, but don't expect OG tags to move you up in search.
Can I use a different image for X than for Facebook?
Yes. Set og:image for Facebook/LinkedIn and twitter:image for X. If twitter:image is absent, X falls back to og:image, so you only need the Twitter tag when you genuinely want a different picture there.
How do I give every page its own preview image at scale?
Generate the image dynamically instead of hand-making hundreds. Libraries like Vercel's @vercel/og or a serverless function render a per-page PNG from a template (title, author, a background) at request time. You then point og:image at that endpoint. It keeps every share on-brand without a manual design step per page.
Why isn't my preview updating on the real platform?
Social platforms cache previews aggressively. After you change your tags, use the official debuggers to force a refresh: Facebook Sharing Debugger and LinkedIn Post Inspector. For X, post a fresh link or add a query parameter, since its public Card Validator has been retired.
Does the tool store my data?
No. All processing happens locally in your browser. In Fetch URL mode the request passes through a third-party CORS proxy to retrieve the page, but this tool does not store the content.
Why does Fetch URL sometimes fail?
It depends on public CORS proxies, and many sites block them or don't return usable HTML. That's why it is labelled Beta — if it fails, switch to Manual Input.