在社交媒体上分享页面 - 图片缩略图不正确

Question

我已将社交媒体共享链接添加到我的网站页脚和元标记到我的头文件，但我无法显示正确的图像 - Facebook和LinkedIn都从页面中提取图像，而不是我在meta标签中指定的那个。

（LinkedIn正在拉动页面上的前三个GIF，而不是指定的jpg，如果这有任何区别。但Facebook也没有拉出正确的图像，所以这似乎不是问题的根源。）

页脚中的HTML如下（使用Jekyll和Liquid）：

<ul>
  <li><a href="https://facebook.com/sharer.php?u={{site.url}}{{page.url}}" rel="nofollow" target="_blank" title="Share on Facebook">Facebook</a></li>
  <li><a href="https://twitter.com/intent/tweet?&url={{ site.url }}{{ page.url }}" rel="nofollow" target="Tweet" title="Share on Twitter">Twitter</a></li>
  <li><a href="http://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url }}&title={{page.title}}" rel="nofollow" target="_blank" title="Share on LinkedIn">LinkedIn</a></li>
</ul>

头部的元标记：

<meta prefix="og: http://ogp.me/ns#" property="og:title" content="{{ page.title }}" />
<meta prefix="og: http://ogp.me/ns#" property="og:type" content="website" />
<meta prefix="og: http://ogp.me/ns#" property="og:image" content="http://placekitten.com/g/300/400" />
<meta prefix="og: http://ogp.me/ns#" property="og:url" content="{{ site.url }}{{page.url}}" />

任何人都可以指出我做错了什么吗？我已经为元标记添加了前缀，我尝试了不同的图像，我浏览了Facebook共享调试器（https://developers.facebook.com/tools/debug/），但是所有内容都不断提取错误的图像。

谢谢！

Answer 1

Facebook / LinkedIn可能没有抓取最新的元数据有很多原因。

<强>缓存。

Facebook可能存储了以前刮过您网站的元数据。 Facebook提供了许多工具，例如用于清除缓存条目的Batch Cache Invalidator。 LinkedIn缓存社交元数据for 7 days。您可以通过添加查询参数来欺骗LinkedIn重新扫描页面，但不幸的是，没有正式的方法可以打破LinkedIn缓存。

正确的标签

确保您的代码正确无误。 Open Graph Protocol提供了一组要遵循的文档。例如：您不需要在每个元标记上定义prefix="og: http://ogp.me/ns#"。

服务器＆amp;环境

您是否在本地和/或测试环境中工作？

确保Facebook的抓取工具可以访问您的服务器。检查您的robots.txt。 Facebook的Debugger Tool可能会向您显示错误。

确保它正在抓取正确的页面。由于您的og:url属性已定义，我在过去遇到过错误，其中爬虫正在访问您的生产网站。在Canonical URL部分的Facebook的Crawler文档中阅读更多内容。

如果所有其他方法都失败，请参阅Facebook的See exactly what our scraper sees for your URL选项。这将显示Facebook看到的HTML。 截图：