WhatsApp link preview (OpenGraph integration)

2019-09-04

Reminder of what fields are necessary to display additional information when sharing a link e.g. via WhatsApp.

preview

Exemplary code:

<!DOCTYPE html>
<html>
<head>
  <title>Wir wollen Wulle</title>
  <meta name="description" content="Wir wollen Wulle haben" />

  <meta property="og:title" content="Wir wollen Wulle! (og:title)" />
  <meta property="og:description" content="Wir wollen Wulle haben (og:description)" />

  <meta property="og:image" content="http://marc-walter.info/wulle/flamingo_wulle_934x474.jpg" />
</head>
<body>
  <h2>OpenGraph data example</h2>
  <p>An <a href="./flamingo_wulle_934x474.jpg">image</a> should be visible when sharing this page</p>
</body>
</html>

Important: The linked image should be smaller than 300KB and have minimum dimensions of 300x200 pixels.

Test it by sharing this link: http://marc-walter.info/posts/2019-09-04_opengraph_link_preview/wulle.html

Or by entering it into an iframely debug tool that displays what information it reads from the OpenGraph properties.

There are many more fields, especially when sharing an image on social media sites, it is best to also specify the image dimensions using og:image:width, og:image:height. For more info on different fields, how to use Arrays or specify different locales, check out the official Open Graph protocol page

The short example was inspired from this stackoverflow link.