javascript 基于 Ajax 的网站上的 OpenGraph
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8896773/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
OpenGraph on Ajax Based Website
提问by C.E.
I have a Website, which is Fully Ajax-Based (Hash Navigation).
我有一个完全基于 Ajax（哈希导航）的网站。
Is there a way to refresh Open Graph meta-tags for ajax-based websites using Javascript? (When I Click on a link, the Tags, and there values should Change)
有没有办法使用 Javascript 刷新基于 ajax 的网站的 Open Graph 元标记？（当我点击链接时，标签和那里的值应该改变）
回答by Simon Cross
No. Open Graph markup must be present on HTML pages which are GETable with pure HTTP.
不可以。Open Graph 标记必须存在于 HTML 页面上，这些页面可以通过纯 HTTP 获取。
This is because when a user interacts with an OG object (like, performs an action etc) Facebook will perform an HTTP GET on the OG URL, and expect to see OG tags returned in the markup.
这是因为当用户与 OG 对象交互（例如，执行操作等）时，Facebook 将对 OG URL 执行 HTTP GET，并期望看到标记中返回的 OG 标签。
The solution is to create canonical URLs for each of your objects. These URLs contain basic HTML markup including OG tags.
解决方案是为每个对象创建规范 URL。这些 URL 包含基本的 HTML 标记，包括 OG 标签。
On requests to these URLs, if you see the incoming useragent string containing 'facebookexternalhit' then you render the HTML. If you don't, you serve a 302 which redirects to your ajax URL. On the ajax URLs, your like buttons and any OG actions you publish should point to the canonical URL object
在对这些 URL 的请求中，如果您看到传入的 useragent 字符串包含“facebookexternalhit”，那么您将呈现 HTML。如果你不这样做，你会提供一个 302 重定向到你的 ajax URL。在 ajax URL 上，你喜欢的按钮和你发布的任何 OG 操作都应该指向规范的 URL 对象
Example:
例子：
As a user, I'm on http://yoursite.com/#!/artists/monet. I click a like button, or publish an action, but the like button's href parameter, or the URL of the object when you post the action should be a web hittable canonical URL for the object - in this case, perhaps http://yoursite.com/artists/monet
作为用户，我在http://yoursite.com/#!/artists/monet 上。我点击了一个赞按钮，或者发布了一个动作，但是赞按钮的 href 参数，或者当你发布动作时对象的 URL 应该是对象的网络可点击规范 URL - 在这种情况下，可能是http://yoursite .com/艺术家/莫奈
When a user using a browser hits http://yoursite.com/artists/monetyou should redirect them to http://yoursite.com/#!/artists/monet, but if the incoming useragent says it is Facebook's scraper, you just return markup which represents the artist Monet.
当使用浏览器的用户点击http://yoursite.com/artists/monet你应该重定向到http://yoursite.com/#!/artists/monet，但如果输入用户代理说，这是Facebook的刮板，你只需返回代表艺术家莫奈的标记即可。
For real world examples, see Deezer, Rdio and Mog who all use this design pattern.
有关真实世界的示例，请参阅都使用此设计模式的 Deezer、Rdio 和 Mog。
回答by polyclick
A little bit more investigation lead to the following findings:
多一点调查导致以下发现：
Let's say you made an application with a hash that looks like this:
假设您使用如下所示的哈希创建了一个应用程序：
http://yoursite.com/#/artists/monet
The Facebook scraper will call your url without the /#/artists/monetpart. This is a problem because you have no way of knowing what information you have to parse into the meta og: tags.
Facebook 抓取工具会在没有该/#/artists/monet部分的情况下调用您的网址。这是一个问题，因为您无法知道必须将哪些信息解析为meta og: tags.
Then try the same with the suggested url as Simon says:
然后像西蒙所说的那样尝试使用建议的网址：
http://yoursite.com/#!/artists/monet
Now you'll notice that the Facebook scraper is respecting the google ajax specificationsand it will convert the #!to ?_escaped_fragment_=so the URL looks like this:
现在您会注意到 Facebook 抓取工具遵循google ajax 规范，它将转换为#!，?_escaped_fragment_=因此 URL 如下所示：
http://yoursite.com/?_escaped_fragment_=/artists/monet
You can check this out for yourself with the facebook debugger: https://developers.facebook.com/tools/debug
您可以使用 facebook 调试器自行检查：https: //developers.facebook.com/tools/debug
- upload the php script to your server
- go to the facebook debugger
- enter the url with the
/#/part - click 'See exactly what our scraper sees for your URL' - no hash fragment
- enter the url again with
/#!/ - click 'See exactly what our scraper sees for your URL' - hash fragment has been turned to
?_escaped_fragment_=
- 将 php 脚本上传到您的服务器
- 转到 Facebook 调试器
- 输入带有
/#/零件的网址 - 单击“准确查看我们的抓取工具为您的 URL 看到的内容”- 没有哈希片段
- 再次输入网址
/#!/ - 单击“准确查看我们的抓取工具为您的 URL 看到的内容” - 哈希片段已转换为
?_escaped_fragment_=
The script
剧本
<html>
<head>
<title>Scraping</title>
</head>
<body>
<?
print_r($_SERVER);
?>
</body>
</html>
Or summarized: always use /#!/(hashbang) deeplinks ;)
或总结：始终使用/#!/（hashbang）深层链接；）
回答by Will Hancock
I ran a quick test that seems to work. Dependant on the fact the FB scraper doesn't run JavaScript.
我运行了一个似乎有效的快速测试。取决于 FB 刮板不运行 JavaScript 的事实。
As most of my sites are static Single Page Apps with no server logic, I can generate the static pages quickly with tools such as Grunt and Gulp.
由于我的大多数站点都是没有服务器逻辑的静态单页应用程序，因此我可以使用 Grunt 和 Gulp 等工具快速生成静态页面。
If you Share http://wh-share-test.s3-website-eu-west-1.amazonaws.com/test
如果您分享http://wh-share-test.s3-website-eu-west-1.amazonaws.com/test
Facebook will scrape the test page meta tags, when a user clicks the link the JS redirects to /#/test for my single page app to react and present the correct view.
Facebook 将抓取测试页元标记，当用户单击 JS 重定向到 /#/test 的链接时，我的单页应用程序会做出反应并呈现正确的视图。
Seems hacky but works;
看起来很笨，但有效；
<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>
