WhatsApp link preview not working on android phones

I too had the same problem. However, i figured how to fix the issue.

Use "http://" or "https://" in your link. The thumbnail appears automatically in Android Whatsapp.

Thumbnail wont appear for below link

www.example.com

correct usage

<https://www.example.com>

The Website thumbnail appears automatically in Android Whatsapp phones.


Ok you should use the meta tags, some times it takes a while to change so you need to wait.

Title

<meta property="og:title" content="title in here" />

Description

<meta property="og:description" content="description in here">

Image

<meta property="og:image" content="image in here">

URL

<meta property="og:url" content="url in here" />

PS: on whatsapp this works only if you copy paste the url in chat


enter image description here WhatsApp link preview was not working for me as well. After trying some options I finally got it working . Here are the 8 html tags that worked perfectly for me:

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

Tags:

Html

Meta Tags