I am trying to show link preview on whatsapp, it is working for ios and windows but not for android. I have tried all the meta tags that are suppose to be there in tag. Am i missing out on something ?
Asked
Active
Viewed 3.6k times
16
-
So you want to see the image, the description and the title of the site when you send the link of your site on whatsapp? – Lafa Oct 01 '18 at 13:32
-
Yes exactly, i am able to see that on ios but not android phones – Komal Thamke Oct 01 '18 at 13:43
-
1this is duplicate to question: https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing – Sergey Bogdanov Oct 01 '18 at 13:52
-
this is working for ios but not for android. – Komal Thamke Oct 01 '18 at 14:28
3 Answers
7
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
Lafa
- 513
- 2
- 20
5
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
3
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.
Vega
- 27,856
- 27
- 95
- 103
Vineeth Nelanti
- 39
- 1
-
I changed the url provided by the Youtube app from https to http and that worked. Thank you. – Oct 23 '20 at 23:12