Open Graph and social preview

What Open Graph tags actually do

When someone shares your link on Facebook, LinkedIn, WhatsApp, Slack or a dozen other places, those platforms do not read your whole page. They look for a handful of special tags in the HTML, the Open Graph tags, and build a preview card from them: a title, a short description, and most importantly a picture. Get them right and your link arrives as a rich, clickable card. Get them wrong and it turns up as a bare blue URL that almost nobody clicks.

This tool fetches your page, reads those tags, and shows you the card that would be generated, image and all. It also lists which of the important tags, og:title, og:description and og:image, are present or missing, and whether you have set a Twitter card for a large preview on X. It is the check to run before you promote any page.

The tags that matter, in order

og:image is the big one. It is the picture on the card, and it is what stops the scroll. Aim for a landscape image around 1200 by 630 pixels. Without it, the whole card looks broken. og:title is the headline, and it can differ from your SEO title if a punchier line works better for social. og:description is the summary underneath. og:url and og:site_name tidy up the details.

For X, add twitter:card set to summary_large_image so your post gets the big picture treatment rather than a small thumbnail. Most platforms fall back to Open Graph if the Twitter-specific tags are missing, so Open Graph is the priority, but the one extra line is worth adding.

A common gotcha with images

The single most frequent problem is a relative image path. If your og:image points to /images/share.jpg rather than the full https address, some platforms cannot find it and the card shows no picture. This tool resolves the path against your page so you can see whether the image actually loads. If it comes up blank here, it will come up blank when shared, and the fix is to use the complete web address in the tag.