logo标签列表

Facebook分享未显示来自开放图形元标记的图片。

javascripthtmlfacebookmeta-tagssocial-media
13
我正在尝试将 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>

这是我在 body 开始处使用的 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>

非常感谢任何帮助，提前致谢
Chris。

1
根据我的经验，实际问题是由于cookie引起的。在测试之间多次清除缓存，这样就能解决了。你的代码看起来很好。 - Leonidas
Fb有一个免费的工具来测试您的网站。 - user5306470
3个回答
1
如果抓取结果没有问题，尝试使用Facebook调试器获取新的抓取信息。
这是因为Facebook会使用自己的缓存来存储og:data。
1
虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。- 来自审查 - YPCrumble
1
@YPCrumble 虽然通常是正确的，但这里不是。该链接链接到一个工具。您不能发布工具。 - user5306470
0
我知道分享按钮已经被弃用了，但我的雇主希望在我们推出自定义“喜欢”按钮之前仍然保留它。shortURL jsp变量实际上是一个完全限定的URL，我们使用类似于tinyurl的Google库进行压缩。 - cgrantham
1
也许图像解析器不喜欢重定向？我从未尝试过。但是您可以尝试删除缩短的URL，将完整的URL放在OG标签中。或者说，在您使其正常工作之前，硬编码og:image标签。 - DMCS
1
og:image 元标记使用完整路径，我可以使用该 URL 直接在浏览器中访问图像。 - cgrantham
如果Facebook的linter无法读取完整的未重定向URL，我不知道该说什么。 - DMCS
啊，我看到内容现在被正确地抓取了，但我收到一个警告，说应该明确指定og:url标签（它已经指定了？！）但除此之外，一切看起来都很好，尽管出现了相同的行为——标题、URL和描述出现了，但图片没有出现... - cgrantham
0

根据我的经验：

  • 所有的URL都应该是绝对路径（即使是og:image的值）
  • 如果您的图像同样通过https提供，则还应添加一个og:image:secure_url元属性，其绝对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]
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接