Why Your Website Link Looks Ugly on WhatsApp or Facebook (and How to Fix the OG Image)

If your link shows up with no image (or a weird title) on WhatsApp or Facebook, the cause is almost always on the website: the og:image tag is missing, points to an image the app can't load or that's too heavy, or the app is still showing an old cached copy. Fix the tag and the image, check the page in Meta's Sharing Debugger, then resend the link on WhatsApp with ?v=2 added to the end to force a fresh read.

It's a familiar scene: you send your website link to a client, hit send, and... an empty rectangle appears, no image, a strange title, or the raw web address stretched across it. You didn't do anything wrong when sending it. That preview (the image, title and description) is built from hidden tags in the page's code called Open Graph. When they're missing or set up wrong, the app guesses, and it often guesses badly. The good news: it's fixable, and usually not complicated.

The short answer: 6 checks, in order

• Does the page have an og:image tag? View the page source (right-click, then "View page source") and search for "og:image". If it isn't there, no app knows which picture to show.
• Is the image address complete and on https://? A relative path like /img/photo.jpg, or an image served over plain http, won't work.
• Does the image open on its own in a private browser window? If it asks for a login or returns an error, WhatsApp's and Facebook's crawlers can't see it either.
• Is the image the right format? JPEG or PNG, around 1200x630 px, and light: around 300 KB for WhatsApp.
• Does Meta's Sharing Debugger see the right image? It's the best free diagnostic for Facebook.
• Does the link show a preview on WhatsApp with ?v=2 at the end? If it does, your page is fine and the problem was the cache.

What the OG image actually is (and who reads it)

OG stands for Open Graph, a protocol created by Facebook and adopted by almost every app that shows link previews: WhatsApp, Facebook, LinkedIn, Telegram, Slack, iMessage. When someone pastes your link, the app downloads the page and reads these tags from the head section of the code:

• og:title: the title shown in the preview
• og:description: the line of text under the title
• og:image: the big picture
• og:url: the page's official address
• og:image:width and og:image:height: the image dimensions, which Meta recommends adding so the image shows up the first time the link is shared

Two technical details trip up a lot of sites. First, the tags have to be in the HTML the server sends: preview crawlers don't run JavaScript, so a tag added later by a script (common on React or Vue sites without server-side rendering) is invisible to them. Second, the standard form uses the property attribute (property="og:image"): many crawlers tolerate name="og:image", but not all of them do.

If the tags are missing, the app improvises: it grabs the page title, maybe a tiny image it happens to find, maybe none at all. That's where the empty or odd-looking cards come from.

Why the image doesn't show: the usual causes

In our experience, nearly every case comes down to one of these:

• No og:image tag at all. The site never says which picture to show, so nothing appears.
• A relative or http address. It needs a full address starting with https://. The crawler isn't on your site, so it has no idea where /img/photo.jpg lives.
• The image is too small. Facebook won't use images under 200x200 px, and below 600x315 px it shows them small.
• The file is too heavy. WhatsApp doesn't publish an official limit, but testing guides recommend staying around 300 KB; above that, the preview can silently fail with no error message.
• A poorly supported format. JPEG and PNG work everywhere; WebP, SVG and AVIF don't display reliably in every preview.
• The page or image is off-limits to crawlers. A login wall, a password-protected staging site, bot protection or a firewall that blocks preview crawlers, or an overly broad rule in your robots.txt file.
• Tags injected by JavaScript instead of being in the initial HTML.
• Duplicate or outdated tags. Two SEO plugins each writing their own og:image, an address that still points to an old domain or the staging site, or one that points to an image file you've since renamed, moved or deleted.

Often it's a single cause. Find it, fix it, then deal with the cache.

The right preview image: size, weight, format

For the content itself: your logo or a clear visual, very little text in a large font, and nothing important right at the edges, because depending on the app and the screen the image may show up as a small thumbnail. The same 1200x630 px image works for LinkedIn, which asks for at least 1200x627 px and a maximum of 5 MB, according to its official help page.

