Open Graph Preview — Check social share cards
Open Graph tags decide how your page looks every time it is shared — a missing image or title costs you clicks and shares. Paste your og:/twitter:card tags or a URL to preview the Facebook, X and WhatsApp-style share card, spot missing fields and fix image ratios. Steps: paste tags or fetch a URL, read the three preview cards and the field table, then fix what is missing. Paste mode runs on your device; URL mode fetches the page once and does not store it. Example: a page with a 1200×630 og:image shared as a large card.
How it works
The preview parses the og:/twitter: tags you paste (or extracts them from the HTML fetched for a URL) and renders three share cards. Facebook uses the 1.91:1 image on the left with title, description and domain below. X follows twitter:card: summary_large_image shows a big image on top, summary shows a small one beside the text. Messaging apps such as WhatsApp show one large card. A field table marks og:title, og:description and og:image as required and lists optional fields.
Rules used by the preview
These are the image sizes and fallbacks the platforms use, based on the Open Graph protocol and the X Cards docs.
- Required fields: og:title, og:description and og:image. Missing ones are marked so you can fix them before publishing.
- og:image at 1200×630 px (1.91:1) works on all major platforms. Facebook now also accepts 2:1 and 1:1 crops; smaller images are often compressed.
- twitter:card summary_large_image pairs with a large image; summary pairs with a smaller one. Without twitter:card, platforms infer a summary card from the og: tags.
- When og:title or og:image is missing, platforms fall back to the HTML title, meta description and the first image of the page.
- Image sizes are measured with a browser image load; if the image cannot be loaded (blocked, offline or wrong URL) the ratio check reports unknown.
Example
The sample tags describe a blog post with a 1200×630 og:image and twitter:card summary_large_image. The preview shows a Facebook card with the image on the left, a large X card, a WhatsApp-style card, and a tag table where every required field is present.
Good use cases
- Before publishing a post or landing page, paste the tags once and confirm the share card looks right on Facebook, X and messaging apps.
- When a shared link shows no image or a cropped one, paste the og: tags to check whether og:image is missing or has a wrong ratio.
- After a CMS or theme update, fetch the live URL and verify that the og: tags still match the page.
Frequently asked questions
What happens if a page has no Open Graph tags?
Facebook, X and WhatsApp build the preview from the HTML title, meta description and the first image of the page. The card can be incomplete or show the wrong image, which is why the required og: fields exist.
How large should og:image be?
The safe size is 1200×630 px, a 1.91:1 ratio that all major platforms accept. Facebook now also supports 2:1 and 1:1 crops. Very small images are often upscaled and look blurry.
How does twitter:card relate to the og: tags?
twitter:card selects the layout: summary_large_image shows a wide image, summary shows a small one. When twitter:title, twitter:description or twitter:image are missing, X falls back to the corresponding og: tag.
What does a platform do when og:image is missing?
It falls back to the first image found in the page HTML, or shows the card without an image. A missing og:image is the most common cause of a shared link without a preview picture.
Why does the ratio check report “unknown”?
The preview tries to load og:image with a browser image load to read its real size. When the image is blocked, offline, slow or on a server that rejects the request, the size cannot be read and the check reports unknown.
Are my tags uploaded anywhere?
No. In paste mode the parsing and preview run on your device. URL mode fetches the page once through our worker and does not store it.
Questions or feedback
Something unclear, broken, or missing? Draft a message below — we read every note about these tools.