Thumbnail and Description are not being Displayed on Whatsapp Preview Link

戏子无情 提交于 2020-08-09 13:58:15

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!