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

Question

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

（LinkedIn 正在提取页面上的前三个 gif，而不是指定的 jpg，如果这有什么不同的话。但是 Facebook 也没有提取正确的图像，所以这似乎不是问题。）

footer中的

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 for clearing cached entries. LinkedIn caches social meta data for 7 days。您可以通过添加查询参数来欺骗 LinkedIn 重新扫描页面，但不幸的是，没有官方的方法来破坏 LinkedIn 缓存。

正确的标签

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

服务器和环境

您是否在本地 and/or 测试环境中工作？

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

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

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

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

share page on social media - image thumbnail incorrect

html

social-media

jekyll