You paste a link into Slack, LinkedIn or a Facebook post and get a bare URL, the wrong image, or last month's title. The page looks fine in a browser, so what's going on?
Link previews are built from Open Graph tags that a crawler reads from your page's HTML. When the preview is wrong, the cause is almost always one of a handful of things: the tags are missing or malformed, the crawler can't reach the page or the image, the image doesn't meet the platform's requirements, or the platform is showing a cached copy. Here's how to check each one.
How link previews work
When someone shares a URL, the platform sends its own crawler to fetch the page. The crawler looks for <meta property="og:…"> tags in the <head>, downloads the image named in og:image, and builds a card from them. The result is stored, so later shares of the same URL usually reuse it.
The Open Graph protocol requires four properties:
<meta property="og:title" content="How Loan Amortization Works">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/loan-amortization">
<meta property="og:image" content="https://example.com/media/loan-amortization-1200.jpg">In practice you should also add og:description, og:site_name and the image details covered below. Our Open Graph Generator builds the full set and warns about the most common mistakes, like a relative URL or a missing alt text.
The right image size
Use 1200 × 630 pixels, an aspect ratio of about 1.91:1. That size works across the major platforms:
- Facebook recommends "at least 1200 x 630 pixels," an aspect ratio as close to 1.91:1 as possible, and a file no larger than 8 MB. Images under 600 × 315 get a small thumbnail instead of a large card, and the absolute minimum is 200 × 200 (Facebook's image guidelines).
- LinkedIn asks for at least 1200 × 627 pixels, a 1.91:1 ratio and a maximum of 5 MB (LinkedIn Help).
- X large image cards use a 2:1 image, at least 300 × 157 pixels and under 5 MB. A 1200 × 630 image displays fine there, with a sliver cropped from the top and bottom.
Keep the important part of the image away from the edges, since every platform crops a little differently. Use JPG, PNG or WebP. Many apps don't render SVG previews, and very large files can time out before the crawler finishes downloading them.
Add width, height and alt text
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Chart of a loan balance falling over 30 years">Facebook notes that without the dimensions, the first person to share a new URL may see no image, because the crawler has to download and process it before it can render a card. Providing width and height lets it lay out the card right away. The Open Graph spec says pages with an og:image should also specify og:image:alt, a description of the image for screen reader users.
Why the preview is missing or wrong: a checklist
1. The image URL is relative
<meta property="og:image" content="/images/cover.jpg"> doesn't work. The crawler only sees the tag, not your site's address, so og:image and og:url need full URLs starting with https://.
2. The tags are added by JavaScript
Many preview crawlers read only the HTML your server sends and don't run JavaScript. If your framework injects meta tags in the browser, the crawler never sees them. Check the raw HTML the server returns:
curl -s -A "facebookexternalhit/1.1" https://example.com/page | grep -i 'og:'If nothing comes back, render the tags on the server.
3. The crawler is blocked
The page or the image may be returning an error to crawlers even though it works in your browser. Common causes:
- robots.txt rules that block the platform's crawler or the folder your images are in. (robots.txt controls fetching, as explained in robots.txt vs noindex.)
- Bot protection or a firewall that shows crawlers a challenge page
- Pages or images behind a login, or hotlink protection on the image folder
Our HTTP Headers Viewer fetches a URL from the outside and can send a Googlebot or other browser identity. Run both the page URL and the image URL through it. You want a 200 status, and for the image a Content-Type like image/jpeg or image/webp, not text/html.
4. Redirects get in the way
If the image URL redirects, especially through several hops or to a login page, some crawlers give up. Point og:image straight at the final file. Make sure og:url is the page's clean canonical address: Facebook asks for "the undecorated URL, without session variables, user identifying parameters, or counters."
5. The image is too small or too big
An image under 600 × 315 shows as a small thumbnail on Facebook, and one over a platform's file limit may be skipped. Check the actual file, not just what the tags claim.
6. Several og:image tags compete
Plugins and themes sometimes each add their own tags. The Open Graph spec says that when there are conflicts, "the first tag (from top to bottom) is given preference," so a generic site logo higher up in the head can win over your article image. View the page source and make sure there's one set of tags.
7. You're looking at a cached preview
Platforms store previews. If you fixed the tags but the old preview still shows, the platform hasn't fetched the page again. Facebook says images "are cached based on the URL and won't be updated unless the URL changes."
Refreshing a cached preview
- Facebook: enter the URL in the Sharing Debugger and click to scrape again. It also shows which tags Facebook found and any warnings.
- LinkedIn: enter the URL in the Post Inspector, which fetches the page again and shows the preview.
- Everywhere else: when you replace an image, give it a new file name or URL, as Facebook recommends. Because image caches are keyed by URL, a new URL is fetched fresh. Keep the old image online too, because posts that were already shared may still point to it.
Refreshing doesn't change previews in posts that were already published. Those keep the card they were created with.
A complete, working set of tags
<meta property="og:type" content="article">
<meta property="og:site_name" content="Example">
<meta property="og:title" content="How Loan Amortization Works">
<meta property="og:description" content="Why early payments are mostly interest, and what extra payments really save.">
<meta property="og:url" content="https://example.com/blog/loan-amortization">
<meta property="og:image" content="https://example.com/media/loan-amortization-1200.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Chart of a loan balance falling over 30 years">
<meta name="twitter:card" content="summary_large_image">The last line tells X to use the large image layout. X reads its own twitter: tags first and uses the Open Graph title, description and image when they're missing, so you don't need to duplicate everything. The X Card Generator previews both card layouts if you want to fine-tune them.
FAQ
Why does my link show the right image on one platform but not another?
Each platform has its own crawler, size rules and cache. Usually one of them is blocked, is holding an old cached copy, or rejects the image size. Run the URL through that platform's own inspector.
Does the Open Graph image affect SEO?
Not directly. It affects how your link looks when shared, which can affect how many people click.
Can I use a different image for each page?
Yes, and you should for articles and products. Use a site-wide default image only for pages that don't have their own.
How do I change the preview for a post that's already shared?
You can't change existing posts on most platforms. Refresh the cache with the platform's inspector so that new shares pick up the change.
