Getting WhatsApp Rich Snippet Previews Working

Published: 2018-08-28 23:10:06 +0000
Categories: 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).


<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="" />
<meta property="og:image:width" content="667" />
<meta property="og:image:height" content="500" />
<meta property="og:url" content="" />
<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." />


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

Latest Posts

Copyright © 2022 Ben Tasker | Sitemap | Privacy Policy
Available at, http://phecoopwm6x7azx26ctuqcp6673bbqkrqfeoiz2wwk36sady5tqbdpqd.onion and http://snippets.bentasker.i2p
hit counter