WhatsApp: why the preview won't update

This is the one that drives people up the wall: you fix the site, resend the link, and the preview is still the old one, or still blank. Here's what's going on:

• The preview is created when the message is sent, by the sender's device, and attached to the message. Messages already sent keep their old preview; only new sends get the fix.
• WhatsApp caches previews and offers no official tool to clear them.
• Facebook's Sharing Debugger isn't enough for WhatsApp. It refreshes Facebook's cache, but WhatsApp doesn't necessarily follow. Use it to check your tags, not as a WhatsApp refresh button.
• The trick that works: add ?v=2 to the end of the link, then ?v=3 the next time you try. To WhatsApp that's a new address, so it reads the page again. If your link already contains a "?", add &v=2 instead.
• Wait for the preview to appear before you hit send. If you send too quickly, the message goes out without one.
• Check the privacy setting. WhatsApp lets you turn off link previews in its advanced privacy settings. If that's switched on for your phone, the links you send go out without a preview, even for a perfect site.

Facebook: the Sharing Debugger, step by step

Meta's Sharing Debugger is free; you just need to be logged in to a Facebook account.

• Log in to Facebook, open the tool and paste the page address.
• Click "Debug".
• Read the warnings: missing tag, image too small, image not reachable, redirect.
• Look at the preview it shows: that's what people will see when they share your link on Facebook.
• After every fix, click "Scrape Again" so Facebook re-reads the page.

Two traps worth knowing. Meta caches images by their address, so if you replace the image with a file that has the same name, Facebook may keep showing the old one. Give the new file a new name (for example preview-v2.jpg). And if the image doesn't appear the very first time the link is shared, add og:image:width and og:image:height: according to Meta, they let the crawler render the image right away instead of waiting to download and process it. If Facebook shows an image but the wrong one, our guide to Facebook showing the wrong image or text when you share a link covers that case.

LinkedIn, Telegram and the rest: check or refresh the preview

Every app keeps its own copy of the preview. Fixing Facebook doesn't automatically fix the others.

How to fix it, step by step

If you have access to the site (or to whoever manages it), work through it in this order:

Step 1: prepare the image. 1200x630 px, JPEG or PNG, your logo or a clear visual, minimal text, compressed to stay around 300 KB.

Step 2: add or fix the tags og:title, og:description, og:image (full https:// address) and og:url, plus og:image:width and og:image:height if you can, in the head section of the page, directly in the HTML.

Step 3: clear your site's caches, including the caching plugin, any host-level cache and the CDN. Otherwise crawlers keep getting the old page.

Step 4: open the image on its own in a private browser window. It should load with no login and no redirect.

Step 5: run the page through the Sharing Debugger, fix the warnings and click "Scrape Again".

Step 6: test it for real. Send yourself the link on WhatsApp with ?v=2 at the end, and wait for the preview before you hit send.

WordPress and site builders: where to set the share image

On WordPress, an SEO plugin like Yoast SEO or Rank Math generates the Open Graph tags without touching code. In Yoast, you pick the image page by page in the Social media appearance section of the Yoast SEO sidebar in the editor; for pages without an image, Yoast falls back to the site image set under Yoast SEO > Settings > Site basics. Don't run two plugins that output the same tags, or you'll end up with duplicate og:image tags.

On Wix, Shopify, Squarespace and other builders, look in each page's SEO or social settings for a share image field. On a custom-built site, these tags are coded once into the page template, and every new page inherits them.

When it's not something you can fix yourself

Sometimes there's nowhere to click: a closed platform, no access to the code, or you simply don't want to wrestle with plugins on a busy afternoon. That's perfectly fine.

At MPO Web Studio, a small web studio based in Cluj-Napoca, we set up the WhatsApp and Facebook preview while we build the site, not after the first client complains. We work remotely and show you a free demo before you pay anything. If you just want someone to look at a link that's displaying badly, send us the page address on WhatsApp and we'll tell you what's causing it.