The tags a link preview is built from
The Open Graph protocol (ogp.me) lists four properties every page should have:
- og:title: the title as it should appear when shared.
- og:type: what the page is, for example website or article.
- og:image: the image URL for the preview.
- og:url: the canonical URL, used as the page's permanent ID.
- og:description is optional but nearly every preview shows it. X (Twitter) also reads its own twitter:* tags, starting with twitter:card for the card layout.
og:image rules that cause most broken previews
- Use an absolute https:// address. A relative path like /img/cover.jpg is a common reason the image never shows.
- Facebook's minimum is 200 × 200 pixels; it recommends 1200 × 630 for high-resolution screens and an aspect ratio close to 1.91:1 so the image isn't cropped.
- Facebook's maximum file size is 8 MB. We stop downloading at 5 MB; an image that big slows the first share anyway.
- The address must return the image itself with an image/* content type, not a login page, a redirect to HTML or a hotlink-protection error.
- og:image:width and og:image:height let Facebook render the image before it has downloaded it.
Why the preview doesn't update after a fix
Platforms cache what they scraped the first time a link was shared. Facebook's advice is to use a new URL for a new image and run the page through its Sharing Debugger so it scrapes again. Other platforms keep their own copies too.
The preview here is fetched fresh each time (results are kept for 5 minutes) and is only an approximation: each platform crops and truncates in its own way.