基于Ajax的网站上的OpenGraph [英] OpenGraph on Ajax Based Website

问题描述

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

有没有办法刷新基于Ajax的网站的Open Graph元标记使用Javascript？
（当我点击链接，标签，并且值应该更改）

解决方案

否。必须在HTML页面上显示打开图形标记，该HTML页面可以使用纯HTTP进行GET。

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

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

对这些URL的请求，如果您看到包含'facebookexternalhit'的传入的用户角色字符串，那么您将呈现HTML。如果不这样做，您会发送一个302，重定向到您的ajax网址。在ajax网址上，您喜欢的按钮和您发布的任何OG操作都应指向规范的URL对象

示例：

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

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

对于现实世界的示例，请参阅所有使用此设计模式的Deezer，Rdio和Mog。 >

I have a Website, which is Fully Ajax-Based (Hash Navigation).

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)

解决方案

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.

这篇关于基于Ajax的网站上的OpenGraph的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！