Getting WhatsApp Rich Snippet Previews Working (Misc)

Ben Tasker

2018-08-28 23:10

Category: Misc

This is something that catches me out from time to time, as I have to worry about it so infrequently. When setting up Opengraph metadata on a new site, snippets might display correctly on Facebook's Opengraph debugger but when you share a link on WhatsApp you don't get a link preview (or do and the image is missing).

The metadata required is listed below, but 9 times out of 10 it's because I've not included itemprop="image" on the og:image declaration (something which Facebook's OG debugger won't flag).

Details

Language: Misc

Snippet

<meta property="og:type" content="article" />
<meta property="og:title" content="$page_title" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image" itemprop="image" content="$thumbnail_url" />
<meta property="og:image:width" content="$thumbnail_width" />
<meta property="og:image:height" content="$thumbnail_height" />
<meta property="og:url" content="$article_url" />
<meta property="og:description" content="$article_description" />

Usage Example

<meta property="og:type" content="article" />
<meta property="og:title" content="Saab 9-3 Door Lock Unit Repair" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image" itemprop="image" content="https://www.bentasker.co.uk/images/Documentation/saab_93_door_lock_unit/IMG_20180805_095544.jpg" />
<meta property="og:image:width" content="667" />
<meta property="og:image:height" content="500" />
<meta property="og:url" content="https://www.bentasker.co.uk/documentation/vehicles/371-saab-9-3-door-lock-unit-repair" />
<meta property="og:description" content="The central locking door lock mechanisms on Saab 9-3s (and 9-5s) are known to occasionally stop working properly." />