问题
Tried to follow this question : Provide a picture for whatsapp link sharing
I have created a simple HTML webpage with the basic Facebook metatags:
<!--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" />
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
回答1:
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 :)
<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 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.<meta property="og:type" content="website" /> should get you in the right direction.
回答2:
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:
<meta property="og:image" content="url_image">
And the size of the image to display must be less than 300KB
回答3:
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.
回答4:
I also face that problem Finally, i solved it
<meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" />
My image property
- Dimension : 300X200
- Size : < 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
回答5:
After spending months trying to figure this out, I finally solved the issue. 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 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!
回答6:
Clear your whatsapp data and cache (or use another whatsapp) !
Android Phone : Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.
Be careful ! Backup your messages before this action.
Then the result : before and after clearing data and cache WhatsApp
回答7:
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.
<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>
回答8:
In reply to https://stackoverflow.com/a/35785393/1518500
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 the json-ld format from google
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "ImageObject",
"url": "ImgURLhere",
"height": 800,
"width": 1200
}
</script>
回答9:
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&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.)
<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 working in all shared dialogs tested, including WhatsApp)
<meta property="og:image" itemprop="image" content="https://domain_name/path_to_image">
Hope it might help some of you :)
回答10:
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.
回答11:
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">
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.
回答12:
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:
<meta property='og:locale' content='ar_AR' />
Note: If you are using English content, no need to add this meta tag since English is the default value.
回答13:
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.
回答14:
Open Graph data:
<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"/>
回答15:
Only these 3 tags seem to be 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" />
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.htmlfile - 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.
来源：https://stackoverflow.com/questions/25100917/showing-thumbnail-for-link-in-whatsapp-ogimage-meta-tag-doesnt-work