问题
How can we include an image in our website to display in WhatsApp when we share a link like this?
回答1:
2019 standards
It takes a few steps to get the perfect preview for WhatsApp, Twitter, Facebook and bookmark icons for pc's and mobile devices. If you like reading go to ogp.me - but make sure to read steps 1 - 6 in this answer to get the best WhatsApp preview.
Please note: some apps or websites use cache or even store the website preview to their database. This means when you're testing your link in WhatsApp or Facebook for example, you'll most likely not see any difference right away. Using another link (another page) will do the trick. But as soon as you use that link once, this "please note" section starts all over again.
Step 1: title
Maximum of 65 characters
<title>your keyword rich title of the website and/or webpage</title>
Step 2: description
Maximum of 155 characters
<meta name="description" content="description of your website/webpage, make sure you use keywords!">
Step 3: og:title
Maximum 35 characters
<meta property="og:title" content="short title of your website/webpage" />
Step 4: og:url
Full link to the current webpage address
<meta property="og:url" content="https://www.example.com/webpage/" />
Step 5: og:description
Maximum 65 characters
<meta property="og:description" content="description of your website/webpage">
Step 6: og:image
Image(JPG or PNG) with a size less than 300KB and minimum dimensions of 300 x 200
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">
If you completed the steps above, you can now see your preview in WhatsApp! Be aware of the "plase note" section, though.
Step 7: og:type
In order for your object to be represented within the graph, you need to specify its type. Here's a list of the global types available: http://ogp.me/#types. You can also specify your own types.
<meta property="og:type" content="article" />
Step 8: og:locale
The locale of the resource. You can also use og:locale:alternate if you have other language translations available.
If you don't specify og:locale, it defaults to en_US.
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
Step 9: Twitter
For the best Twitter support read this.
Step 10: Facebook
For the best Facebook support read this.
Step 11: favicon
For the best favicon support for all browsers and devices read this.
Bonus step 12: video/audio
It's also possible to share audio/video. Facebook and twitter for example share videos very well. Read ogp.me.
回答2:
I guess there is no white list in whatsapp, as I found a solution that worked for me. Do as follows. insert 3 meta tags:
<meta property="og:image" content="http://yourimage_with_complete_URL.png"/>
<meta property="og:title" content="Your Title"/>
<meta property="og:description" content="Your description."/>
Your image must be in .png format and 600x600px dimension and must be named 'logo-yoursite.png' (once it worked for me JUST LIKE THAT)
Dont forget to insert the link to whatsapp in your website:
<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>
Do this and you'll be well done!
回答3:
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.
If the problem persists, read also the answer for this similar question
回答4:
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.
回答5:
I've been trying to do this myself as well and I've added all the right meta tags :
<meta property="og:image" itemprop="image" content="image_url" />
<meta property="og:image:url" itemprop="image" content="image_url" />
<meta property="og:image:type" content="image/png" />
but yet could not see the image when sharing my link within WhatsApp.
I've discovered that WhatsApp also does some kind of caching of the image and the url info, dont know for how long.
To check that I've inserted the correct tags, I just tried different url, for example : http://domain.com instead of http://www.domain.com .
hopefully this helps to someone else.
回答6:
After working in a bugg, found out that in IOS, elements in HEAD might stop the WhatsApp search of the og:image /og:description / name=description. So try first to put them on top of everything else.
This doesn't work
<head>
<div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
<meta property="og:description" content="description" />
<meta property="og:image" content="http://cdn.some.com/random.jpg" />
</head>
This work:
<head>
<meta property="og:description" content="description" />
<meta property="og:image" content="http://cdn.some.com/random.jpg" />
<div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
</head>
回答7:
I'd recommend always have a look at https://developers.facebook.com/tools/debug/sharing to validate your properties as Facebook often changes it's policies, compliances and API.
If you work with Messenger bots or other FB apps, you may need the property fb:app_id for link images to work in Whatsapp. More at Facebook developers webmasters site. https://developers.facebook.com/docs/sharing/webmasters
回答8:
I had the same problem, here is to solve.
It should be show up if you add meta og:image
The problem is whatsapp would not show image if you type without http:// and end with / For example, it show up image and description if you type http://google.com/ but not with google.com
Hope it helps someone.
回答9:
You need the following tags to get a WhatsApp image preview:
<meta property="og:title" content="Website name" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://url.com/" />
<meta property="og:description" content="Website description" />
<meta property="og:image" content="image.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />
As Facebook docs says, if you specify the og:image size it will be fetched fastly instead of asynchronously otherwise.
PNG is recommended for image format. 600x600 pixels at least is recommended.
回答10:
If you want to have a picture next to an url from your website someone shared on WhatsApp, you have to put a metatag on the page where the URL links to, like this:
<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>
回答11:
Had same issue, added og:image and it didn't work while the url end with slash sign (/). After removing the slash from the URL - the image get loaded.. Interesting bug...
回答12:
Following actions helped in my case.
Putting image under the same host.
<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />
Passing needed image to WhatsApp specifically by detecting its user agent by leading substring, example
WhatsApp/2.18.380 A
Waiting few seconds before actually pushing send button, so WhatsApp will have time to retrieve image and description from og metadata.
回答13:
Even after these tries. My website images were fetched some times and sometimes not. After validating with https://developers.facebook.com/tools/debug/sharing
realised that my django (python) framework is rendering the image path relatively. I had to make changes to the path of the image with full url. (including http://). then it started working
来源：https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing