Open Graph preview
Paste the <head> of a page (right-click, View source, copy the head) and see the two card shapes most apps use when someone shares the link: a large image card and a compact card. The tool reads Open Graph tags first and falls back to X tags, the title tag and the meta description, the same order most apps use.
Large image card
Compact card (chat apps, feeds)
- Title, description and image are all set. Apps cache previews, so a changed image can take time to appear.
Which tags apps actually read
og:titleandog:description, falling back to<title>andmeta descriptionwhen missing.og:image, ideally 1200 x 630 px as an absolute https URL. Without it, some apps pick a random image from the page and others show text only.og:urlfor the canonical address, andog:site_namefor the small label.twitter:cardwith the valuesummary_large_imageto get the large layout on X.
The previews here are generic layouts, so exact cropping differs per app. What they show reliably is whether the tags exist and whether your title and image make sense together.
Common reasons a card looks wrong
- The image URL is relative (
/og.jpg). Apps fetch it from their own servers, so it must be absolute. - The image is too small or the wrong ratio, so it is shown as a thumbnail or cropped badly.
- Two plugins print competing tags, and the app picks the first one.
- The app cached an old version. Most platforms keep a preview for a while; some offer a debugger that refreshes it.
Common questions
Do Open Graph tags affect Google rankings?
No. They control how links look when shared on social platforms and chat apps. Google Search uses the title tag and page content instead.
Why does my card show an old image?
The platform cached the first version it saw. Wait, or use that platform's own sharing debugger to force a refresh.
What size should og:image be?
1200 x 630 pixels at a 1.91:1 ratio works across nearly every app. Keep text and faces in the middle in case of a square crop.