Open Graph Metadata Explained for Better Link Previews

The four essential values

The Open Graph protocol also requires og:type, commonly website for a general page or article for an article. Use absolute HTTPS URLs for images on a public site. A preview may be cropped or formatted differently across platforms, so treat any local mockup as an approximation.

• og:title names the page in a way that makes sense outside your site.
• og:description explains what a click will lead to.
• og:image points to an image that can be fetched publicly.
• og:url identifies the preferred public URL for the object.

A workable example

The image must actually exist and be accessible to a crawler. Metadata cannot fix a page that returns an error, blocks access, or points to a private image. When a platform still shows an old preview, check its cache or sharing debugger after confirming the source HTML has changed.

<meta property="og:title" content="Color contrast explained" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/guides/contrast" />
<meta property="og:image" content="https://example.com/contrast-cover.jpg" />

Preview before publishing

Draft a short title and description, test the image crop, and compare the preview to the destination page. If you use a tool that only accepts manual values, verify the live HTML separately; the manual preview does not fetch or audit a URL.