Every share is either a card or a bare grey link

Somebody finally recommends your product in a group chat. What appears is a grey rectangle with your URL in small text. That moment costs you more than most technical problems on your site.

Run the free check

Social platforms build a link preview from Open Graph tags in your page head: og:title, og:description and og:image, plus a Twitter card type. Without an og:image, a shared link renders as a bare URL. The image must be an absolute address rather than a relative path, and a common size is 1200 by 630 pixels.

Why this is worth an hour

Consider what a share actually is. Somebody has decided your product is worth telling other people about. This is the most valuable kind of distribution there is, and it is entirely unpaid.

What arrives in that chat, that post, that message, is either a card with a picture and a headline, or a grey rectangle with a URL. The first looks like a product. The second looks like a link somebody is not sure about.

The share already happened. The person already did the hard part. Losing the impact at the final step, over one missing file, is the worst possible trade in your entire setup.

The tags that matter

Four things in the head of your page do nearly all of the work.

  • og:title, the headline on the card. This can differ from your page title and often should, since a card headline can be shorter and more direct.
  • og:description, one or two lines underneath. Same discipline as a meta description: specific rather than decorative.
  • og:image, the picture. This is the one that decides whether you get a card at all.
  • twitter:card set to summary_large_image, which asks for the large format rather than a small thumbnail.
  • og:url, the canonical address of the page, which keeps the preview stable when the link is shared with tracking parameters attached.

The mistake that breaks it most often

The og:image value must be a complete address including the protocol and domain, not a path relative to your site.

A relative path works perfectly on your own pages, because the browser resolves it against the current address. The service generating a preview is not on your site and has no address to resolve against, so it receives something it cannot fetch and gives up.

This is the single most common reason a preview fails, and it is invisible locally because everything looks correct when you view the page yourself. If your card is not appearing, check this before anything else.

The related trap is a domain move. An absolute address hard-coded to the old domain keeps pointing at the old domain after you migrate, and quietly stops resolving.

The image itself

A widely used size is 1200 by 630 pixels, which is close to the ratio most platforms crop toward. Working at that size means what you designed is roughly what appears.

Design it for a small rectangle on a phone, which is where most of these are seen. That means very few words, set large. A card carrying a paragraph of small text communicates nothing, because at the size it renders the text is unreadable and the space is wasted.

Keep important content away from the edges, since different platforms crop differently and anything near a border may be cut.

And keep the file size sensible. This image is fetched every time your link is previewed, and a several megabyte image is slow to fetch and sometimes simply skipped.

One image or one per page

Start with one good image used everywhere. This is the pragmatic answer and it is much better than nothing.

Move to per-page images when you have pages that get shared for different reasons. A guide answering a specific question is shared in a different context from your homepage, and a card whose headline matches the guide is considerably more effective than a generic brand card.

The middle path that suits most small products is a template: one design with the page title rendered onto it, generated at build time. That gives you per-page cards without designing each one, and it scales as you add pages.

What is not worth doing is leaving pages with no image while you plan a perfect system. One image everywhere, today, beats a considered plan next month.

Testing it, and the caching trap

Do not test by sharing the link to a friend and asking what they see, because of how caching works here.

Platforms cache what they fetched the first time they saw your URL. If your link was ever shared before the tags were correct, the broken version may be what is stored, and it will keep being served even after you fix the page.

Each major platform provides a debugging tool that fetches your page fresh and shows what it found, and most of them offer a way to force a refresh of the cached version. Use those rather than guessing, and remember to refresh the cache for any URL that was shared while the tags were wrong.

Test one deep page as well as the homepage, since this is another setting commonly applied to the entry point and forgotten everywhere else.

Part of a larger guide

This page is one part of The fixes. The other parts:

Questions people ask

Why does my link show no preview image when shared?
Most often because og:image is a relative path rather than a complete address including protocol and domain. A relative path resolves fine on your own pages but the service generating the preview is not on your site, so it receives something it cannot fetch and falls back to a bare URL.
What size should an Open Graph image be?
1200 by 630 pixels is widely used and close to the ratio most platforms crop toward, so what you design is roughly what appears. Keep important content away from the edges, since platforms crop differently and anything near a border may be cut.
Which tags do I actually need?
og:title for the headline, og:description for the lines beneath, og:image for the picture, twitter:card set to summary_large_image to request the large format, and og:url for the canonical address so the preview stays stable when tracking parameters are attached.
Do I need a different image for every page?
Not to begin with. One good image used everywhere is far better than nothing and is the right starting point. Move to per-page images when different pages get shared in different contexts, ideally by rendering the page title onto a template at build time.
I fixed my tags but the old preview still shows. Why?
Platforms cache what they fetched the first time they saw your URL, so a broken version stored before you fixed the page keeps being served. Each major platform has a debugging tool that fetches fresh and usually a way to force a cache refresh.
What should the image actually contain?
Very few words, set large, designed for a small rectangle on a phone where most previews are seen. A card carrying a paragraph of small text communicates nothing, because at the rendered size the text is unreadable and the space is wasted.

See how your link renders when shared

The free Get Found Check reads your Open Graph tags and reports whether a shared link produces a card or a bare URL.

Run the free check Have Licheo do it for you