我正试图在 WhatsApp 上显示链接预览,它可以在 iOS 和 Windows 上运作,但在 Android 上无法工作。我尝试了所有应该在 <head> 标签中出现的 meta 标签,但还是行不通。我有什么遗漏吗?
我正试图在 WhatsApp 上显示链接预览,它可以在 iOS 和 Windows 上运作,但在 Android 上无法工作。我尝试了所有应该在 <head> 标签中出现的 meta 标签,但还是行不通。我有什么遗漏吗?
好的,您应该使用元标签,有时更改需要一些时间,因此您需要等待。
标题
<meta property="og:title" content="title in here" />
描述
<meta property="og:description" content="description in here">
图像
<meta property="og:image" content="image in here">
URL
<meta property="og:url" content="url in here" />
注:在 WhatsApp 上,只有将 URL 复制并粘贴到聊天中才会生效。
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个在head里,2个在body里)完美地工作了。
提示:
1.使用精确的图像地址URL,而非目录格式,即不要使用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
我也曾遇到同样的问题。但是,我找到了解决办法。
在你的链接中使用"http://"或"https://"。这将会使Android Whatsapp自动显示缩略图。
以下链接的缩略图不会出现。
www.example.com
正确使用方法
<https://www.example.com>
Android版Whatsapp中自动显示网站缩略图。