blocks|key|3864050|text|不是的。开放图形标记必须出现在超文本标记语言页面，这是GETable与纯超文本传输协议。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3864051|这是因为当用户与OG对象交互(例如，执行操作等)时，Facebook将在OG+URL上执行HTTP+GET，并期望在标记中看到返回的OG标记。|3864052|解决方案是为每个对象创建规范的URL。这些URL包含基本的HTML标记，包括OG标记。|3864053|在对这些URL的请求中，如果您看到传入的useragent字符串包含'facebookexternalhit‘，那么您将呈现HTML。如果您不这样做，您将提供一个302，它将重定向到您的ajax+URL。在ajax+URL上，like按钮和您发布的任何OG操作都应该指向规范的URL对象|3864054|示例：|3864055|作为一个用户，我使用的是http://yoursite.com/#!/artists/monet。我单击了一个like按钮，或者发布了一个操作，但是like按钮的href参数，或者当您发布操作时对象的URL应该是该对象的web可点击的规范URL+-在本例中，可能是http://yoursite.com/artists/monet|offset|length|3864056|当使用浏览器的用户点击http://yoursite.com/artists/monet时，你应该将他们重定向到http://yoursite.com/#!/artists/monet，但是如果传入的用户代理说这是Facebook的抓取器，你只需返回代表艺术家莫奈的标记即可。|3864057|有关真实世界的示例，请参见Deezer、Rdio和Mog，他们都使用此设计模式。|3864058|entityMap|0|LINK|mutability|MUTABLE|url|http://yoursite.com/#!/artists/monet|1|http://yoursite.com/artists/monet|2|3^0|0|0|0|0|0|C|10|0|3O|X|1|0|B|X|2|1K|10|3|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|18|8|@]|9|@$L|19|M|1A|1|1B]|$L|1C|M|1D|1|1E]]|A|$]]|$1|N|3|O|5|6|7|1F|8|@]|9|@$L|1G|M|1H|1|1I]|$L|1J|M|1K|1|1L]]|A|$]]|$1|P|3|Q|5|6|7|1M|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]|Z|$5|U|V|W|A|$X|10]]|11|$5|U|V|W|A|$X|10]]|12|$5|U|V|W|A|$X|Y]]]]

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 <a href="http://yoursite.com/#!/artists/monet" rel="noreferrer">http://yoursite.com/#!/artists/monet</a>. 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 <a href="http://yoursite.com/artists/monet" rel="noreferrer">http://yoursite.com/artists/monet</a>

When a user using a browser hits <a href="http://yoursite.com/artists/monet" rel="noreferrer">http://yoursite.com/artists/monet</a> you should redirect them to <a href="http://yoursite.com/#!/artists/monet" rel="noreferrer">http://yoursite.com/#!/artists/monet</a>, 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.

blocks|key|58071|text|再多做一点调查就会得出以下结论：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|58072|假设您创建了一个散列如下的应用程序：|58073|http://yoursite.com/#/artists/monet|code-block|syntax|javascript|58074|Facebook的抓取器将调用你的网址，而不是/#/artists/monet部分。这是一个问题，因为您无法知道必须将哪些信息解析到meta+og:+tags中。|offset|length|style|CODE|58075|然后尝试使用建议的url，就像Simon说的：|58076|http://yoursite.com/#!/artists/monet|58077|现在你会注意到Facebook的抓取器遵守了google+ajax+specifications，它会将#!转换成?_escaped_fragment_=，所以URL看起来像这样：|58078|http://yoursite.com/?_escaped_fragment_=/artists/monet|58079|你可以用facebook的调试器自己检查一下：https://developers.facebook.com/tools/debug|58080|将php脚本上传到您的服务器|58081|使用/#/部件转到facebook+|unordered-list-item|58082|
|58083|58084|58085|/#/|58086|58087|单击‘查看我们的抓取器为您的url看到的内容’-再次使用/#!/|58088|58089|click‘查看我们的抓取器为您的url看到的内容’-没有哈希再次使用‘查看您的URL的搜索器看到的内容’-哈希片段已转换为|58090|58091|?_escaped_fragment_=|58092|脚本|58093|<html>
++<head>
++++<title>Scraping</title>
++</head>
++<body>
++++<?
++++++print_r($_SERVER);
++++?>
++</body>
</html>|58094|或者总结:始终使用/#!/+(哈希)深度链接;)|58095|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/webmasters/ajax-crawling/docs/specification|1|https://developers.facebook.com/tools/debug^0|0|0|0|N|G|1U|D|0|0|0|1G|2|1L|K|M|Q|0|0|0|N|17|1|0|0|2|3|0|0|0|0|0|3|0|0|S|4|0|0|0|0|0|K|0|0|0|9|4|0^^$0|@$1|2|3|4|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|20|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|21|8|@$K|22|L|23|M|N]|$K|24|L|25|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|26|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|27|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|28|8|@$K|29|L|2A|M|N]|$K|2B|L|2C|M|N]]|9|@$K|2D|L|2E|1|2F]]|A|$]]|$1|U|3|V|5|F|7|2G|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|2H|8|@]|9|@$K|2I|L|2J|1|2K]]|A|$]]|$1|Y|3|Z|5|6|7|2L|8|@]|9|@]|A|$]]|$1|10|3|11|5|12|7|2M|8|@$K|2N|L|2O|M|N]]|9|@]|A|$]]|$1|13|3|14|5|6|7|2P|8|@]|9|@]|A|$]]|$1|15|3|-4|5|12|7|2Q|8|@]|9|@]|A|$]]|$1|16|3|14|5|6|7|2R|8|@]|9|@]|A|$]]|$1|17|3|18|5|12|7|2S|8|@$K|2T|L|2U|M|N]]|9|@]|A|$]]|$1|19|3|14|5|6|7|2V|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|12|7|2W|8|@$K|2X|L|2Y|M|N]]|9|@]|A|$]]|$1|1C|3|14|5|6|7|2Z|8|@]|9|@]|A|$]]|$1|1D|3|1E|5|12|7|30|8|@]|9|@]|A|$]]|$1|1F|3|-4|5|6|7|31|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|6|7|32|8|@$K|33|L|34|M|N]]|9|@]|A|$]]|$1|1I|3|1J|5|6|7|35|8|@]|9|@]|A|$]]|$1|1K|3|1L|5|F|7|36|8|@]|9|@]|A|$G|H]]|$1|1M|3|1N|5|6|7|37|8|@$K|38|L|39|M|N]]|9|@]|A|$]]|$1|1O|3|-4|5|6|7|3A|8|@]|9|@]|A|$]]]|1P|$1Q|$5|1R|1S|1T|A|$1U|1V]]|1W|$5|1R|1S|1T|A|$1U|1X]]]]

