More topics

Open Graph

In brief

Markup for preview cards in WhatsApp, LinkedIn, Slack and social networks. Makes shared links look more polished and more clickable.

Open Graph is a standard introduced by Facebook and now adopted by practically every platform. It lets websites control how they appear as a preview card when someone shares the link.

Which tags you need

Required: og:title as the title of the preview card, og:description as the description text, og:image as the large preview image, og:url as the canonical address, og:type, usually website or article. Recommended: og:locale for the language, og:site_name for the brand name, og:image:width and og:image:height for correct rendering.

The right image size

1200 by 630 pixels, a ratio of 1.91 to 1. That is Facebook’s sweet spot, and all other platforms take their cue from it. Use WebP or JPEG, under 1 MB. Keep important image content in the middle half, because some platforms crop the edges.

Twitter Card as a supplement

X, formerly Twitter, uses some tags of its own, prefixed with twitter. The key ones are twitter:card with the value summary_large_image, twitter:title, twitter:description and twitter:image. If these tags are missing, X falls back to Open Graph. Best practice is to set both, because X then reliably uses the summary_large_image layout.

Validation

Once you have changed OG tags, you need to get the platforms to crawl the preview again. Facebook offers the Sharing Debugger at developers.facebook.com/tools/debug, and LinkedIn has the Post Inspector at linkedin.com/post-inspector. X offers a Card Validator. Platforms cache preview images for up to 30 days, so always refresh them manually after an update.

Related terms

Title tag · Meta description · Schema.org

Want to improve your website?

We analyse your site and tell you honestly what is worth fixing. The initial consultation is free.

Free initial consultation