Provide an image for WhatsApp link sharing

Question

How can we include an image in our website to display in WhatsApp when we share a link like this

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

Following actions helped in my case   Putting image under the same host    lt meta property  og url  content  https   www same-host com whatsapp-image png    gt    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

User · Answer

I ve been trying to do this myself as well and I ve added all the right meta tags     lt meta property  og image  itemprop  image  content  image url    gt   lt meta property  og image url  itemprop  image  content  image url    gt   lt meta property  og image type  content  image png    gt    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

User · Answer

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

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   lt meta property  og image  content  https   www link com facebook png    gt   lt meta property  og image type  content  image png    gt   lt meta property  og image width  content  1200    gt   lt meta property  og image height  content  630    gt     lt meta property  og image  content  https   www link com whatsapp png    gt   lt meta property  og image type  content  image png    gt   lt meta property  og image width  content  400    gt   lt meta property  og image height  content  400    gt    https   roei stream 2018 11 18 ideal-open-graph-image-size-for-whatsapp-link-share   https   css-tricks com essential-meta-tags-social-media

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    If the problem persists  read also the answer for this similar question

User · Answer

I attempted several suggestions under this thread and from my external searches but it was a whole other problem for me  My specific instruction to use an image indicated by the og image tag was being overridden by the open graph tags supplied by the Jetpack plugin  you can find my detailed answer here  However  I thought it worth to add the steps in brief on this more-followed thread  Hope this helps someone   The Facebook Sharing Debugger helped me identify the root cause and from there  I followed these steps    Debug your website using the debugger above  Simply type in the URL and hit debug  This should give you a list of warnings and once you scroll down to the open graph tags sections  you will be able to see the values that are being fetched for your website  The one to focus on is the og image tag  Scroll further down to the  See exactly what our scraper sees for your URL  link and search for the og image tag to find the villain in your story  Now simply  opt the means to remove an override that is occurring  In my case  I found the following function helpful  It changes the default image used any time Jetpack can not determine an image to use    It changes the default image used any time Jetpack can not determine an image to use  function custom jetpack default image         return  YOUR IMAGE URL     add filter   jetpack open graph image default    custom jetpack default image       I should add that the image parameters such as minimum 300px x 200px and size  lt  300 KB are recommended  And please follow these instructions if such general instructions do not work for you  because  then it is most likely that your issue is similar to mine  Also  sometimes the simplest solution may just be to remove the plugin  provided you verify that you can do without it    At the end you should be able to see something like -   Hope this helps   NS

User · Answer

In our case  the issue was that the og image URL did not include a file extension   jpg   We are using Cloudinary  and in their case file extensions in the image URLs are not required  Once we added the  jpg to the image URL  the image started showing up in the Whatsapp previews

User · Answer

In case someone is looking for a way to display preview using WhatsApp API  With including the image in your meta tags on your website you would need to set the preview url true  Sending URLs in Text Messages By default  the mobile WhatsApp application recognizes URLs and makes them clickable  To include a URL preview  include  quot preview url quot   true in the message body and make sure the URL begins with http    or https     A hostname is required  IP addresses are not matched  The majority of the time when you send a URL  whether with a preview or not  the receiver of the message will see a URL that they can click on  URL previews will only be rendered after one of the following has happened   The business has sent a message template to the user  The userinitiates a conversation with a  quot click to chat quot  link  The user adds the business phone number to their address book and initiates a conversation

User · Answer

2020 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  quot please note quot  section starts all over again   Step 1  title Maximum of 65 characters  lt title gt your keyword rich title of the website and or webpage lt  title gt    Step 2  description Maximum of 155 characters  lt meta name  quot description quot  content  quot description of your website webpage  make sure you use keywords  quot  gt    Step 3  og title Maximum 35 characters  lt meta property  quot og title quot  content  quot short title of your website webpage quot    gt    Step 4  og url Full link to the current webpage address  lt meta property  quot og url quot  content  quot https   www example com webpage  quot    gt    Step 5  og description Maximum 65 characters  lt meta property  quot og description quot  content  quot description of your website webpage quot  gt    Step 6  og image Image JPG or PNG  with a size less than 300KB and minimum dimensions of 300 x 200    This image should be served via a HTTPS connection with a valid non-self-signed certificate   lt meta property  quot og image quot  content  quot   cdn example com uploads images webpage 300x200 png quot  gt      RichDeBourke mentioned this to me  but apparently WhatsApp has increased its maximum image size  dimensions as well as file size   I did some tests  it does not work consistently every time on every device  I tested 2 x Mb images and even that seemed to work 9 10 times   lt 300KB is the safest approach  but you should be fine using larger images as of 18-02-2020  I would recommend keeping the file size below 2MB  though  And definitely throw your image through TinyPNG or any other image compression algorithm if you haven t already    If you completed the steps above  you can now see your preview in WhatsApp  However  be aware of the  quot please note quot  section above    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   lt meta property  quot og type quot  content  quot article quot    gt    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   lt meta property  quot og locale quot  content  quot en GB quot    gt   lt meta property  quot og locale alternate quot  content  quot fr FR quot    gt   lt meta property  quot og locale alternate quot  content  quot es ES quot    gt    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

