利用pushState()创建可爬行的,搜索引擎友好的AJAX网站

2012/05/17 10:13
阅读数 738
      很多人喜欢用AJAX技术搭建网站,因为AJAX能带来更快的速度及更好的用户体验。但同时它给SEOer们带来了一个难题:搜索引擎蜘蛛看不懂AJAX,也就意味着你的网站不能被很好地收录。这个问题也是一直在困扰着我,一方面客户强调用户体验,要求用Ajax构建网站,另一方面还要迎合搜索引擎的口味,保证网站正常收录。今天,我就为大家介绍一个HTML5中提供的一个方法pushState(),利用此方法,上述难题迎刃而解。
      pushState()只做了一件事:它可以改变用户浏览器地址栏中的路径,在它出现之前,完成相同的事情是不可能的。在我们更深入地了解它之前,有必要重申一下:它的确没做任何其它事情——没做额外的服务器请求,没有请求新的页面。然而,目前此方法并不是所有浏览器都支持,只有支持现代标准的浏览器(chrome,safari,firefox等,IE可以暂时不用考虑了)才支持此方法。
      pushState()方法为SEOer带来了以下几点令人兴奋的地方:
      1、你终于可以利用AJAX为你的网站带来的好处了,更快的页面加载速度和更好的用户体验。
      2、由于经过pushState()方法处理过的页面URL能够准确地反映真实的页面位置,你不用担心人们在从地址栏拷贝粘贴URL并分享此链接时存在什么问题了。
      3、了解到通过此方法能在即便是使用Ajax的情况下向搜索引擎提交高质量的URL,保证网站收录,你终于可以松一口气了。
      示例:
      我提供了一个 pushState()方法Demo页面以便通过实例来演示此方法的运行。
      如果你点击导航栏中的几个城市,你会看见每次点击时只有主体内容改变了。与此同时,地址栏中的URL也随之改变了。
      pushState()方法调用了三个参数:window.history.pushState(data,title,url)。前两个参数可以为空。
      以下是实现此方法的具体步骤:
  • 在做任何事之前,确保你的网站在没有JS的情况下能够运行,因为google需要读懂你的网站并跟踪网站的链接。
  • 你仍然需要编写服务端代码来返回对应的内容页面,而不是全部依赖HTML静态页。
  • 指引javascript代码截取相应的内部链接的点击。我是一个jQuery fans,所以我用click()方法来完成此项任务。
  • javascript将获取所点击链接的属性然后利用JS/AJAX加载相应的内容到页面里面。
  • 最后,通过利用pushState()方法更新URL以匹配内容真实的location,你将得到SEO的全部好处。
      你可以通过查看上面示例的源代码,来学习如何具体实现上述步骤。下面列出了基本代码:
// We're using jQuery functions to make our lives loads easier
$('nav a').click(function(e) {
      url = $(this).attr("href");
 
      //This function would get content from the server and insert it into the id="content" element
      $.getJSON("content.php", {contentid : url},function (data) {
            $("#content").html(data);
      });
 
      //This is where we update the address bar with the 'url' parameter
      window.history.pushState('object', 'New Title', url);
 
      //This stops the browser from actually following the link
      e.preventDefault();
}
      重要提示:
      为了保证能像demo那样完美运行,除了上述工作还有其他一些事情要做。特别是你可能想要一个“返回”按钮,这在上面的代码段中是不允许的。要加入“返回”功能,你还需要另外一个方法——popState()。它检测URL的改变,然后允许你触发任何能够抓取网页内容并加载内容的函数。更详细的内容可查看Demo的源代码页面。
展开阅读全文
打赏
0
2 收藏
分享
加载中
不错,看过Demo
2013/01/18 19:32
回复
举报
更多评论
打赏
1 评论
2 收藏
0
分享
返回顶部
顶部