Best IT Recipes

Display thumbnails for links in WhatsApp || og: image meta tag not working

Tried to follow this question: Provide image for whatsapp link exchange

enter image description here

I created a simple HTML page with basic Facebook meta tags:

<!--FACEBOOK--> <meta property="og:title" content="San Roque 2014 Pollos" /> <meta property="og:description" content="Programa de fiestas /> <meta property="og:image" content="http://pollosweb.wesped.es/programa_pollos/play.png" />

Facebook linter checks correctly, and it looks great on Facebook, but when I try to share WhatsApp, the image does not display.

I am trying to use WhatsApp on Android

→ This is the URL of the sample web page

+67
android html meta-tags opengraph whatsapp
Aug 03 '14 at 1:56 on
source share
16 answers

I believe that you need to add itemprop to the og:image meta tag og:image size is set to 256x256 , and it will not hurt to add the properties site_name , type and updated_time either :)

 <meta property="og:site_name" content="San Roque 2014 Pollos"> <meta property="og:title" content="San Roque 2014 Pollos" /> <meta property="og:description" content="Programa de fiestas" /> <meta property="og:image" itemprop="image" content="http://pollosweb.wesped.es/programa_pollos/play.png"> <meta property="og:type" content="website" /> <meta property="og:updated_time" content="1440432930" />

You can see these meta tags in action, for example, Google Maps .
After you change your meta tags, it may take you a while to update the possible caches.

You can debug / check Open Graph meta tags from Facebook Debugger
If you can see all your tags, then sites / applications where your tags do not display properly may have different requirements for Open Graph tags.

EDIT:
If you intend to specify an image using an HTTP-Secure link, you need to use og:image:secure_url instead of og:image .

EDIT2:
You also need to specify og:type , as this is one of four basic required parameters.
<meta property="og:type" content="website" /> should help you in the right direction.

+73
Aug 22 '15 at 9:58
source share

I had the same problem and the problem was the size of the picture. Whatsapp does not support an image larger than 300 KB.

Therefore, the most important property for displaying an image in Whatsapp is:

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

And the image size for display should be less than 300KB

+16
Aug 27 '16 at 14:29
source share

I found a solution here WhatsApp Preview Link posted March 2, 16

And you should see the work before and after the screenshot

enter image description here

There are two kinds of code. First meta: image inside <head>

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

Schema.org thumbnail diagram 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 helps. Thank you

+9
Mar 03 '16 at 23:49
source share

I also ran into this problem, finally I solved it

 <meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" />

My image property

  1. Size: 300X200
  2. Size: <300 KB
  3. URL: http://yourdomain.com/yourfolder/imagename.png

Make sure there is no space in the image name, if you have two words, use the underscore

+8
Aug 25 '17 at 22:34 on
source share

After spending months trying to figure it out, I finally solved the problem. Here is my solution:

 <!-- MS, fb & Whatsapp --> <!-- MS Tile - for Microsoft apps--> <meta name="msapplication-TileImage" content="http://www.example.com/image01.jpg"> <!-- fb & Whatsapp --> <!-- Site Name, Title, and Description to be displayed --> <meta property="og:site_name" content="The Rock Photo Studio"> <meta property="og:title" content="The Rock Photo Studio in Florida"> <meta property="og:description" content="The best photo studio for your events"> <!-- Image to display --> <!-- Replace «example.com/image01.jpg» with your own --> <meta property="og:image" content="http://www.example.com/image01.jpg"> <!-- No need to change anything here --> <meta property="og:type" content="website" /> <meta property="og:image:type" content="image/jpeg"> <!-- Size of image. Any size up to 300. Anything above 300px will not work in WhatsApp --> <meta property="og:image:width" content="300"> <meta property="og:image:height" content="300"> <!-- Website to visit when clicked in fb or WhatsApp--> <meta property="og:url" content="http://www.example.com">

Copy above, paste in the website header. CLOSE the WhatsApp application, re-open the test. No need to clear the cache and no need to clear the data.

Blessings to all!

+6
May 01 '19 at 3:55
source share

Clear data and WhatsApp cache (or use another WhatsApp)!

Android Phone: Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.

Be careful ! Back up your messages before this action.

clear whatsapp data and cache

Then the result: before and after data cleansing and WhatsApp cache before and after sharing

+3
Apr 15 '18 at 16:45
source share

I don’t know about the minimum number of meta tags needed to work on whatsapp, found it somewhere, and it worked flawlessly for me. Note. Image resolution is 256 x 256.

  <head> <meta property="og:site_name" content="sitename" /> <meta property="og:title" content="title"> <meta property="og:description" content="description"> <meta property="og:image" itemprop="image" content="http://www.yoursite.com/yourimage.jpg"> <link itemprop="thumbnailUrl" href="http://www.yoursite.com/yourimage.jpg"> <meta property="og:image:type" content="image/jpeg"> <meta property="og:updated_time" content="updatedtime"> <meta property="og:locale" content="en_GB" /> </head> <body> <span itemprop="image" itemscope itemtype="image/jpeg"> <link itemprop="url" href="http://www.yoursite.com/yourimage.jpg"> </span> </body>
