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

Remotely backing up PFsense Configuration (BASH)
FFMPEG: Converting RMVB to X264 MP4 (BASH)
Recursively print table (print_r equivalent) (LUA)
Bulk Delete Comments from (Self-Hosted) JIRA Issues (Misc)
Add a static entry to the ARP table (BASH)
SSL Cipher Hex codes to Human Readable Names (Misc)
Convert Ascii to Binary (BASH)
Intercepting Outbound DNS Queries (BASH)
Handle Google Verification files within NGinx Configuration (NGinx)
Getting WhatsApp Rich Snippet Previews Working (Misc)

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