基于Ajax的OpenGraph网站

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

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

来源

2012-01-17 C.E.

编号开放图标记必须存在于纯HTTP的GET页面上。

这是因为当用户与OG对象进行交互（如执行动作等）时，Facebook将在OG URL上执行HTTP GET，并期望在标记中看到OG标记。

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

对这些URL的请求，如果您看到包含'facebookexternalhit'的传入useragent字符串，则呈现HTML。如果你不这样做，你会提供一个302重定向到你的ajax URL。在AJAX网址，你喜欢按钮和发布应指向规范网址对象

例任何OG操作：

作为一个用户，我对http://yoursite.com/#!/artists/monet。我点击一个类似按钮，或者当您发布的行动应该是该对象的网络hittable规范URL发布的行动，但类似按钮的href参数，或对象的URL - 在这种情况下，也许http://yoursite.com/artists/monet

当使用浏览器的用户点击http://yoursite.com/artists/monet时，您应该将其重定向到http://yoursite.com/#!/artists/monet，但如果传入的useragent表示它是Facebook的刮板，则只需返回代表艺术家Monet的标记。

有关真实世界的例子，请参阅Deezer，Rdio和Mog，他们都使用这种设计模式。

来源

2012-01-17 15:17:25

写得非常好的回复！ – DMCS

非常感谢您的回答！ –

很好的答案，但是当用户在facebook框中复制/粘贴'http：//yoursite.com/#！/ artists/monet'时会发生什么？ Imho抓取失败是因为他们不知道他们必须复制/粘贴规范网址。 – polyclick

多一点点的调查导致以下结果：

比方说，你做一个哈希看起来像这样的应用程序：

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

Facebook的刮板将打电话给你的网址不/#/artists/monet部分。这是一个问题，因为你无法知道你需要解析什么信息到meta og: tags。

然后尝试用建议的URL西蒙一样说：

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）深层链接;）

来源

2013-02-22 12:59:29 polyclick

感谢您的额外信息。真的有用我正在研究的w问题。 – TobyG

这个答案应该被标记为正确答案（！） –

@polyclick和Yaron我在Simon的回答中添加了一条评论，如果能够澄清是否需要用hashbang重写redriect并且如果设置足以满足索引'og：tags'到与JSON对象D3的可视化相对应的html对象 - 或者我会打开另一个问题。 – user305883

我跑了一个快速的测试，似乎工作。取决于FB scraper不运行JavaScript的事实。

由于大部分我的网站都是静态的单页应用程序没有服务器的逻辑，我可以快速的工具，如步兵和咕嘟咕嘟生成静态页面。

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

Facebook将刮测试页面meta标签，当用户点击的JS重定向到/＃/测试的链接，我的单页的应用程序作出反应，并提出正确的观点。

似乎哈克，但工程;

<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>

来源

2016-05-17 16:35:21

基于Ajax的OpenGraph网站

回答

相关问题