+2
Nov 18 '17 at 23:15
source share

In response to https://stackoverflow.com/a/312960/

Try the updated version for schema.org

 <span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"> <link itemprop="url" href="imgurlHere"> <meta itemprop="width" content="1200"> <meta itemprop="height" content="800"> </span>

or using json-ld format from google

 <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "ImageObject", "url": "ImgURLhere", "height": 800, "width": 1200 } </script>
+1
Aug 29 '16 at 10:33
source share

For everyone, still having this problem, and for me, none of the published solutions have been developed.

I had a similar problem. The image displayed correctly in all other share dialogs. Only WhatsApp was unable to display the image, even if the facebook debugger correctly had the og: image tag.

Solution that worked for me: I am using firebase. For downloaded content in the repository, you get a unique download URL with a media token. Something like:

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/ ? alt = media & token = YYYYYYYY-YYYYYYYYYYYYYYYYYYYYYYYYY

I used this URL in the og: image meta tag. It worked on Facebook, etc., but it seems like WhatsApp was not able to download the image from this URL. Instead, you need to include the image in the project directory and use this link for the og: image tag. Now it works correctly on WhatsApp.

Before (does not work in WhatsApp, but facebook, etc.)

 <meta property="og:image" itemprop="image" content="https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/your_image?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY">

After (now works in all checked general dialogs, including WhatsApp)

 <meta property="og:image" itemprop="image" content="https://domain_name/path_to_image">

Hope this can help some of you :)

+1
Nov 09 '16 at 10:02
source share

I recorded the perfect detailed solution here - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html In order to get the perfect preview, you need to follow seven steps.

  • Heading: Add a rich heading keyword to your webpage with a maximum of 65 characters.

  • Meta Description: Describe your web page with a maximum of 155 characters.

  • og: title: no more than 35 characters.

  • og: url: Full link to the address of your web page.

  • og: description: Maximum 65 characters.

  • og: image: It is recommended to use an image (JPG or PNG) with a size of less than 300 KB and a minimum size of 300 x 200 pixels.

  • favicon: A small 32 x 32 pixel icon.

On the page above you will find the required specifications, character limits and patterns. Do an upvote as soon as you find it satisfactory.

+1
Dec 26 '16 at 15:22
source share

I hope this help:

 <meta property="og:title" content="Title goes here"> <meta property="og:site_name" content="Site name"> <meta property="og:image" content="imageURLShouldBeFromSameDomainName"> <meta property="og:image:width" content="640"> <meta property="og:image:height" content="300">

Pay attention to imgURL, which must be hosted in one domain, or it will not be displayed on whatsapp. I tried loading the url with amazon, image preview does not work.

+1
Jan 26 '17 at 5:21 on
source share

In my case, adding a meta tag below solved the problem. I used Arabic content and had to add this so that the image appears on WhatsApp:

 <meta property='og:locale' content='ar_AR' />

Note. If you use English content, there is no need to add this meta tag, since the default language is English.

+1
Apr 12 '19 at 9:31 on
source share

You only need to enter a message with "http: //" at the beginning. For example: http://www.google.com shows a thumbnail, but www.google.com no.

0
Jul 28 '16 at 13:16
source share

Open data graph:

 <meta property="og:title" content="Title of your website | website.com"/> <meta property="og:type" content="Most popular business directory of Bangladesh"/> <meta property="og:url" content="http://www.website.com/"/> <meta property="og:image" content="http://www.moumaachi.com/images/dhaka-city.jpg"/> <meta property="og:site_name" content="@website"/> <meta property="fb:admins" content="Author"/> <meta property="og:description" content="website.com is your online business directory of Country"/>
0
Jan 17 '19 at 10:09
source share

Parabens pelo artigo, eu so tiver um Problem, quando eu comptilho o link do me site (Catingueiraonline.com) no WhatsApp, aparece tudo certinho (photo, description, etc.) Apenas no android. there is no iphone, so is there a photograph that may be higher?

bit.ly/2XjwKG2

0
Jul 02 '19 at 1:49
source share

It seems that only these 3 tags are required ( og:title , twitter:description , rel="icon" ):

 <meta property="og:title" content="San Roque 2014 Pollos" /> <meta name="twitter:description" property="og:description" itemprop="description" content="Programa de fiestas" /> <link rel="icon" type="image/png" href="https://images.weserv.nl/?url=http://pollosweb.wesped.es/programa_pollos/play.png&w=192&height=192" sizes="192x192" />

Experimentation / game

The easiest thing for me was to experiment with CodeSandbox by doing the following:

  • Build a Vanilla app using https://codesandbox.io/s/
  • Change your meta tags accordingly in index.html
  • Save the file ( ctrl+s ) that will deploy the application and generate its own unique URL
  • Paste this URL into WhatsApp to see a preview (you don’t even need to send a message)
  • Change meta tags
  • Change URL - Add one character at the end of the URL. This discards the "previous cached preview"

Quotes required

Just make sure ALWAYS have quotes and closing quotes because WhatsApp is sensitive to this. In the above example, there is no final quote for your og:description .

0
Aug 13 '19 at 3:09 on
source share


More articles:


All Articles