Open Graph preview

See how a link looks when you share it on X, LinkedIn, Slack and Discord.

Questions

What are Open Graph tags?

Meta tags in the head of a page, like og:title, og:description, og:image and og:url. Chat apps and social networks read them to build the preview card when someone shares the link. X also reads twitter: tags and uses the og: tags when they are missing.

Why does my link still show the old preview?

Platforms cache a preview after the first time someone shares a link. LinkedIn has a Post Inspector that fetches the page again. The others update when their cache expires.

What size should the og:image be?

1200x630 pixels is the common size. It has the 1.91:1 shape of the large cards on X and LinkedIn, so nothing gets cropped. Keep the file under 5 MB.

Why does my image not show up?

Check that og:image is a full URL that starts with https://, that the image loads without signing in, and that the server sends it with an image content type. The checks above test the last two.

Are the links I check saved?

No. The page and its image are fetched when you press Preview, and nothing is stored.

How it works

The page at the link is fetched from our server, the same way a chat app or social network does when someone pastes a link. It reads the og: and twitter: tags, falls back to the page title and description like the platforms do, and checks that the image loads.

The previews are close to what each platform shows, but each one can change its layout or cache an older version of the page.

Company of Craft also builds stateofpixel, which catches UI regressions before they merge.