乱爱性全过程免费视频/午夜毛片视频/中文字幕av三区/一级视频网址

當前位置： 維易PHP培訓(xùn)學(xué)院 > PHP學(xué)習(xí) > 內(nèi)容正文

PHP實戰(zhàn)：如何讓搜索引擎抓取AJAX內(nèi)容解決方案

作者：VEPHP   時間 2018-05-27

《PHP實戰(zhàn)：如何讓搜索引擎抓取AJAX內(nèi)容解決方案》要點：
本文介紹了PHP實戰(zhàn)：如何讓搜索引擎抓取AJAX內(nèi)容解決方案，希望對您有用。如果有疑問，可以聯(lián)系我們。

PHP實例越來越多的網(wǎng)站,開始采用"單頁面結(jié)構(gòu)"(Single-page application).

PHP實例整個網(wǎng)站只有一張網(wǎng)頁,采用Ajax技術(shù),根據(jù)用戶的輸入,加載分歧的內(nèi)容.

PHP實例PHP實戰(zhàn)：如何讓搜索引擎抓取AJAX內(nèi)容解決方案

PHP實例這種做法的好處是用戶體驗好、節(jié)省流量,缺點是AJAX內(nèi)容無法被搜索引擎抓取.舉例來說,你有一個網(wǎng)站.

PHP實例　　http://example.com 　　

PHP實例用戶通過井號結(jié)構(gòu)的URL,看到分歧的內(nèi)容.

PHP實例　　http://example.com#1　　http://example.com#2　　http://example.com#3 　　

PHP實例但是,搜索引擎只抓取example.com,不會理會井號,因此也就無法索引內(nèi)容.

PHP實例為了辦理這個問題,Google提出了"井號+感嘆號"的結(jié)構(gòu).

PHP實例　　http://example.com#!1　　

PHP實例當Google發(fā)現(xiàn)上面這樣的URL,就自動抓取另一個網(wǎng)址：

PHP實例　　http://example.com/?_escaped_fragment_=1　　

PHP實例只要你把AJAX內(nèi)容放在這個網(wǎng)址,Google就會收錄.但是問題是,"井號+感嘆號"非常難看且煩瑣.Twitter曾經(jīng)采用這種結(jié)構(gòu),它把

PHP實例　　http://twitter.com/ruanyf　　

PHP實例改成

PHP實例　　http://twitter.com/#!/ruanyf　　

PHP實例結(jié)果用戶埋怨連連,只用了半年就廢除了.

PHP實例那么,有沒有什么辦法,可以在保持比較直觀的URL的同時,還讓搜索引擎能夠抓取AJAX內(nèi)容?

PHP實例我一直以為沒有方法做到,直到前兩天看到了Discourse創(chuàng)始人之一的Robin Ward的解決方法,不禁拍案叫絕.

PHP實例PHP實戰(zhàn)：如何讓搜索引擎抓取AJAX內(nèi)容解決方案

PHP實例Discourse是一個論壇程序,嚴重依賴Ajax,但是又必須讓Google收錄內(nèi)容.它的解決辦法就是放棄井號結(jié)構(gòu),采用 History API.

PHP實例所謂 History API,指的是不刷新頁面的情況下,改變?yōu)g覽器地址欄顯示的URL(準確說,是改變網(wǎng)頁的當前狀態(tài)).這里有一個例子,你點擊上方的按鈕,開始播放音樂.然后,再點擊下面的鏈接,看看發(fā)生了什么事?

PHP實例PHP實戰(zhàn)：如何讓搜索引擎抓取AJAX內(nèi)容解決方案

PHP實例地址欄的URL變了,但是音樂播放沒有中斷!

PHP實例History API 的詳細介紹,超出這篇文章的范圍.這里只簡單說,它的作用便是在瀏覽器的History對象中,添加一條記錄.

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

PHP實例上面這行命令,可以讓地址欄出現(xiàn)新的URL.History對象的pushState辦法接受三個參數(shù),新的URL就是第三個參數(shù),前兩個參數(shù)都可以是null.

PHP實例　　window.history.pushState(null, null, newURL); 　　

PHP實例目前,各大瀏覽器都支持這個辦法：Chrome(26.0+),Firefox(20.0+),IE(10.0+),Safari(5.1+),Opera(12.1+).

PHP實例下面就是Robin Ward的辦法.

PHP實例首先,用History API替代井號結(jié)構(gòu),讓每個井號都釀成正常路徑的URL,這樣搜索引擎就會抓取每一個網(wǎng)頁.

PHP實例　　example.com/1　　example.com/2　　example.com/3　　

PHP實例然后,定義一個JavaScript函數(shù),處理Ajax部分,根據(jù)網(wǎng)址抓取內(nèi)容(假定使用jQuery).

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

PHP實例再定義鼠標的click變亂.

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

PHP實例還要考慮到用戶點擊瀏覽器的"前進 / 后退"按鈕.這時會觸發(fā)History對象的popstate變亂.

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

PHP實例定義完上面三段代碼,就能在不刷新頁面的情況下,顯示正常路徑URL和AJAX內(nèi)容.

PHP實例最后,設(shè)置服務(wù)器端.

PHP實例因為不使用井號結(jié)構(gòu),每個URL都是一個不同的哀求.所以,要求服務(wù)器端對所有這些哀求,都返回如下結(jié)構(gòu)的網(wǎng)頁,防止出現(xiàn)404錯誤.

PHP實例　　<html>
　　　　<body>
　　　　　　<section id='container'></section>
　　　　　　<noscript>
　　　　　　　　... ...
?　　　　　　</noscript>
　　　　</body>
　　</html>

PHP實例仔細看上面這段代碼,你會發(fā)現(xiàn)有一個noscript標簽,這就是奇妙所在.

PHP實例我們把所有要讓搜索引擎收錄的內(nèi)容,都放在noscript標簽之中.這樣的話,用戶依然可以執(zhí)行AJAX操作,不消刷新頁面,但是搜索引擎會收錄每個網(wǎng)頁的主要內(nèi)容!

歡迎參與《PHP實戰(zhàn)：如何讓搜索引擎抓取AJAX內(nèi)容解決方案》討論，分享您的想法，維易PHP學(xué)院為您提供專業(yè)教程。

轉(zhuǎn)載請注明本頁網(wǎng)址：
http://www.fzlkiss.com/jiaocheng/14791.html


    標簽：