基于 Ajax 的网站上的 OpenGraph
我有一个完全基于 Ajax 的网站（哈希导航）。
有没有办法使用 Javascript 刷新基于 ajax 的网站的开放图元标签？ （当我单击链接时，标签和值应该更改）
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
我有一个完全基于 Ajax 的网站（哈希导航）。
有没有办法使用 Javascript 刷新基于 ajax 的网站的开放图元标签？ （当我单击链接时，标签和值应该更改）
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论（3）
不可以。Open Graph 标记必须出现在使用纯 HTTP 进行 GETable 的 HTML 页面上。
这是因为当用户与 OG 对象交互时（例如，执行操作等），Facebook 将对 OG URL 执行 HTTP GET，并期望看到标记中返回的 OG 标签。
解决方案是为每个对象创建规范的 URL。这些 URL 包含基本 HTML 标记，包括 OG 标记。
在对这些 URL 的请求中，如果您看到传入的 useragent 字符串包含“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，他们都使用此设计模式。
No. Open Graph markup must be present on HTML pages which are GETable with pure 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.
The solution is to create canonical URLs for each of your objects. These URLs contain basic HTML markup including OG tags.
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
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
When a user using a browser hits http://yoursite.com/artists/monet you 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.
For real world examples, see Deezer, Rdio and Mog who all use this design pattern.
进一步的调查会得出以下结果：
假设您创建了一个具有如下所示哈希的应用程序：
Facebook 抓取工具将调用您的网址，而无需
/#/artists/monet部分。这是一个问题，因为您无法知道必须将哪些信息解析到meta og: 标签中。然后尝试使用西蒙所说的建议网址进行相同的操作：
现在您会注意到 Facebook 抓取工具遵循 google ajax 规范，它会将
#!转换为?_escaped_fragment_=，因此 URL 如下所示：您可以查看以下内容：你自己使用 facebook 调试器： https://developers.facebook.com/tools/debug
/#/部分的 url/ 再次输入 url #!/?_escaped_fragment_=脚本
或者总结：始终使用
/#!/(hashbang) 深层链接 ;)A little bit more investigation lead to the following findings:
Let's say you made an application with a hash that looks like this:
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 themeta og: tags.Then try the same with the suggested url as Simon says:
Now you'll notice that the Facebook scraper is respecting the google ajax specifications and it will convert the
#!to?_escaped_fragment_=so the URL looks like this:You can check this out for yourself with the facebook debugger: https://developers.facebook.com/tools/debug
/#/part/#!/?_escaped_fragment_=The script
Or summarized: always use
/#!/(hashbang) deeplinks ;)我进行了一个快速测试，似乎有效。取决于 FB 抓取工具不运行 JavaScript。
由于我的大多数网站都是静态单页应用程序，没有服务器逻辑，因此我可以使用 Grunt 和 Gulp 等工具快速生成静态页面。
如果您共享 http://wh-share-test。 s3-website-eu-west-1.amazonaws.com/test
当用户单击 JS 重定向到 /#/test 的链接以便我的单页应用程序做出反应时，Facebook 将抓取测试页面元标记提出正确的观点。
看起来很老套，但很有效；
I ran a quick test that seems to work. Dependant on the fact the FB scraper doesn't run 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.
If you Share 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.
Seems hacky but works;