Question

已经有人问了几次这个问题 Provide an image for WhatsApp link sharing

我也发现此链接http://tekinfotree.blogspot.com.es/2016/06/how-to-display-thumbnail-preview-link.html 说“元标记属性og：图像足以获取缩略图。”

在页面上，我们已经有了og：图像，但是，通过WhatsApp发送文章时，图像不会出现。任何线索可能是什么原因？

元标记位于页面的head标记中。

<meta property="og:image" content="http://picture-url.jpg"/>
<meta property="og:url" content="https://article-url.html"/>
<meta property="og:title" content="ARTICLE_TITLE"/>
<meta property="og:description" content="PARTICLE_DESCRIPTION" />
<meta property="og:locale" content="es_ES"/>
<meta property="og:site_name" content=""/>

谢谢！

Answer 1

请检查预览图像的尺寸。我的图片大小为700x500像素，没有Whatsapp预览（Facebook和Skype正确显示）。将其设置为300x300像素后，Whatsapp将成功预览。

Answer 2

对于我的网页，当我在WhatsApp上共享链接时，我试图包括图像预览缩略图，这花费了很多时间来解决问题。终于使用以下8个html标签使其工作了：

在 <head> 标签中：

<meta property="og:title" content="ABC Blabla 2020 Friday" />
<meta property="og:url" content="https://bla123.neocities.org/mp/friday.html" />
<meta property="og:description" content="Photo Album">
<meta property="og:image" itemprop="image" content="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG"/>
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_GB" />

在 <body> 标签中：

<link itemprop="thumbnailUrl" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">

<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">
</span>

这8个标签（头部6个，身体2个）效果很好。

提示：

1。使用确切的图片位置网址代替目录格式，即，不要使用images / OG_thumb.jpg

2。区分大小写的文件扩展名：如果您的托管服务提供商上的图像扩展名是“ .JPG”，则不要使用“ .jpg”或“ .jpeg”。我观察到基于托管服务提供商和浏览器组合的错误可能或可能不会发生，因此，为了安全起见，更容易匹配文件扩展名的大小写。

3。完成上述步骤后，如果缩略图预览仍未显示在WhatsApp消息中，则：

a。强制停止移动应用（我曾在Android中尝试过），然后重试

b。使用在线工具预览OG标签，例如，我曾经使用过https://searchenginereports.net/open-graph-checker

c。在移动浏览器中，将直接链接粘贴到OG拇指，并刷新浏览器4-5次。例如https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

在WhatsApp上共享链接时包含图像

2 个答案: