您現在的位置: 网站首頁 / 網站建設 / 正文

如何讓搜索引擎抓取AJAX內容?

作者: admin 发布: 2015-3-11 16:52:6 分类: 網站建設 閱讀: 次 查看評論

  越来越多的网站,开始采用"单页面结构"(Single-page application)。

  整個網站只有一張網頁,采用Ajax技術,根據用戶的輸入,加載不同的內容。

  

  這種做法的好處是用戶體驗好、節省流量,缺點是AJAX內容無法被搜索引擎抓取。舉例來說,你有一個網站。

 http://example.com

  用戶通過井號結構的URL,看到不同的內容。

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

  但是,搜索引擎只抓取example.com,不會理會井號,因此也就無法索引內容。

  爲了解決這個問題,Google提出了"井號+感歎號"的結構。

 http://example.com#!1

  當Google發現上面這樣的URL,就自動抓取另一個網址:

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

  只要你把AJAX內容放在這個網址,Google就會收錄。但是問題是,"井號+感歎號"非常難看且煩瑣。Twitter曾經采用這種結構,它把

 http://twitter.com/ruanyf

  改成

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

  結果用戶抱怨連連,只用了半年就廢除了。

  那麽,有沒有什麽方法,可以在保持比較直觀的URL的同時,還讓搜索引擎能夠抓取AJAX內容?

  我一直以为没有办法做到,直到前两天看到了Discourse创始人之一的Robin Ward的解决方法,不禁拍案叫绝。

  

  Discourse是一个论坛程序,严重依赖Ajax,但是又必须让Google收录内容。它的解决方法就是放弃井号结构,采用 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+),Opera(12.1+)。

  下面就是Robin Ward的方法。

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

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

  然後,定義一個JavaScript函數,處理Ajax部分,根據網址抓取內容(假定使用jQuery)。

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

  再定義鼠標的click事件。

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

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

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

  定義完上面三段代碼,就能在不刷新頁面的情況下,顯示正常路徑URL和AJAX內容。

  最後,設置服務器端。

  因爲不使用井號結構,每個URL都是一個不同的請求。所以,要求服務器端對所有這些請求,都返回如下結構的網頁,防止出現404錯誤。

 <html> <body> <section id='container'></section> <noscript> ... ... </noscript> </body> </html>

  仔細看上面這段代碼,你會發現有一個noscript標簽,這就是奧妙所在。

  我們把所有要讓搜索引擎收錄的內容,都放在noscript標簽之中。這樣的話,用戶依然可以執行AJAX操作,不用刷新頁面,但是搜索引擎會收錄每個網頁的主要內容!

  -- 阮一峰

  來源:SEO搜尋引擎優化 - SEO自學網 轉載注明出處!

? 上一篇下一篇 ?   本文關鍵詞:

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標准
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標准
网站SEO優化常见问题汇总
SEO優化推广方案该如何写
SEO優化方案步骤
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表