Menu
I know there are similar questions about this here and here.
I have done the mandatory steps of 2020 standard from those links but description and thumbnail are still not being displayed on WhatsApp.
The link that I have been testing is: https://research.verdhana.id/TEST
My website is already secured by SSL with valid SSL certificate (not self-signed). The thumbnail is a JPEG image with size of 18KB and 400x400 dimension.
I use Vue.js and I do not use server side rendering, so I put all the mandatory meta tags inside index.html so they can be read by crawler even javascript is not executed.
The og:image tag already uses full path and same domain. The og:url meta tag will always be the same for any URL path because it is written in the index.html, but I think it should not be a problem.
Here are the tags inside head tag:
<head>
<meta property="fb:app_id" content="my_fb_id" />
<meta property="og:image" content="https://research.verdhana.id/logo.jpg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
<meta property="og:title" content="Verdhana | Research" />
<meta property="og:description" content="Verdhana research website" />
<meta property="og:url" content="https://research.verdhana.id" />
<meta property="og:site_name" content="Verdhana | Research" />
<meta property="og:type" content="website" />
<link rel="shortcut icon" href="<%= BASE_URL %>logo.ico" />
<link rel="icon" href="<%= BASE_URL %>logo.ico" />
<title>Verdhana | Research</title>
<meta name="description" content="Verdhana research website" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css" />
</head>
My website description and thumbnail are still not shown by WhatsApp like you can see below.
I tried to get preview on Facebook Debugger and iframely and both of them show the description and thumbnail.
EDIT: I have added fb:app_id tag but still not showing.
Are there any missing steps I need to do?
357
Just tried it with my WhatsApp and it's working fine for me:
155
Probably does not apply in case of the OP, but dumping this answer here for others with a similar issue.
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.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
