Showing Thumbnail for link in WhatsApp og image meta-tag doesn t work

Question

Tried to follow this question   Provide an image for WhatsApp link sharing  I have created a simple HTML webpage with the basic Facebook metatags   lt  --FACEBOOK-- gt   lt meta property  quot og title quot  content  quot San Roque 2014 Pollos quot    gt   lt meta property  quot og description quot  content  quot Programa de fiestas quot    gt   lt meta property  quot og image quot  content  quot http   pollosweb wesped es programa pollos play png quot    gt           The Facebook linter validate correctly and in Facebook it shows perfect  but when I try to share by WhatsApp the image doesn t show  I m trying it on WhatsApp on Android   This is the URL of the Sample Webpage

User · Answer

I found the solution here Whatsapp preview link posted on 2 March 16

And you should see working

Before and after screenshoot

There is two kind of code. First meta og:image inside <head>

<meta property="og:image" content="url_image">

Thumbnail schema from schema.org inside <body>

<link itemprop="thumbnailUrl" href="url_image"> 
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> 
  <link itemprop="url" href="url_image"> 
</span>

Hope this help. Thanks.

User · Answer

I don t know about the minimum number of meta tags required to work on whatsapp  found this in somewhere and this worked for me flawlessly  Note  Image resolution is 256 x 256       lt head gt       lt meta property  og site name  content  sitename    gt       lt meta property  og title  content  title  gt       lt meta property  og description  content  description  gt       lt meta property  og image  itemprop  image  content  http   www yoursite com yourimage jpg  gt       lt link itemprop  thumbnailUrl  href  http   www yoursite com yourimage jpg  gt        lt meta property  og image type  content  image jpeg  gt       lt meta property  og updated time  content  updatedtime  gt       lt meta property  og locale  content  en GB    gt       lt  head gt        lt body gt       lt span itemprop  image  itemscope itemtype  image jpeg  gt          lt link itemprop  url  href  http   www yoursite com yourimage jpg  gt        lt  span gt        lt  body gt

User · Answer

If after all these tips  the thumbnail is still not showing  try this  My problem was that the double quotes from the og attributes were being removed when built for production  npm run build   The Minify module was doing that  So the solution was to cancel this removal  setting the removeAttributeQuotes attribute to false  minify                removeAttributeQuotes  false             In my development environment  I set it on the  quot webpack prod conf js quot  file  Set it at your equivalent file  Just rebuild and it s now working

User · Answer

You only need to type the message with  http     at the start  For example  http   www google com shows the thumbnail image  but www google com no

User · Answer

Additional useful info   You can provide several og images  whatsapp will use the last one  This will help with the problem that e g  facebook want 1 91 1 ratio and whatsapp 1 1  https   stackoverflow com a 61078968 8486854

User · Answer

In reply to https   stackoverflow com a 35785393 1518500  Try the updated version for schema org   lt span itemprop  image  itemscope itemtype  http   schema org ImageObject  gt     lt link itemprop  url  href  imgurlHere  gt    lt meta itemprop  width  content  1200  gt    lt meta itemprop  height  content  800  gt   lt  span gt    or using the json-ld format from google   lt script type  application ld json  gt       context    http   schema org      type    ImageObject     url    ImgURLhere        height   800       width   1200       lt  script gt

User · Answer

Had the same issue   I finally got it working after some trying  Here are the 8 html tags that I used on my web page to get the preview working   In  lt head gt  tag   lt meta property  quot og title quot  content  quot ABC Blabla 2020 Friday quot    gt   lt meta property  quot og url quot  content  quot https   bla123 neocities org mp friday html quot    gt   lt meta property  quot og description quot  content  quot Photo Album quot  gt   lt meta property  quot og image quot  itemprop  quot image quot  content  quot https   bla123 neocities org mp images thumbs IMG 327 JPG quot   gt   lt meta property  quot og type quot  content  quot article quot    gt   lt meta property  quot og locale quot  content  quot en GB quot    gt   In  lt body gt  tag   lt link itemprop  quot thumbnailUrl quot  href  quot https   bla123 neocities org mp images thumbs IMG 327 JPG quot  gt    lt span itemprop  quot thumbnail quot  itemscope itemtype  quot http   schema org ImageObject quot  gt   lt link itemprop  quot url quot  href  quot https   bla123 neocities org mp images thumbs IMG 327 JPG quot  gt   lt  span gt   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  quot  JPG quot  then do not use  quot  jpg quot  or  quot  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

