搜索引擎如何抓取网页( 各大多的网站采用Ajax技术解决方法放弃井号结构)

　　搜索引擎如何抓取网页(

各大多的网站采用Ajax技术解决方法放弃井号结构)

　　如何让搜索引擎抓取AJAX内容解决方案

　　更新时间：2014年8月25日11:51:39 投稿：hebedich

　　说到 AJAX，很多人都会想到 JavaScript。到目前为止，主要的搜索引擎还无法捕获由 JavaScript、ajax 和 flash 代码生成的内容。但是很多站长非常喜欢这些效果，但是各大搜索引擎都不能很好的抓取这些代码生成的内容，所以很多站长放弃了这些效果。

　　越来越多的网站开始采用“单页应用”。

　　整个网站只有一个网页，它使用Ajax技术根据用户输入加载不同的内容。

　　这种方式的优点是用户体验好，节省流量。缺点是 AJAX 内容无法被搜索引擎抓取。例如，您有一个网站。

　　　　http://example.com 　　

　　用户可以通过哈希结构的 URL 看到不同的内容。

　　　　http://example.com#1　　http://example.com#2　　http://example.com#3 　　

　　但是，搜索引擎只会抓取并忽略井号，因此无法将内容编入索引。

　　为了解决这个问题，Google提出了“井号+感叹号”的结构。

　　　　http://example.com#!1　　

　　当谷歌找到上述网址时，它会自动抓取另一个网址：

　　　　http://example.com/?_escaped_fragment_=1　　

　　只要你把 AJAX 内容放在这个 URL 上，Google 就会收录。但问题是“井号+感叹号”非常丑陋和繁琐。推特以前用的就是这个结构，把

　　　　http://twitter.com/ruanyf　　

　　改为

　　　　http://twitter.com/#!/ruanyf　　

　　结果用户一再投诉，只用了半年就废了。

　　那么，有什么方法可以让搜索引擎在保持更直观的 URL 的同时抓取 AJAX 内容？

　　我一直觉得没有办法，直到两天前看到Discourse创始人之一Robin Ward的解决方案，我才忍不住尖叫。

　　Discourse 是一个严重依赖 Ajax 的论坛程序，但它必须让 Google收录content。其解决方案是放弃hashtag结构，采用History API。

　　所谓的History API，是指在不刷新页面的情况下，改变浏览器地址栏中显示的URL（准确的说是改变网页的当前状态）。这是一个示例，您单击上面的按钮开始播放音乐。然后，点击下面的链接看看发生了什么？

　　地址栏中的URL已更改，但音乐播放并未中断！

　　History API 的详细介绍超出了本文章 的范围。简单的说到这里，它的作用就是给浏览器的History对象添加一条记录。

　　　　window.history.pushState(state object, title, url);　　

　　上面这行命令可以让地址栏中出现一个新的 URL。 History对象的pushState方法接受三个参数，新的URL为第三个参数，前两个参数可以为null。

　　　　window.history.pushState(null, null, newURL); 　　

　　目前主流浏览器都支持这种方式：Chrome（26.0+）、Firefox（20.0+）、IE（10.0+）、Safari（5.1+） , 歌剧 (12.1+).

　　以下是 Robin Ward 的方法。

　　首先用History API替换井号结构，让每个井号都变成一个正常路径的URL，这样搜索引擎就会抓取每一个网页。

　　　　example.com/1　　example.com/2　　example.com/3　　

　　接下来，定义一个 JavaScript 函数来处理 Ajax 部分并根据 URL 抓取内容（假设使用 jQuery）。

　　function anchorClick(link) {<br />　　　　var linkSplit = link.split('/').pop();<br />　　　　$.get('api/' + linkSplit, function(data) {<br />　　　　　　$('#content').html(data);<br />　　　　});<br />　　}

　　再次定义鼠标的点击事件。

　　　　$('#container').on('click', 'a', function(e) {<br />　　　　window.history.pushState(null, null, $(this).attr('href'));<br />　　　　anchorClick($(this).attr('href'));<br />　　　　e.preventDefault();<br />　　});　　

　　还要考虑用户点击浏览器的“前进/后退”按钮。这时候会触发History对象的popstate事件。

　　　　window.addEventListener('popstate', function(e) {     <br />　　　　anchorClick(location.pathname);  <br /> 　　});

　　定义以上三段代码后，无需刷新页面即可显示正常路径URL和AJAX内容。

　　最后，设置服务器端。

　　因为没有使用hash结构，所以每个URL都是不同的请求。因此，服务器需要向所有这些请求返回具有以下结构的网页，以防止 404 错误。

　　　　<br />　　　　<br />　　　　　　<br />　　　　　　<br />　　　　　　　　... ...<br /> 　　　　　　<br />　　　　<br />　　

　　仔细看上面的代码，你会发现一个noscript标签，这就是秘密。

　　我们把所有想要搜索引擎收录的内容放在noscript标签中。在这种情况下，用户仍然可以在不刷新页面的情况下进行AJAX操作，但是搜索引擎会收录每个页面的主要内容！