Your link shows the wrong preview? Five checks for link previews

Who this is for

Someone shared a link to your website, shop, booking page or status page, and the preview card in the chat or on the social network shows another company’s logo, an old picture, a bare address or nothing at all. The page itself looks fine in the browser. This guide explains why previews go wrong and gives you five checks. If the link belongs to a site you do not run, the last part tells you how to report it so it gets fixed quickly.

How a preview is made

When you paste a link, the app does not show your page. A small program fetches the page’s HTML and reads a few lines in its head, the Open Graph tags. The title, description and image on the card come from those lines and from nowhere else. If they are missing, wrong or copied from a template, the card shows that. The app keeps a copy of the result, so a fix often does not show up at once.

The five checks

1. See what others see. Paste the link into a chat with yourself, or use a preview tool: the Sharing Debugger for Facebook and Instagram, the Post Inspector for LinkedIn. They show the title, description and image they found and list problems. Look at the card, not at your browser: what you see on the page is not what the fetching program reads.

2. Give every page its own tags. The basic set is og:title, og:description, og:image and og:url, and og:type for the kind of page. They sit in the <head> of the page:

   <meta property="og:title" content="Opening hours and booking">
   <meta property="og:description" content="Book a free 30-minute call.">
   <meta property="og:image" content="https://example.com/img/booking.png">
   <meta property="og:url" content="https://example.com/booking/">
   

   One set for the whole site means every page shows the same card. That is acceptable for a small site, but a status page, a booking page and a product page deserve their own.

3. Use an image the program can open. Use a full address starting with https://, not a path like /img/card.png. The image must open without a login, a cookie banner or a redirect, and it must not be blocked for robots. A size of 1200 by 630 pixels, a ratio of about 1.91 to 1, works well on the large networks; Meta’s own minimum is 200 by 200 pixels. Keep the file small, a few hundred kilobytes is plenty. Put a short text in the picture, because it is shown small.

4. Find out where the tags come from. When the card shows an image that is not yours, the tags come from somewhere you did not set. The usual causes:

   • a theme, template or site builder fills in a default image, often its own
   • the host or service shows a placeholder page to programs, for example when the address points to the wrong site or an unfinished project
   • the tags are added by JavaScript after the page loads. Many preview programs do not run scripts, so they never see them. The tags must be in the HTML the server sends. To check, open the page source (not the inspector) and search for og:image.

5. Refresh the saved copy. Facebook and LinkedIn keep what they fetched. After fixing the page, run the link through the debugger or inspector again, and use the button that fetches it anew. Some chat apps keep their own copy with no tool to clear it. Adding a harmless parameter to the link, such as ?v=2, makes the app treat it as a new link. Messages that were already sent keep their old card.

A two-minute self-check

• Paste your most important link into a preview tool: are title, description and image right?
• View the page source and search for og:image: is it there, with a full https:// address?
• Open the image address in a private window: does it load without a login?
• Is the picture sharp and readable at small size, and not someone else’s?
• Did you fetch the link anew after the last change?

If the link is on someone else’s site

When the wrong preview is on a supplier’s or partner’s site, you cannot fix it yourself, but you can make the report easy to act on. Send the link, a screenshot of the wrong card, and the result of the debugger or inspector. Say which of the five checks fails, for example “the page has no og:image, so the card shows an unrelated picture”. Those three things let their team reproduce it in minutes. It also helps to mention the app where you saw it.

When to get help

Ask someone experienced if:

• you changed the tags and the old card still appears after refreshing
• you run many pages or a shop and need a card for each product
• the tags are correct in the source but the debugger reports errors you cannot read
• you want the preview, titles and images checked together with the rest of the site

This belongs to the launch check too. We go through it with you in a free 30-minute video call: book a call.