CODEWITHSUNDEEP
androidfacebook-opengraphwhatsapp
user2472368
user2472368

Reputation: 199

Include image when sharing a link on WhatsApp

This has been asked and answered a few times already Provide an image for WhatsApp link sharing

and I also found this link http://tekinfotree.blogspot.com.es/2016/06/how-to-display-thumbnail-preview-link.html saying "The meta tag property og:image is enough for getting a thumbnail."

On the page, we already have the og:image but still, the image doesn't appear when sending the article via WhatsApp. Any clue what could be the reason?

The metas are in the head tag of the page.

<meta property="og:image" content="http://picture-url.jpg"/>
<meta property="og:url" content="https://article-url.html"/>
<meta property="og:title" content="ARTICLE_TITLE"/>
<meta property="og:description" content="PARTICLE_DESCRIPTION" />
<meta property="og:locale" content="es_ES"/>
<meta property="og:site_name" content=""/>

Thanks!

Upvotes: 2

Views: 17520

Answers (2)

zennni
zennni

Reputation: 1717

enter image description here For my webpage I was trying to include image preview thumb when sharing a link on WhatsApp , spent lot of time fixing the issue. Finally got it working using these 8 html tags:

In <head> tag:

<meta property="og:title" content="ABC Blabla 2020 Friday" />
<meta property="og:url" content="https://bla123.neocities.org/mp/friday.html" />
<meta property="og:description" content="Photo Album">
<meta property="og:image" itemprop="image" content="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG"/>
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_GB" />

In <body> tag:

<link itemprop="thumbnailUrl" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">

<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">
</span>

These 8 tags ( 6 in head , 2 in body) worked perfectly.

Tips:

1.Use the exact image location URL instead of directory format i.e. don't use images/OG_thumb.jpg

2.Case sensitive file extension: If the image extension name on your hosting provider is ".JPG" then do not use ".jpg" or ".jpeg' . I observed that based on hosting provider and browser combination error may or may not occur, so to be safe its easier to just match the case of file extension.

3.After doing above steps if the thumbnail preview is still not showing up in WhatsApp message then:

a. Force stop the mobile app ( I tried in Android) and try again

b.Use online tool to preview the OG tag eg I used : https://searchenginereports.net/open-graph-checker

c. In mobile browser paste direct link to the OG thumb and refresh the browser 4-5 times . eg https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

Upvotes: 0

Sergei Kartashev
Sergei Kartashev

Reputation: 21

Please check the size of your preview image. My image was 700x500 pixels size and there was no Whatsapp preview (Facebook and Skype display correctly). After setting it to 300x300 pixels Whatsapp previews it successfully.

Upvotes: 2

Related Questions