Open Graph Tags Guide: Control How Your Links Look When Shared

When someone pastes your URL into a chat, a social feed, or a group message, the preview that pops up is not random. It is built from Open Graph tags, a small set of meta tags that live in the head of your HTML. Get them right and your link shows a clean title, a useful description, and a sharp image. Get them wrong and you get a bare URL or, worse, a stretched logo and the first stray sentence on the page.

This guide covers every Open Graph tag that matters in 2026, the exact sizes that keep images from being cropped, and the most common mistakes that quietly break your previews. When you are ready to generate the markup, the Open Graph Tag Generator → builds a correct block for you in seconds.

What Open Graph actually is

Open Graph is a protocol Facebook introduced so that any web page could describe itself in a structured way. The big messaging and social platforms adopted it, so today a single set of tags drives previews almost everywhere your link travels. Each tag uses the property attribute with an og: prefix, which is different from standard SEO meta tags that use the name attribute.

The four tags you cannot skip

Four tags do the heavy lifting. If you ship nothing else, ship these.

<meta property="og:title" content="Open Graph Tags Guide">
<meta property="og:description" content="Control how your links look when shared.">
<meta property="og:image" content="https://example.com/preview.png">
<meta property="og:url" content="https://example.com/open-graph-guide">

og:title

This is the bold headline of the preview. Keep it under 60 characters so it does not get truncated. It can differ from your HTML title tag, which is useful when you want a punchier social headline than your SEO title.

og:description

One or two sentences that tell a reader why the link is worth a tap. Aim for 110 characters or fewer so it survives on small screens. Write for a human, not for a crawler.

og:image

The single biggest driver of clicks. A link with a good image gets far more engagement than a bare one. Use an absolute URL, never a relative path, because the platform fetching your page has no idea what your domain is otherwise.

og:url

The canonical address of the page. When you have tracking parameters or several paths that resolve to the same content, this tag tells platforms which URL to treat as the real one, so all shares consolidate on it.

Image sizes that do not get cropped

The most common visual bug is an image that looks fine on your screen and gets chopped in the preview. Stick to these numbers.

Declare the dimensions explicitly so platforms can render a placeholder before the image finishes loading:

<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Diagram of Open Graph tags in a page head">

Useful extras

A few more tags sharpen the result. og:type set to article or website tells platforms what kind of content this is. og:site_name shows your brand under the title. For Twitter and X style cards, add twitter:card set to summary_large_image so your image renders full width instead of as a tiny thumbnail.

Common mistakes

Relative image paths. A path like /preview.png works in your browser but fails when an external server fetches it. Always use the full https:// URL.

Missing tags on dynamic pages. Single page apps that build content with JavaScript often serve an empty head to crawlers. Render Open Graph tags on the server or at build time so they exist in the raw HTML.

One image for the whole site. A generic logo on every page is a missed opportunity. A page specific image earns more clicks.

Forgetting the description. Without og:description the platform guesses, and its guess is usually the worst sentence on your page.

Test before you trust

Never assume a preview looks right. Paste the link into a private message to yourself first, or use a sharing debugger, and confirm the title, description, and image all render the way you expect. Previews are the first impression of your link, so it is worth thirty seconds to check.

Related reading

For the complete set of head tags beyond Open Graph, see the meta tags guide. To round out your search presence, work through the SEO audit checklist.

Bottom line

Open Graph tags are a tiny investment with an outsized payoff. Four core tags, one correctly sized image, and a quick test cover the vast majority of cases. When you want the markup written for you, the Open Graph Tag Generator → and the broader Meta Tag Generator → produce a clean block you can paste straight into your head.