Open Graph and social previews

Open Graph tags are specific pieces of code in a page’s header that tell social media platforms which image, title and description to display when a link to that page is shared, rather than leaving the platform to guess from the page’s regular content.

Why Open Graph tags matter beyond appearance

A shared link with no Open Graph image, or one pointing at a broken or oddly cropped image, produces a blank, generic or unflattering preview wherever it is shared — which is the first thing anyone sees before deciding whether to click through at all. Getting this right is a specific, checkable piece of a page’s setup, separate from how the page itself is designed to look when actually visited.

What the tags actually control

The Open Graph protocol defines a set of meta property="og:..." tags for the shared title, a description, and an image with recommended dimensions, along with the page’s canonical address. A video property also exists for pages built around a video, which some social platforms will use to offer an inline preview rather than a static image. Setting these deliberately, rather than leaving a platform to infer them, is how a business controls what its own content looks like the moment someone else shares it.

What tends to go wrong with Open Graph tags

A generic image used across every page (or none set at all, defaulting to a small logo awkwardly cropped by the sharing platform), and an Open Graph description that is stale or missing entirely, are the two most common gaps — both are a content and configuration task rather than a visual design one, and both are worth checking directly by sharing a real page link and looking at the preview it produces.

What to do next

For where setting up social preview tags fits into a site’s content and copy work, website copywriting covers the scope this typically sits inside.