3

我将基于 ajax 构建我的应用程序，我的 URL 类似于：

http://server.com/module/#function_name,param1,param2...etc

在参考了一些关于 google 建议的讨论后：hashbang (#!)，我不难意识到这不是最好的解决方案。有几个原因：

  • 无论如何，URL 非常难看。
  • 如果有一天谷歌（或其他一些搜索引擎）提出了一个比 hashbang 更好的解决方案，那就太糟糕了。我必须用 hashbang 保留我丑陋的 url，或者编写一些 js 代码来使指向我的页面的链接仍然有效。
  • HTML5 pushState 总有一天会流行起来。

对于上述所有事情，我决定按照自己的方式进行：我的导航链接将是这样的：

<a href="http://server.com/module/for-crawler/function-name/param1/param2/...">
Some text </a>

一些 jQuery 代码将使其能够加载 ajax 内容，而不是像普通链接那样进行页面更改：

$(function(){
    $('a').live('click',function(e){
        var realURL = translateURL( $(this).attr('href') )
        loadContent( realURL );
        e.prevetnDefault(); 
        return false;
    })
})
/* -- the function translateURL will turn url like :
..... http://server.com/module/for-crawler/function-name/param1/param2/...
Into:
..... http://server.com/module/#function-name/param1/param2/...
    That's the real url I think all ajaxers are used to dealing with
*/

当爬虫读取我的页面时，它会跟随“href”属性中的url，我会提供我页面的静态非js版本供google阅读。几天后，我的页面被编入索引，用户将在 Google 的搜索结果中看到我的页面，如下所示：

http://server.com/module/for-crawler/function-name/param1/param2/...

我将再次使用用户 js 将用户重定向到我的正常 ajax 版本，我的意思是，到真正的 URL：

http://server.com/module/#function-name/param1/param2/...

这是我目前能想到的最好的方法。请给我建议：我应该这样做，还是可以做得更好？谢谢大家！

4

1 回答 1

4

根据您的听众，我建议还是使用 HTML5 PushState。

如果客户端不支持 HTML5 PushState，让他简单地使用与爬虫相同的应用程序版本。在我看来，页面重新加载并不像散列 URL 那样糟糕。由于用户共享 URL，因此您的散列 URL 会暴露给其他用户。此 URL 不适用于 Facebook 链接共享预览或任何其他不支持 JavaScript 的客户端。

相反，我只会将爬虫友好型应用程序与 HTML5 PushState 结合使用。使用 PushState，您将始终公开单个 URL，而与客户端的 JavaScript 支持无关。

首先检测是否支持PushState：

function supports_history_api() { return !!(window.history && history.pushState); }

然后你click-handler会看起来像这样：

$('a').live('click',function(e){
  var url = $(this).attr('href');
  e.preventDefault();
  loadContent( url );
  history.pushState({"url":url}, $(this).attr('title'), url);
  return false;
})
于 2012-05-31T18:32:53.903 回答