使用 Backbone Router 处理 Hashbang 进行 SEO 内容索引？

Question

我的SPA 使用Backbone.js 路由器，它使用pushstate 和散列URL 作为后备方法。我打算使用Google's suggestion for making an AJAX web-app crawlable。也就是说，我想将我的网站索引到由PhantomJS 生成的静态 .html 文件中，并通过 URL 将它们发送给 Google：

mysite.com/?_escaped_fragment_=key=value.

请记住，该网站不为最终用户提供静态页面（它仅适用于支持 Javascript 的浏览器）。如果您导航到mysite.com/some/url，.htaccess 文件设置为始终提供mysite.com/index.php，并且主干路由器将读取该 URL，以便显示该 URL 的 JavaScript 生成的内容。

此外，为了让 Google 将我的整个网站编入索引，我计划创建一个 sitemap，这将是 hashbang URLs 的列表。 URL 必须是 hashbanged，以便 Google 知道要使用 _escaped_fragment_key URL 为网站编制索引。

太好了……

(1) 这种方法行得通吗？

和

(2) 由于backbone.js不使用hashbang URL，当用户使用hashbang URL时如何将hashbang URL转换为pushstate URL 通过 Google 到达？

参考：https://stackoverflow.com/a/6194427/1102215

Answer 1

正如我在问题中概述的那样，我最终在实施过程中磕磕绊绊。所以...

(1) 是的，这种方法似乎效果很好。唯一的缺点是即使应用程序在没有 hash-bangs 的情况下运行，我的 sitemap.xml 也充满了 hashbang URL。这是必要的，以提醒 Google 在抓取这些页面时应该查询 _escaped_fragment_ URL。因此，当该网站出现在 Google 搜索结果中时，URL 中会出现一个 hashbang，但这是一个很小的代价。

(2) 这部分比我想象的要容易得多。在初始化 Backbone.js 路由器之前只需要一行代码...

window.location.hash = window.location.hash.replace(/#!/, '#');

var AppRouter = Backbone.Router.extend({...

hashbang 被替换为仅哈希后，主干路由器将自动删除支持 pushState 的浏览器的哈希。此外，这两个 URL 状态更改不保存在浏览器的历史状态中，因此如果用户单击后退按钮，则不会出现异常/意外重定向。

更新：更好的方法

事实证明，有一种非常简单的方法可以完全消除 hashbangs。通过BromBone：

如果您的网站使用 hashbangs (#!) 网址，那么 Google 会抓取您的 通过替换#!使用 ?escaped_fragment=。当你看到 ?escaped_fragment=，你会知道这个请求来自一个爬虫。 如果 您正在使用 html5 pushState，然后查看“UserAgent”标头 确定请求是否来自机器人。

这是 BromBone 建议的 .htaccess 重写规则的修改版本：

    RewriteEngine On
    RewriteCond $1 !\.(gif|jpe?g|png)$ [NC]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{HTTP_USER_AGENT} .*Googlebot.* [OR]
    RewriteCond %{HTTP_USER_AGENT} .*Bingbot.* [OR]
    RewriteCond %{HTTP_USER_AGENT} .*Baiduspider.* [OR]
    RewriteCond %{HTTP_USER_AGENT} .*iaskspider.*
    RewriteRule ^(.*)$ snapshot.php/$1 [L]

Answer 2

让我总结一下我在即将出版的关于 SPA 的书中写了大约 10 页的内容。 Google 想要您网站的经典版本。这也是一个优势，因为过时的浏览器无论如何都无法有效地进行 SPA。为蜘蛛和旧浏览器提供核心站点。

我从 Gaurdian 报纸上得到这个词，http://vimeo.com/channels/smashingconf。

在浏览器中检查浏览器是否切芥末，这是我的脚本：

<script>

    if (!('querySelector' in document)
         || !('localStorage' in window)
         || !('addEventListener' in window)
        || !('matchMedia' in window)) {

        if (window.location.href.indexOf("#!") > 0) {
            window.location.href = window.location.href.replace("#!", "?_escaped_fragment_=");
        } else {
            if (window.location.href.indexOf("?_escaped_fragment_=") < 0) {
                window.location.href = window.location.href + "?_escaped_fragment_=";
            }
        }

    } else {

        if (window.location.href.indexOf("?_escaped_fragment_=") >= 0) {
            window.location.href = window.location.href.replace("?_escaped_fragment_=", "#!");
        }
    }

</script>

在服务器上，您需要一些机制来检查 _escape_fragment_ 查询字符串是否存在。如果存在，您需要为核心站点提供服务。核心站点仅使用简单的 CSS 和很少或根本没有 JavaScript。我有一个用于 ASP.NET MVC 的 SPAHelper 库，您可以查看我在此方面实现的一些东西，https://github.com/docluv/spahelper。

真正的问题是大多数服务器端 Web 框架（如 ASP.NET、PHP 等）并非旨在支持客户端和服务器的单一视图系统。所以你有点卡住了为此维护两个视图。我再次围绕这个主题为我的书写了大约 10 页，应该在下周的某个时间准备好。