基于 Ajax 的网站上的 OpenGraph答案

【问题标题】：OpenGraph on Ajax Based Website基于 Ajax 的网站上的 OpenGraph
【发布时间】：2012-02-12 09:12:30
【问题描述】：

我有一个完全基于 Ajax（哈希导航）的网站。

有没有办法使用 Javascript 刷新基于 ajax 的网站的 Open Graph 元标记？（当我点击一个链接时，标签和那里的值应该改变）

【问题讨论】：

标签： javascript ajax facebook facebook-opengraph

【解决方案1】：

没有。开放图标记必须出现在 HTML 页面上，这些页面可以通过纯 HTTP 获取。

这是因为当用户与 OG 对象交互（例如，执行操作等）时，Facebook 将对 OG URL 执行 HTTP GET，并希望看到标记中返回的 OG 标签。

解决方案是为每个对象创建规范的 URL。这些 URL 包含基本的 HTML 标记，包括 OG 标记。

在对这些 URL 的请求中，如果您看到传入的用户代理字符串包含“facebookexternalhit”，那么您将呈现 HTML。如果你不这样做，你会提供一个 302 重定向到你的 ajax URL。在 ajax URL 上，您的点赞按钮和您发布的任何 OG 操作都应指向规范 URL 对象

例子：

作为用户，我在http://yoursite.com/#!/artists/monet。我点击了一个赞按钮，或者发布了一个动作，但是当你发布这个动作时，赞按钮的 href 参数或对象的 URL 应该是该对象的 Web 可点击的规范 URL - 在这种情况下，可能是 http://yoursite.com/artists/monet

当使用浏览器的用户点击 http://yoursite.com/artists/monet 时，您应该将他们重定向到 http://yoursite.com/#!/artists/monet，但如果传入的用户代理说它是 Facebook 的抓取工具，您只需返回代表艺术家莫奈的标记。

有关真实世界的示例，请参阅都使用此设计模式的 Deezer、Rdio 和 Mog。

【讨论】：

写得很好！
很好的答案，但是当用户在 facebook 框中复制/粘贴`yoursite.com/#!/artists/monet` 时会发生什么？恕我直言，抓取失败是因为他们不知道必须复制/粘贴规范网址。
对我自己的评论做了一些研究，结果如下 ;)
这是错误的！ @bitshiftcop 答案是正确的 - 这是可能的（我自己也验证过）
感谢您的澄清，但仍然需要更多说明：我有这个架构：1）一个网络应用程序允许搜索、可视化和建模 JS d3.js 对象； 2）分享按钮会分享一个url/share?q=title-of-shared-page，并归档一个JS对象对应的JSON模型； 3) 用户点击 url，它将进行 ajax 调用以使用 D3 可视化对象。现在，我不清楚如何添加元素以打开图形，我想“索引”对象以直接打开图形。我应该根据 ajax 请求从烧瓶服务器提供元元素吗？我应该从 ajax 填充 meta 吗？

【解决方案2】：

更多调查得出以下结论：

假设您使用如下所示的哈希创建了一个应用程序：

http://yoursite.com/#/artists/monet

Facebook 抓取工具会在没有 /#/artists/monet 部分的情况下调用您的网址。这是一个问题，因为您无法知道必须将哪些信息解析到meta og: tags。

然后按照西蒙所说的对建议的网址进行相同的尝试：

http://yoursite.com/#!/artists/monet

现在您会注意到 Facebook 抓取工具尊重 google ajax specifications，它会将 #! 转换为 ?_escaped_fragment_=，因此 URL 如下所示：

http://yoursite.com/?_escaped_fragment_=/artists/monet

您可以使用 facebook 调试器自行检查：https://developers.facebook.com/tools/debug

将 php 脚本上传到您的服务器
转到 facebook 调试器
输入带有/#/ 部分的网址
点击“查看我们的抓取工具为您的 URL 看到的确切内容” - 没有哈希片段
用/#!/再次输入网址
点击“查看我们的抓取工具为您的 URL 看到的确切内容” - 哈希片段已转为
?_escaped_fragment_=

脚本

<html>
  <head>
    <title>Scraping</title>
  </head>
  <body>
    <?
      print_r($_SERVER);
    ?>
  </body>
</html>

或总结：始终使用/#!/（hashbang）深度链接；）

【讨论】：

感谢您提供更多信息。对我正在处理的 w 问题真的很有帮助。
这个答案应该被标记为正确答案（！）
@polyclick 和 Yaron 我在 Simon 的回答中添加了一条评论，如果您能澄清是否需要使用 hashbang 重写重定向以及设置是否足以将 og:tags 索引到 html，我将不胜感激对应于 JSON 对象的 D3 可视化的对象 - 或者我将打开另一个问题。
这已被弃用 webmasters.googleblog.com/2015/10/…

【解决方案3】：

我进行了一个似乎有效的快速测试。取决于 FB 刮板不运行 JavaScript 的事实。

由于我的大多数网站都是没有服务器逻辑的静态单页应用程序，因此我可以使用 Grunt 和 Gulp 等工具快速生成静态页面。

如果你分享http://wh-share-test.s3-website-eu-west-1.amazonaws.com/test

Facebook 将抓取测试页面的元标记，当用户单击 JS 重定向到 /#/test 的链接时，我的单页应用程序会做出反应并呈现正确的视图。

看起来很老套，但很有效；

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>This is a shared item</title>
</head>
<body>
    <h1>This is a shared item page.</h1>
    <script>
        var path = window.location.pathname;
        window.location = '/#' + path;
    </script>
</body>
</html>

【讨论】：