How to set up a link preview for social networks (Open Graph)

Short answer

Add Open Graph meta tags with the property attribute to <head>:

<head>
  <meta property="og:title" content="The Bean — coffee in the city centre">
  <meta property="og:description" content="Specialty coffee, cakes and breakfast all day.">
  <meta property="og:image" content="https://example.com/cover.jpg">
  <meta property="og:url" content="https://example.com/">
  <meta property="og:type" content="website">
</head>
<p>These tags change how a shared link looks.</p>

When a link to the page is sent to a messenger or a social network, the title, description and image for the preview card are taken from here.

The image

• The image address is full, with https:// and the domain: social networks do not understand a relative path.
• The recommended size is 1200×630 pixels, with the important part near the center: the edges are cropped differently in different apps.

How to check

Send the link to yourself in a messenger or use the social networks' preview debuggers. They also let you reset an old preview: social networks cache it for a long time and do not notice changes right away.

Common mistake

Open Graph meta tags are written with name instead of property: <meta name="og:title">. Some services skip such a tag, and the preview is assembled from random text and the first image found. For og: use property.