Social Preview Images That Look Broken

What generates a preview

When a link is shared to a platform or pasted into a messaging app, the receiving system fetches the page and looks for specific tags describing what to show.

Those tags name an image, a title, and a short description, and they are separate from the page title and description used by search engines.

Where they are absent, the system guesses: it takes the first sizeable image it finds, or the logo, or nothing.

Which is why a shared link frequently shows a cropped photograph of something irrelevant, a stretched logo, or a grey box.

Why it matters more than it looks

• A customer sharing you is a recommendation.
• The preview is the whole post visually.
• It appears in messages, not only on platforms.
• A broken preview gets fewer clicks.
• You cannot fix it after somebody has shared.

The third is the one people forget. Most sharing of a small business link happens privately, in a message between two people, and that is exactly the recommendation you most want to look right.

The image

Specifications that matter, and the proportions matter more than the exact numbers.

Use a landscape image, roughly twice as wide as it is tall, since that is what most platforms display and other shapes get cropped to it.

Make it large enough to stay sharp on a high-resolution phone, which means considerably bigger than it appears.

Keep anything important away from the edges, because different platforms crop differently and the safe area is the middle.

Avoid small text, which is illegible at the size it is actually shown.

And prefer a photograph of real work with the business name over a plain logo, since a logo on white looks like an error to somebody scrolling.

Set the title and description too

Since the image gets attention and the text does the explaining.

The preview title should say what the page is, in a few words, and it does not have to match the page title exactly.

The description is a sentence, and it is frequently truncated, so put the point at the front.

Where those are unset, platforms fall back to whatever they can find, which may be a navigation menu or a fragment of the footer.

Most site platforms have fields for these, either built in or through a plugin, and filling them takes a minute per page.

At minimum, set them for the home page and any page you actually share.

A worked example

A business found that when customers shared their site in local groups, the preview showed a cropped section of their logo on a white background with no text.

It looked like a broken image, and one customer asked whether the link was working.

They set a preview image showing a completed job with the business name across the corner, at landscape proportions, plus a title and one-line description.

Shared links then showed a photograph of real work with a legible description.

They also had to clear the cached version, since the old preview persisted for weeks on one platform until they refreshed it deliberately.

The change took half an hour and applied to every share from then on.

Caching is why it looks unchanged

The practical trap, and it causes more confusion than the setup.

Platforms cache the preview for a link the first time it is shared and reuse it for a long period afterwards.

So correcting the tags does not change what appears for a link that has already been shared, sometimes for weeks.

The major platforms provide a sharing debugger or inspector that fetches the page again and shows what it found, which forces a refresh.

Use it after making changes, and use it before a campaign so the first share is correct rather than the twentieth.

Test with the exact address people will share, including any trailing characters, since a slightly different address is cached separately.

Check the pages you actually share

Rather than only the home page, which is the one most likely to be set.

Blog posts, service pages, and anything promoted are what get shared, and they frequently inherit nothing.

A blog post with no preview image shows whatever the theme provides, which may be a header graphic identical across every post.

Giving each significant page its own image is worth doing for the handful you actively share, and a sensible default covers the rest.

Where a page has a good photograph in it already, that is usually the right preview image and needs only to be nominated.

Messaging apps behave differently

Worth knowing, since a lot of sharing happens there.

Messaging applications generate previews too, and they use smaller images, crop differently, and sometimes show a square rather than a landscape shape.

Which is the practical reason to keep important content in the middle of the image rather than filling the width.

Test by sending the link to yourself in whichever apps your customers use, which takes two minutes and shows the real result rather than a predicted one.

Some apps also require the page to be publicly reachable, so a link tested while a site is behind a holding page will not preview.

The counter-case

This matters in proportion to how much your links get shared.

A business whose customers arrive through search and never share a link gains very little from a perfect preview.

Platforms also change their display frequently, so anything tuned precisely to one layout will be wrong within a year.

And an unset preview is untidy rather than damaging, since the link still works and the destination is still the site.

Set a good default image, a title, and a description for the home page and your main service pages, test one share, and leave it.

What to do

1. Set a dedicated preview image, landscape.
2. Keep content away from the edges.
3. Use real work rather than a plain logo.
4. Set the preview title and description.
5. Cover the pages you actually share.
6. Refresh the cache with a sharing debugger.
7. Send yourself the link in a messaging app.

Step six is what makes a correction visible, since platforms reuse the first preview they saw and a fixed page can keep showing the broken version for weeks.

What happens after somebody clicks is covered in sending people from social to your site.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.