基于Ajax的网站上的OpenGraph

Question

我有一个网站,它是完全基于Ajax的(哈希导航).

有没有办法使用Javascript为基于Ajax的网站刷新Open Graph元标记？(当我点击链接时,标签,那里的值应该改变)

Answer 1

不可以.在使用纯HTTP GETable的HTML页面上必须存在Open Graph标记.

这是因为当用户与OG对象交互时(比如,执行操作等),Facebook将在OG URL上执行HTTP GET,并期望看到标记中返回的OG标记.

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

在对这些URL的请求中,如果您看到包含"facebookexternalhit"的传入useragent字符串,则呈现HTML.如果不这样做,则提供302重定向到您的ajax URL.在ajax URL上,您发布的类似按钮和任何OG操作应指向规范URL对象

例:

作为用户,我在http://yoursite.com/#!/artists/monet.我点击了一个类似的按钮,或者发布了一个动作,但是喜欢按钮的href参数,或者你发布动作时对象的URL应该是对象的web hittable规范URL - 在这种情况下,也许是http:// yoursite .COM /艺术家/莫奈

当使用浏览器的用户点击http://yoursite.com/artists/monet时,您应该将它们重定向到http://yoursite.com/#!/artists/monet,但如果传入的用户表示它是Facebook的刮刀,那么只返回代表艺术家莫奈的标记.

对于现实世界的例子,请看Deezer,Rdio和Mog都使用这种设计模式.

Answer 2

多一点调查导致以下发现:

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

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

Facebook刮刀将在没有/#/artists/monet零件的情况下调用您的URL .这是一个问题,因为你无法知道你需要解析哪些信息meta og: tags.

然后像西蒙所说的那样尝试使用建议的网址:

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

现在你会注意到Facebook刮刀正在尊重google ajax规范并且会将其转换#!为?_escaped_fragment_=所以URL如下所示:

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

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

剧本

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

或者总结:总是使用/#!/(hashbang)deeplinks;)

这个答案应该被标记为正确的答案(!) (2认同)
这已被弃用https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html (2认同)