User · Answer

I followed all the instructions in the anwers here  and I still couldn t get it to work   It seems WhatsApp also requires the extension for it to display the image  So for a tag pointing to a jpeg   lt meta property  quot og image quot  itemprop  quot image quot  content  quot https   example com someimageid quot   gt  Change the API to allow the extension and use   lt meta property  quot og image quot  itemprop  quot image quot  content  quot https   example com someimageid jpeg quot   gt  and it then seems to work

User · Answer

This Solution works for me       lt meta property  quot og title quot  content  quot Testing Title quot    gt       lt meta       property  quot og description quot        content  quot This is best way to view your Time Table  amp  Join Meetings quot        gt       lt meta       property  quot og image quot        itemprop  quot image quot        content  quot   upload wikimedia org wikipedia commons d d4 JPEG example image decompressed jpg quot        gt       lt meta property  quot og url quot  content  quot https   google com  quot    gt       lt meta property  quot og type quot  content  quot website quot    gt       lt meta property  quot og image type quot  content  quot image jpeg quot    gt   tested on codesandbox io here s the link  https   l8ogr csb app  one silly little thing did that magic  by removing  quot http quot  or  quot https quot  from the Image Url if your image URL is ex  https   test com img jpeg to   test com img jpeg  lt meta property  quot og image quot  itemprop  quot image quot  content  quot   test com img jpg quot   gt

User · Answer

Only these 3 tags seem to be required  og title  twitter description  rel  icon      lt meta property  og title  content  San Roque 2014 Pollos    gt    lt meta name  twitter description  property  og description  itemprop  description  content  Programa de fiestas    gt    lt link rel  icon  type  image png  href  https   images weserv nl  url http   pollosweb wesped es programa pollos play png amp w 192 amp height 192  sizes  192x192    gt    Experimenting   playing  The easiest way to experiment for me was with CodeSandbox following these steps    Create a Vanilla app with https   codesandbox io s  Modify your meta tags accordingly in the index html file Save the file  ctrl s  which would fork the app and generate its own unique url Paste that url in WhatsApp to see the preview  you don t even need to send a message  Make changes to the meta tags Modify the url - add a single character at the end of the url  This discards the  previous cached preview    Quotes required  Just be sure to ALWAYS have quotes and closing quotes because WhatsApp is sensitive to that  Your above example does not have a closing quote for your og description

User · Answer

Clear your whatsapp data and cache  or use another whatsapp     Android Phone   Go to SETTINGS  gt  APPS  gt  Application List  gt  WhatsApp  gt  Storage and Clear Data       Be careful   Backup your messages before this action      Then the result   before and after clearing data and cache WhatsApp

User · Answer