A little bit more investigation lead to the following findings:

Let's say you made an application with a hash that looks like this:

<pre><code>http://yoursite.com/#/artists/monet
</code></pre>

The Facebook scraper will call your url without the <code>/#/artists/monet</code> part. This is a problem because you have no way of knowing what information you have to parse into the <code>meta og: tags</code>.

Then try the same with the suggested url as Simon says:

<pre><code>http://yoursite.com/#!/artists/monet
</code></pre>

Now you'll notice that the Facebook scraper is respecting the <a href="https://developers.google.com/webmasters/ajax-crawling/docs/specification" rel="noreferrer">google ajax specifications</a> and it will convert the <code>#!</code> to <code>?_escaped_fragment_=</code> so the URL looks like this:

<pre><code>http://yoursite.com/?_escaped_fragment_=/artists/monet
</code></pre>

You can check this out for yourself with the facebook debugger: <a href="https://developers.facebook.com/tools/debug" rel="noreferrer">https://developers.facebook.com/tools/debug</a> 

<ul>
<li>upload the php script to your server</li>
<li>go to the facebook debugger</li>
<li>enter the url with the <code>/#/</code> part</li>
<li>click 'See exactly what our scraper sees for your URL' - no hash fragment</li>
<li>enter the url again with <code>/#!/</code></li>
<li>click 'See exactly what our scraper sees for your URL' - hash fragment has been turned to 
<code>?_escaped_fragment_=</code></li>
</ul>

The script

<pre><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Scraping&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;?
 print_r($_SERVER);
 ?&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

Or summarized: always use <code>/#!/</code> (hashbang) deeplinks ;)

blocks|key|3864111|text|我运行了一个似乎有效的快速测试。依赖于FB刮板不运行JavaScript这一事实。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3864112|由于我的大多数站点都是静态的单页面应用程序，没有服务器逻辑，所以我可以使用Grunt和Gulp等工具快速生成静态页面。|3864113|如果您共享http://wh-share-test.s3-website-eu-west-1.amazonaws.com/test|offset|length|3864114|当用户点击JS重定向到/#/test的链接时，Facebook将抓取测试页面的meta标签，以便我的单页面应用程序做出反应并显示正确的视图。|3864115|看起来有点老生常谈，但很管用；|3864116|<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+=+'/#'+%2B+path;
++++</script>
</body>
</html>|code-block|syntax|javascript|3864117|entityMap|0|LINK|mutability|MUTABLE|url|http://wh-share-test.s3-website-eu-west-1.amazonaws.com/test^0|0|0|5|1O|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@$F|11|G|12|1|13]]|A|$]]|$1|H|3|I|5|6|7|14|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|15|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|16|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

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 <a href="http://wh-share-test.s3-website-eu-west-1.amazonaws.com/test" rel="nofollow">http://wh-share-test.s3-website-eu-west-1.amazonaws.com/test</a>

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;
 

<pre><code>&lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
 &lt;meta charset="utf-8" /&gt;
 &lt;title&gt;This is a shared item&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;This is a shared item page.&lt;/h1&gt;
 &lt;script&gt;
 var path = window.location.pathname;
 window.location = '/#' + path;
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

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)

OpenGraph on Ajax Based Website

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个网站，这是完全基于Ajax(散列导航)。有没有办法使用Javascript为基于ajax的网站刷新Open Graph元标记？(当我点击一个链接时，标签和这些值应该会改变)

问基于Ajax网站的OpenGraph
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于Ajax网站的OpenGraphEN