Question

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

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

在参考了一些关于谷歌建议的讨论之后：hashbang（＃！），我不难发现它不是最好的解决方案。有几个原因：

无论如何，网址非常难看。
如果有一天Google（或其他一些搜索引擎）建议除了hashbang之外的更好的解决方案，那就太可怕了。我必须使用hashbang保存我的丑陋网址，或者写一些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”属性中的网址，我将为其提供我的网页的静态非js版本，仅供谷歌阅读。几天后，我的网页被编入索引＆amp;用户将在Google的结果中看到我的页面：

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

我将再次使用js将用户重定向到我的普通ajax版本，我的意思是，转到真正的网址：

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

这是我此时可以考虑的最佳方法。请给我建议：我应该这样做，还是可以让它变得更好？谢谢所有人！

Answer 1

根据您的受众情况，我建议您使用HTML5 PushState。

如果客户端不支持HTML5 PushState，则让他只使用与抓取工具相同的应用版本。在我看来，页面重新加载并不像散列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;
})

可伸缩的Ajax内容。 SEO-ing没有hashbang。我的方式好吗？

1 个答案: