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

Question

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

(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#"。

服务器和环境

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

确保您的服务器可以被 Facebook 的爬虫访问。检查您的 robots.txt。 Facebook 的Debugger Tool可能会向您显示错误以提供帮助。

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

如果一切都失败了，请查看 Facebook 的选项See exactly what our scraper sees for your URL。这将向您显示 Facebook 看到的 HTML。 截图: