Preview on social media

What we check

On the home page we read the Open Graph details that networks use for the preview:

• og:title (title of the preview),
• og:description (short description),
• og:image (preview image).

If all three are missing, there is a warning. If individual ones are missing, a note. If they are complete, we also look at og:url (the address under which the networks count the page) and og:type (the kind of page, usually website); if they are missing, there is a note. We also check the twitter:card entry, which X (formerly Twitter) needs for a large preview.

Why it matters

A website is shared more often than one might think: by visitors in WhatsApp groups, by employees on LinkedIn, in Teams chats, in newsletters. Each time a small preview card with image, title and text is created.

If the details are missing, the app guesses: it shows the logo distorted, a random image from the page, an excerpt from the cookie notice or just the bare address. A well-thought-out preview with a good image is clicked far more often and looks professional before anyone has even opened the website.

How to fix it

These details belong in the head of the page:

<meta property="og:title" content="Hiking boots and outdoor clothing – Muster Sport">
<meta property="og:description" content="Over 40 brands. Next-day delivery.">
<meta property="og:image" content="https://www.example.ch/images/preview.jpg">
<meta property="og:url" content="https://www.example.ch/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

Tips for the image:

• 1200 × 630 pixels, landscape format.
• A real photo of the people, products or work behind the website looks better than a logo on a white background.
• Little text in the image, the title is shown next to it anyway.
• Give the full address with https://, not a relative one.

WordPress

Yoast SEO and Rank Math have a "Social" tab in the page editor for title, description and image. In the general settings you set a default image for all pages.

Wix, Jimdo, Squarespace

In the SEO settings of each page there is a "Social Share" or "Social networks" section for image and texts. Squarespace also uses a default image from the website settings.

How to check it yourself

Paste the address of the home page into the "Post Inspector" of LinkedIn (linkedin.com/post-inspector) or send it to yourself on WhatsApp. This way you see the preview exactly as others see it.

Frequently asked questions

I changed the image, but LinkedIn still shows the old one. Why?

Social networks cache the preview. With the "Post Inspector" of LinkedIn or the "Sharing Debugger" of Facebook you reload it.

What format should the preview image have?

1200 × 630 pixels in landscape format, as JPG or PNG and under 1 MB. Important content belongs in the middle because some apps crop the image to a square.