问题
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?
回答1:
Just tried it with my WhatsApp and it's working fine for me:
来源:https://stackoverflow.com/questions/63094924/thumbnail-and-description-are-not-being-displayed-on-whatsapp-preview-link