November 2020   As I experienced   these meta tags are required and effect on what you see on shared link in Whatsapp and WhatsApp-thumbnail    lt head gt    lt meta content  myTitle  property  og title   gt     lt meta content  quot myDescription quot  property  quot og Description quot   gt     lt meta property  quot og type quot  content   quot website quot    gt     lt meta property  quot og image quot  itemprop  quot image primaryImageOfPage quot  content  quot https   i ibb co 1GRpwND 600px-Approve-icon-svg png quot    gt   lt  head gt   and inside  lt body gt      lt a href  quot https   wa me  text https   myaddress blogspot com 2020 11 try-16 html quot  target  quot  blank quot  rel  quot nofollow quot  gt Hello whatsApp lt  a gt   More explanation   1- Suppose you have  lt meta content  example com page1  property  og url   gt  and inside body you refer to  lt a href  quot https   wa me  text example com page2 quot   gt Hello whatsApp lt  a gt   the og image and og description of page example com page2 wil be rendered on whatsApp as you referred on your link in body  maybe obvious   2-When you add change any open graph tags such as og description  and again you click your  lt a gt  lt  a gt  tag on your page body  what you see on WhatsApp doesn t change unless you change the href  quot I am a new URL quot  of your  lt a gt  lt  a gt  tag or clear cache of WhatsApp    3-I tried Png jpg images  all less than 300 kb in size and all bigger than 300 300 in pixels  and image content was a https  or a http url  the above code supports both of them   No need to og image secure url   4-Each time you add change og contents  to have a thumbnail on WhatsApp  the changes doesn t affect on first try    and successful on second try  Very strange

User · Answer

For anyone still experiencing this  I found that images served on Amazon S3 do not work for WhatsApp mobile app  both Android and iOS  but Mac desktop app was fine   It s very possible that our AWS settings cause this  but I noticed the pattern in other sites as well  e g  this one with an og image hitting a domain like https   s3 amazonaws com    There were no problems on any other platform I tried  just WhatsApp mobile apps  As soon as I pointed my  lt meta property  og image  content  https   some-non-aws-location    gt  to another public URL like a Google Drive file  shared publicly of course   it worked fine   I also tried committing the image in our repo  which is hosted and deployed on AWS with a custom domain  and that didn t work either  So AWS still seems to be the culprit  Hope this helps someone

User · Answer

I hope this help    lt meta property  og title  content  Title goes here  gt   lt meta property  og site name  content  Site name  gt   lt meta property  og image  content  imageURLShouldBeFromSameDomainName  gt   lt meta property  og image width  content  640  gt   lt meta property  og image height  content  300  gt    Take note of the imgURL that should be hosted from same domain  or it will not show up on whatsapp  I tried loading a url from amazon  image preview is not working

User · Answer

In my case  adding the below meta tag solved the problem  I was using Arabic content and had to add this to make the image appear on WhatsApp    lt meta property  og locale  content  ar AR    gt    Note  If you are using English content  no need to add this meta tag since English is the default value

User · Answer

I had the same issue and the problem was the size of the picture  Whatsapp doesn t support picture with a size greater than 300KB   So the most important property to display image on Whatsapp is     lt meta property  og image  content  url image  gt    And the size of the image to display must be less than 300KB

User · Answer

After spending months trying to figure this out  I finally solved the issue   Here is my solution     lt  -- MS  fb  amp  Whatsapp -- gt    lt  -- MS Tile - for Microsoft apps-- gt   lt meta name  msapplication-TileImage  content  http   www example com image01 jpg  gt        lt  -- fb  amp  Whatsapp -- gt    lt  -- Site Name  Title  and Description to be displayed -- gt   lt meta property  og site name  content  The Rock Photo Studio  gt   lt meta property  og title  content  The Rock Photo Studio in Florida  gt   lt meta property  og description  content  The best photo studio for your events  gt    lt  -- Image to display -- gt   lt  -- Replace     example com image01 jpg   with your own -- gt   lt meta property  og image  content  http   www example com image01 jpg  gt    lt  -- No need to change anything here -- gt   lt meta property  og type  content  website    gt   lt meta property  og image type  content  image jpeg  gt    lt  -- Size of image  Any size up to 300  Anything above 300px will not work in WhatsApp -- gt   lt meta property  og image width  content  300  gt   lt meta property  og image height  content  300  gt    lt  -- Website to visit when clicked in fb or WhatsApp-- gt   lt meta property  og url  content  http   www example com  gt    Copy the above  paste in head area of website  CLOSE your Whatsapp app  re-open  THEN test  No need to clear cache  and NO NEED TO CLEAR DATA   Blessings to all

