How to fix link previews: Open Graph tags explained

You share a link to your page and the preview shows a random image, a cookie banner, or no picture at all. Or you fixed the image last week and the old one still appears. Link previews are controlled by a handful of tags in the page's HTML, and by caches that are worth understanding.

How previews are made

When a link is shared, the platform's crawler downloads the page and reads its Open Graph tags. If they are missing, it guesses from the page title and whatever images it finds — which is where odd previews come from.

The tags that matter

• og:title — the headline of the preview.
• og:description — one or two sentences under it.
• og:image — the picture, as a full address starting with https://.
• og:url — the canonical address of the page.
• twitter:card — for X, set to summary_large_image for a large picture. X falls back to the Open Graph title, description and image when its own tags are missing.

Every page that will be shared should have its own title, description and image.

The image

• Size: 1200 × 630 pixels, a 1.91:1 shape, works well across Facebook, LinkedIn and X's large card.
• Minimum: images below 200 × 200 pixels are not accepted by Facebook at all.
• Safe area: some layouts crop the edges, so keep text and logos away from them.
• Format and weight: JPG or PNG are safest. Keep the file reasonably small so crawlers fetch it quickly; Compress Image helps.

If your preview image is a logo or graphic drawn as SVG, render it to PNG first with SVG to PNG; many platforms do not accept SVG previews.

Check a page's preview

1. Enter the page address in the Open Graph Preview.
2. See how the link would look when shared, and read the list of tags found.
3. Work through the flagged problems: missing tags, http image addresses, images that are too small, overlong titles.

The page is fetched by this site's server — a browser is not allowed to read another site's HTML — as a logged-out visitor, which is how platform crawlers see it too. Only public addresses are accepted. To write tags from scratch, switch to the tag-writing mode and copy the result into your page's head.

Why the old preview keeps appearing

Platforms cache previews, sometimes for days. After fixing your tags, ask each platform to fetch the page again: Facebook's Sharing Debugger and LinkedIn's Post Inspector both have a button for it. Changing the image's file name also helps, because a cached image address will not be fetched again.

A complete set of tags

A typical page head contains lines like these, with your own values:

• <meta property="og:title" content="Spring sale: 20% off everything">
• <meta property="og:description" content="Our biggest sale of the year, until 30 April.">
• <meta property="og:image" content="https://example.com/share/spring-sale.jpg">
• <meta property="og:url" content="https://example.com/sale">
• <meta name="twitter:card" content="summary_large_image">

Most content management systems and website builders have fields for these, often under SEO or social sharing settings, so you may not need to edit HTML at all.

Sites built with JavaScript

Most preview crawlers read the HTML the server sends and do not run JavaScript. If your site adds its tags in the browser after loading, crawlers may never see them. The tags need to be in the HTML as delivered — through server-side rendering, static generation or your platform's settings.

Common mistakes

• Relative image paths such as /images/share.png instead of a full https:// address.
• The same generic title and image on every page.
• An image behind a login, or blocked to crawlers.
• Pages that need a login: previews always show what a logged-out visitor sees.