基于Ajax的网站上的OpenGraph

OpenGraph on Ajax Based Website

本文关键字：OpenGraph 网站 基于 Ajax      更新时间：2023-09-26

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

有没有一种方法可以使用Javascript为基于ajax的网站刷新Open Graph元标签？（当我点击链接时，标签和那里的值应该会改变）

否。Open Graph标记必须存在于可通过纯HTTP获取的HTML页面上。

这是因为当用户与OG对象交互时（比如执行操作等），Facebook会对OG URL执行HTTPGET，并期望在标记中看到返回的OG标记。

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

在对这些URL的请求中，如果看到包含"facebookexternalhit"的传入useragent字符串，则呈现HTML。如果您不这样做，您将提供一个302重定向到您的ajax URL。在ajax URL上，您发布的类似按钮和任何OG操作都应该指向规范的URL对象

示例：

作为用户，我在http://yoursite.com/#/艺术家/monet。我点击了一个点赞按钮，或者发布了一个操作，但点赞按钮的href参数，或者发布操作时对象的URL，应该是该对象的可在网络上点击的规范URL——在这种情况下，也许http://yoursite.com/artists/monet

当使用浏览器的用户点击http://yoursite.com/artists/monet你应该将它们重定向到http://yoursite.com/#/艺术家/莫奈，但如果传入的用户代理说这是Facebook的scraper，你只需返回代表艺术家莫奈的标记。

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

多一点调查就会得出以下结果：

假设您制作了一个应用程序，其哈希如下：

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

Facebook scraper将调用您的url，而不包含/#/artists/monet部分。这是一个问题，因为您无法知道要解析到meta og: tags中的信息。

然后尝试与西蒙所说的相同的建议网址：

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

现在您会注意到，Facebook scraper尊重googleajax规范，它会将#!转换为?_escaped_fragment_=，因此URL看起来像这样：

http://yoursite.com/?_escaped_fragment_=/artists/monet

你可以用facebook调试器自己检查一下：https://developers.facebook.com/tools/debug

  • 将php脚本上传到服务器
  • 转到facebook调试器
  • 输入带有/#/部分的url
  • 点击"查看我们的scraper为您的URL看到的内容"-没有哈希片段
  • 使用/#!/再次输入url
  • 单击"查看我们的scraper为您的URL所看到的内容"-哈希片段已转换为
    ?_escaped_fragment_=

脚本

<html>
  <head>
    <title>Scraping</title>
  </head>
  <body>
    <?
      print_r($_SERVER);
    ?>
  </body>
</html>

或者总结一下：总是使用/#!/（hashbang）深度链接；）

我运行了一个似乎有效的快速测试。这取决于FB scraper不运行JavaScript的事实。

由于我的大多数网站都是静态的单页应用程序，没有服务器逻辑，我可以使用Grunt和Gulp等工具快速生成静态页面。

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

Facebook会抓取测试页面的元标签，当用户点击JS重定向到/#/test的链接时，我的单页应用程序会做出反应并呈现正确的视图。

看似粗鲁，但行之有效；

<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>
相关文章：