User · Answer

I belive you need to add itemprop to the og image meta tag  have the image size set to 256x256 and also it would not harm to add the site name  type and updated time  properties either      lt meta property  og site name  content  San Roque 2014 Pollos  gt   lt meta property  og title  content  San Roque 2014 Pollos    gt   lt meta property  og description  content  Programa de fiestas    gt   lt meta property  og image  itemprop  image  content  http   pollosweb wesped es programa pollos play png  gt   lt meta property  og type  content  website    gt   lt meta property  og updated time  content  1440432930    gt    You can see these meta tags in action on for example Google Maps  After you have changed your meta tags  you might need to wait a while for possible caches to update   You can debug verify Open Graph meta tags from the Facebook Debugger If you can see all your tags there  then the sites apps where your tags are not showing properly might have different requirements for Open Graph tags   EDIT  If you are going to specify an image by a HTTP-Secure link  you need to use og image secure url instead of og image   EDIT2  You also need to specify og type as it is one of the four base required parameters   lt meta property  og type  content  website    gt  should get you in the right direction

User · Answer

For all still having this problem and as for me none of the posted solutions worked out   I ve had the similar issue   The image was showing correctly in all other share dialogs   Only WhatsApp couldnt display the image  even though the facebook debugger has the og image tag correctly   The solution that worked for me  I am using firebase  For uploaded content in their storage  you get a unique Download URL with a media token  Something like   https   firebasestorage googleapis com v0 b XXXX XXXXXXX com  alt media amp token YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY  I used this URL in the og image meta tag  It worked for Facebook etc   but it seems like WhatsApp couldnt download the image from this URL  Instead you need to include the image in your project directory and use this link for the og image tag  Now it works properly in WhatsApp too   Before  not working in WhatsApp  but facebook etc     lt meta property  og image  itemprop  image  content  https   firebasestorage googleapis com v0 b XXXX XXXXXXX com your image alt media amp token YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY  gt    After  now working in all shared dialogs tested  including WhatsApp    lt meta property  og image  itemprop  image  content  https   domain name path to image  gt    Hope it might help some of you

User · Answer

Open Graph data    lt meta property  og title  content  Title of your website   website com   gt   lt meta property  og type  content  Most popular business directory of Bangladesh   gt   lt meta property  og url  content  http   www website com    gt   lt meta property  og image  content  http   www moumaachi com images dhaka-city jpg   gt   lt meta property  og site name  content   website   gt   lt meta property  fb admins  content  Author   gt   lt meta property  og description  content  website com is your online business directory of Country   gt

User · Answer

I documented the perfect detailed solution here - https   amprandom blogspot com 2016 12 blogger-whatsapp-rich-link-preview html There are seven steps to be done to get the perfect preview    Title   Add Keyword rich title to your webpage with maximum of 65 characters  Meta Description   Describe your web page in a maximum of 155 characters  og title   Maximum 35 characters  og url   Full link to your webpage address  og description   Maximum 65 characters  og image   Image JPG or PNG  of size less than 300KB and minimum dimension of 300 x 200 pixel is advised  favicon   A small icon of dimensions 32 x 32 pixels     In the above page  you have the required specifications  the character limit and sample tags  Do upvote once you find it satisfactory

User · Answer

I also face that problem Finally  i solved it   lt meta property  og image  itemprop  image  content  http   yourdomain com yourfolder imagename png    gt    My image property   Dimension   300X200 Size    lt  300KB URL  http   yourdomain com yourfolder imagename png   Make sure in image name there is no space  if you have two words then use underscore sign

[android] Showing Thumbnail for link in WhatsApp || og:image meta-tag doesn't work

Examples related to android

Examples related to html

Examples related to facebook-opengraph

Examples related to meta-tags

Examples related to whatsapp