Facebook 分享未显示来自开放图元标记的图像答案

【问题标题】：Facebook share not showing image from open graph metatagsFacebook 分享未显示来自开放图元标记的图像
【发布时间】：2012-01-11 04:38:27
【问题描述】：

我正在尝试将 Facebook 分享按钮集成到我雇主的网站，标题、网址、描述/介绍都正确显示，但是没有附加图像。当共享对话框打开时，图像容器会闪烁然后消失，就好像 facebook 正在尝试处理图像但失败了一样。

我正在使用 og:image 和链接关系来尝试指定用于共享链接的图像：

<meta property="og:image" content="/images/logo_white_150px.png" />
<link rel="image_src" type="image/png" href="/images/logo_white_150px.png" />

该图像过去可以工作（它可以适当地缩放）但不再有效，我还尝试了其他不同大小和格式的图像，但没有成功。

这是我在标题中使用的开放元标记：

<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#" itemscope itemtype="http://schema.org/Article" xmlns:og="http://ogp.me/ns#">
  <head>    
    <meta property="og:type" content="landing page" />
    <meta property="og:title" content="Social Media Test Page" />
    <meta property="og:description" content="This is a page for testing the behavior of social media buttons..." />
    <meta property="og:image" content="/images/logo_white_150px.png" />
    <link rel="image_src" type="image/png" href="/images/logo_white_150px.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:url" content="<%=shortUrl%>" />
    <meta property="og:site_name" content="site name" />
    <meta property="og:medium" content="mult" />
  </head>

这是我在正文开头使用的 JavaScript：

  <body>
    <script type="text/javascript">
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      } (document, 'script', 'facebook-jssdk'));
    </script>
  ...

这是我使用按钮的方式：

  <div class="left" style="text-align: center;">
    <a name="fb_share" type="button" share_url="<%=shortUrl%>">Share</a>
    <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
  </div>

非常感谢任何帮助，在此先感谢
克里斯。

【问题讨论】：

根据我的经验，真正的问题是 cookie。在您的测试之间多次清除缓存，它将起作用。你的代码看起来不错。
Facebook 有一个免费的工具来测试你的网站。

标签： javascript html facebook meta-tags social-media

【解决方案1】：

如果抓取结果一切正常，请尝试使用Facebook Debugger 获取新的抓取信息。

这是因为 Facebook 使用自己的 og:data 缓存。

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
@YPCrumble 虽然这通常是正确的，但它不在这里。该链接链接到一个工具。您不能发布工具。

【解决方案2】：

没有看到您代码中的 HTML 输出，我只能猜测问题所在。不要使用像 <%=shortUrl%> 这样的相对 url，但一定要使用完全限定的 Url....带有 http(s):// 的东西。

另外，http://developers.facebook.com/docs/share/ 表示此分享按钮已被弃用。请改用“赞”按钮：http://developers.facebook.com/docs/reference/plugins/like/

【讨论】：

我知道分享按钮已被弃用，但我的雇主仍然需要它，直到我们推出自定义按钮为止。 shortURL jsp 变量实际上是一个完全限定的 url，我们使用类似于 tinyurl 的 Google 库进行压缩。
也许图像解析器不喜欢重定向？我从来没有试过。但是您可以尝试删除缩短的 url 并将完整的 url 放在 OG 标签中。或者就此而言，在你让它工作之前，硬编码 og:image 标签。
og:image 元标记使用完整路径，我可以使用该 url 在浏览器中直接访问图像
如果 Facebook 的 linter 无法读取完整的、未重定向的 url，我不知道该说什么。
啊，我看到内容现在被正确抓取了，我收到一个警告，应该明确指定 og:url 标签（它是什么？！）但除此之外一切看起来都不错，但会发生相同的行为 - 出现标题、网址和描述，但不显示图像...

【解决方案3】：

根据我的经验：

所有的 URL 都应该是绝对的（甚至是 og:image 值）
如果您的图片通过 https 提供同等服务，您应该添加一个带有绝对 url 的 og:image:secure_url 元属性（如果您仅通过 https 提供所有内容，您可以跳过此步骤）
同时添加 og:image:width 和 og:image:height 元属性

主 url 重定向非常棘手，您应该绝对确保您的内容正确（并且完全）获取，对于复杂的动态内容，我通常最终会在 .htaccess 中进行检测，以便为 FB 的爬虫提供适当的内容，如下所示：

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} facebookexternalhit/[0-9]
RewriteRule ^(.*)$ OG_GENERATOR_SCRIPT_HERE.php [L,QSA]

【讨论】：