Getting WhatsApp Rich Snippet Previews Working



Published: 2018-08-28 23:10:06 +0000
Categories: Misc,

Language

Misc

Description

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).

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." />

Keywords

Whatsapp, microdata, rich snippets, image, preview, OpenGraph, og,

Latest Posts

Urldecode string (LUA)
FFMPEG Convert YUV444p to YUV420p (BASH)
Forcing FFMPEG to honour segment length in HLS Stream Creator (BASH)
Force CURL to place request to a specific IP (BASH)
Set a variable only if it is undefined (Javascript)
Ignore query string with Nginx caching proxy (NGinx)
Get breakdown of UK and non-UK votes for a Parliamentary Petition (Python)
Decompress Mozilla Firefox jsonlz4 bookmark backup files (Python)
Setting Git author details for a single repo (Git)
Checking Virtual Machine Resource Allocations with Libvirt (BASH)

Copyright © 2019 Ben Tasker | Sitemap | Privacy Policy
Available at snippets.bentasker.co.uk and snippets.6zdgh5a5e6zpchdz.onion