Skip to content
Timo Wessels
Deutsch

The picture that appears when somebody shares your page

SEO

A shared link shows a preview image. Whether it is the right one is decided by a single line in the head of the page.

3 min read

By Timo Wessels Published

When someone sends a link to your page in a network such as Facebook or LinkedIn, a small card appears: a title, a sentence and a picture. The platform does not pick the picture itself if you tell it which to use. If you do not, it takes any picture from the page, often the logo, sometimes an icon, sometimes none at all.

The most important points first:

  • In one line in the head of the page you tell the platform which picture the card should show.
  • The picture is at least 1200 × 630 pixels in landscape format.
  • When the picture changes, the platform often still shows the old one. Then read the page in again there.

Where the picture comes from

In the head of every page, the invisible part of the HTML, there is a line named og:image. It belongs to the Open Graph protocol. The protocol’s description at ogp.me says: og:image is the address of an image that represents the object in the network. For pages that run encrypted there is also og:image:secure_url.

Give the full address there, with https:// and the domain. A platform fetching your page can do nothing with half an address. That is my experience.

Facebook and LinkedIn name further statements for cards: og:title for the title, og:description for the sentence and og:url for the address of the page.

Which size fits

Facebook recommends images of at least 1200 × 630 pixels for the best display on high-resolution devices. For a card with a large image it asks for at least 600 × 315 pixels.

LinkedIn names other values: at least 1200 × 627 pixels, recommended aspect ratio 1.91 to 1, at most 5 MB file size.

A landscape image of 1200 × 630 pixels meets both. I put important things in the middle of the image so that it stays visible with any crop. Text in the image has to be large enough to be readable on the phone, or be left out entirely.

Why the old preview stays

Platforms remember the preview of a link. Whoever changes the picture often still sees the old one when sharing next. Facebook offers the Sharing Debugger for this. If you enter an address there, it shows which meta statements Facebook’s crawler reads and which errors occurred. It also triggers a new read of your page.

How to check it yourself

Send yourself the link, for example in a chat with yourself, and look at the card. If the wrong picture appears or none, the line is missing or names an address that cannot be reached. Also check that the image’s address opens in the browser without logging in.

Sources