User · Answer

Since at this point this question is almost a support group for people who suffer with various reasons on why WhatsApp wouldn t load the image preview  here s what was the root cause for my case  hoping it may help someone eventually  Make sure the meta tag og image content link is using HTTPS When I made my website available through https  I forgot to specifically change the meta tags from http to https  Every other social media preview handled the image regardless  except for WhatsApp  Simply making it https fixed it for me

User · Answer

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    lt meta property  og image  content  http   unrestrictedstock com wp-content uploads Unrestricted-Stock-Small png   gt

User · Answer

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

User · Answer

After looking through lot of answers and yet unable to fix the issue  I finally got it working after lot of iterations  Here is the exact code I used  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

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

User · Answer

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

User · Answer

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    lt head gt       lt div id  hidden  style  display none   gt  lt img src  http   cdn some com random jpg  gt  lt  div gt        lt meta property  og description  content  description    gt       lt meta property  og image  content  http   cdn some com random jpg    gt   lt  head gt       This work         lt head gt           lt meta property  og description  content  description    gt           lt meta property  og image  content  http   cdn some com random jpg    gt            lt div id  hidden  style  display none   gt  lt img src  http   cdn some com random jpg  gt  lt  div gt       lt  head gt

User · Answer

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    lt meta property  og image  content  http   yourimage with complete URL png   gt     lt meta property  og title  content  Your Title   gt     lt meta property  og description  content  Your description    gt      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    lt a href  whatsapp   send text Text to send withe message  http   www yoursite com  gt whatsApp lt  a gt    Do this and you ll be well done

User · Answer

Adding my 2 cents on this topic after loosing 4h  I m coding a vue app that s compiled with webpack  By default Webpack minifies the HTML  and does it like a butcher  It removes the double quotes from many  attributes  And Whatsapp hates that   It just skips  field not properly formated with quotes around attributes  values  Turn off the minifaction of your index and things will be fine   Here s how with Vue-CLI  add this on the vue config js file       module exports           chainWebpack  config   gt            config plugin  html              tap args   gt                args 0  minify   false             return args                       from   https   github com vuejs vue-cli issues 4328 issuecomment-595682922

User · Answer

You need the following tags to get a WhatsApp image preview    lt meta property  og title  content  Website name    gt   lt meta property  og type  content  website    gt   lt meta property  og url  content  https   url com     gt   lt meta property  og description  content  Website description    gt   lt meta property  og image  content  image png    gt   lt meta property  og image width  content  600    gt   lt meta property  og image height  content  600    gt    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

User · Answer

I would like to add an answer to this thread to specifically mention which of the above threads helped me solve the issue and the order in which they can be followed to properly understand the root cause and fix it once and for all   I was able to get my rich preview while sharing the link on social media with this solution   I followed various options in this thread and below are the closest to the right answer and they all contributed to the end result    Tags required  Main tag to focus on - og image  Image parameters Tool that will definitely help How to correctly give the image path Root cause and solution   This will hopefully save someone the time needed to scroll through and find the right set of answers and the effort required for all the trial and errors

User · Answer

I would like to draw attention to the fact that a simple  lt meta property  og image  content  image png    gt   as suggested somewhere above  does not work for me  this in fact had me in a loop for weeks now   What works is either an absolute URL   lt meta property  og image  content  https   domainname com image png    gt     or starting out with a slash  if the image is in the root directory    lt meta property  og image  content   image png    gt    I would have added this as a comment  but I m not allowed to yet  Moderators feel free to move this if more appropriate

[html] Provide an image for WhatsApp link sharing

Examples related to html

Examples related to meta-tags

Examples related to whatsapp

Examples related to facebook-opengraph