利用AJAX技術(shù)提高搜索引擎排名

時(shí)間：2022-07-23 13:45:01 | 來源：建站知識(shí)

時(shí)間：2022-07-23 13:45:01 來源：建站知識(shí)

嵌入在你的web頁(yè)面中的導(dǎo)航元素能夠降低你的搜索引擎評(píng)價(jià)排名并且降低你的網(wǎng)站的響應(yīng)性能。本文作者想同你一起探討如何使用AJAX技術(shù)來解決這兩個(gè)問題。許多設(shè)計(jì)良好的web站點(diǎn)都包含大量的與實(shí)際內(nèi)容相聯(lián)系的可導(dǎo)航信息。用于導(dǎo)航的HTML標(biāo)記能影響你的搜索引擎評(píng)價(jià)，而且能夠改進(jìn)訪問者的頁(yè)面下載體驗(yàn)感。在本文中，你會(huì)看到如何使用AJAX來創(chuàng)建更為集中的更快速加載的web頁(yè)面。

一、 分離導(dǎo)航與內(nèi)容

讓我們使用一個(gè)例子作為開始。請(qǐng)考慮你現(xiàn)在閱讀的文章，它有下列一些內(nèi)容：

· 一個(gè)其上有一些預(yù)定義的到Informit的各個(gè)部分的鏈接的頁(yè)眉。

· 在頁(yè)眉下有一行，把本文放到Informit的目錄結(jié)構(gòu)之中(實(shí)際上，這是唯一的與目錄相關(guān)的可導(dǎo)航元素)。

· 一個(gè)位于右首的側(cè)欄，其中有一些連接到流行文章和推薦內(nèi)容的鏈接。

· 一個(gè)頁(yè)腳，還有一些永遠(yuǎn)不會(huì)改變的鏈接。

上面的"混合"很可能會(huì)影響搜索引擎索引你的數(shù)據(jù)的方式：

· 因?yàn)樗阉饕娌荒軈^(qū)別內(nèi)容與導(dǎo)航文本，所以它們會(huì)把它們?cè)谀愕捻?yè)面中找到的一切進(jìn)行索引。既然目錄中的關(guān)鍵字與不相關(guān)的可導(dǎo)航關(guān)鍵字混合在一起，那么內(nèi)容之間的關(guān)聯(lián)大大減少。一些搜索引擎宣稱，它們能夠在被搜索到的頁(yè)面(例如，固定的頁(yè)眉和頁(yè)腳)中發(fā)現(xiàn)重復(fù)的文本并且刪除它們。但是，不要依賴這種可能性;即使它們實(shí)現(xiàn)了這種技術(shù)，也很可能不會(huì)一直可靠。

· web頁(yè)面中的外向鏈接影響你的內(nèi)容的頁(yè)面評(píng)價(jià)。盡管這可能提高流行的文章的評(píng)價(jià)排名(因?yàn)樵S多頁(yè)面都鏈接到它們)，但是所有的頁(yè)面都鏈接到的內(nèi)容(例如，隱私策略)通常得到最高的頁(yè)面評(píng)價(jià)-這可能不是你一直關(guān)心的問題。在我的一個(gè)web站點(diǎn)中，最高的評(píng)價(jià)頁(yè)面是用于把消息發(fā)送到web管理員的表單-而不是你想讓用戶首先在Google上找到的內(nèi)容。

注意

即使你不使用站點(diǎn)地圖，你也可以通過Google的站點(diǎn)地圖用戶接口來了解一下你的頁(yè)面的頁(yè)面排名情況。

添加到一個(gè)web頁(yè)面的可導(dǎo)航元素還可能影響使用低速互聯(lián)網(wǎng)存取的用戶，而如果web頁(yè)面不使用DIV元素(Informit使用之)而使用表格時(shí)更是如此。在這種情況中，在把它顯示給用戶之前，整個(gè)表格必須被加載到一些web瀏覽器中。

傳統(tǒng)地，web設(shè)計(jì)者一般都使用框架集或通過構(gòu)建整套的導(dǎo)航架構(gòu)(廣泛使用JavaScript代碼)來實(shí)現(xiàn)導(dǎo)航與內(nèi)容的分離。這兩條途徑都存在其缺點(diǎn);因此，許多大型網(wǎng)站避免使用框架集就不足為奇了。

借助于在AJAX框架中使用的技術(shù)，你可以為這一問題提供一種方案：

· 每一個(gè)web頁(yè)面僅包含可導(dǎo)航元素和實(shí)際內(nèi)容的占位符。

· 在web頁(yè)面通過嵌入式框架(IFRAME)或使用XmlHttpRequest對(duì)象加載后，再裝載這些可導(dǎo)航元素。

· 然后，可導(dǎo)航元素的內(nèi)容被合并到web頁(yè)面內(nèi)容中，從而產(chǎn)生一個(gè)不嵌入任何幀的干凈的頁(yè)面。

在使用這種方法重新設(shè)計(jì)你的web頁(yè)面之前，你需要考慮下列問題：

· 搜索引擎僅將看到初始的web頁(yè)面。你必須確保，該頁(yè)面中包含到相關(guān)頁(yè)面或到一個(gè)網(wǎng)站地圖的鏈接。Informit網(wǎng)站中文章頁(yè)眉上方的導(dǎo)航線和在頁(yè)面的文章信息部分中的鏈接正好可以較好地實(shí)現(xiàn)這一目的。

· 在他們的瀏覽器中禁止調(diào)用JavaScript的訪問者將具有與搜索引擎相同的頁(yè)面視圖。你必須確保他們有受限的視圖不會(huì)給你的網(wǎng)站的功能造成較大影響。

· 你可能想在你的頁(yè)面上保留一些靜態(tài)內(nèi)容。例如，Informit標(biāo)識(shí)和版權(quán)信息必須一直顯示給所有的訪問者。

當(dāng)你確定好應(yīng)該把你的導(dǎo)航結(jié)構(gòu)哪些部分依附到頁(yè)面上以及哪些部分應(yīng)該與之分開之后，你就可以開始下一步驟了。

二、 設(shè)計(jì)你的Web頁(yè)面

實(shí)現(xiàn)分離內(nèi)容和導(dǎo)航的第一步是，在web頁(yè)面上創(chuàng)建將插入可導(dǎo)航元素的占位符。對(duì)于每一個(gè)可導(dǎo)航元素的連續(xù)區(qū)域，你應(yīng)該創(chuàng)建一個(gè)具有唯一id的獨(dú)立DIV元素;這樣以來，以后你可以在你的JavaScript代碼中標(biāo)識(shí)它。為了防止過度晃動(dòng)，在創(chuàng)作頁(yè)面期間，目錄上方或右邊的DIV元素的尺寸應(yīng)該調(diào)整到非常接近你的可導(dǎo)航元素的實(shí)際大小;這樣，當(dāng)你使用希望的HTML代碼來代替它們時(shí)內(nèi)容就不會(huì)移動(dòng)位置。為此，一種最巧妙的方法是把一個(gè)空的適當(dāng)大小的DIV元素插入到該占位符處。

對(duì)于Informit網(wǎng)站來說，其頁(yè)面結(jié)構(gòu)已經(jīng)是良好設(shè)計(jì)的，且DIV元素已經(jīng)非常到位，如圖1所示。

圖1一篇Informit文章的頁(yè)面結(jié)構(gòu)

你僅需要從可導(dǎo)航DIV元素中刪除內(nèi)容并且插入一個(gè)空框，頁(yè)眉將會(huì)出現(xiàn)在這里(為了簡(jiǎn)短起見，我們將忽略把公司標(biāo)識(shí)和版權(quán)信息嵌入到每一個(gè)頁(yè)面中的討論)。下面是相應(yīng)的代碼：

        ＜div id="header"＞
        ＜div style="height: 100px; width: 100%"＞＜/div＞
        ＜/div＞
        ＜div id="contentArticle"＞
        ＜div id="firstCol"＞
        ... article content ....
        ＜/div＞
        ＜div id="secondCol" ＞＜/div＞
        ＜/div＞
        ＜div id="footer"＞＜/div＞
注意
如果你的web頁(yè)面使用表格來實(shí)現(xiàn)所希望的頁(yè)面布局，那么請(qǐng)不要把表格單元格重用作占位符；而把DIV元素放到表格單元格內(nèi)比較好一些。
已經(jīng)被從web頁(yè)面中刪除的可導(dǎo)航的元素必須被重新創(chuàng)建為獨(dú)立的頁(yè)面。你應(yīng)該使用靜態(tài)HTML文件來表達(dá)靜態(tài)內(nèi)容(這將允許緩沖內(nèi)容，不管你使用什么樣的web服務(wù)器)和在加載它們的web頁(yè)面上創(chuàng)建顯示基于動(dòng)態(tài)元素的服務(wù)器端腳本。對(duì)于Informit來說，每一個(gè)web頁(yè)面都有唯一一個(gè)文章標(biāo)識(shí)符(在URL中的"p="參數(shù))；因此，你需要?jiǎng)?chuàng)建一個(gè)能夠接受文章標(biāo)識(shí)符并創(chuàng)建右邊的欄目的服務(wù)器端腳本。在大多數(shù)情況中，你可以重用創(chuàng)建嵌入的可導(dǎo)航元素的服務(wù)器端代碼。
在重新設(shè)計(jì)這些web頁(yè)面后，接下來，你就可以實(shí)現(xiàn)本方案中的AJAX部分了。與通常一樣，你可以使用嵌入式框架(IFRAME元素)工作，也可以選用一個(gè)XmlHttpRequest對(duì)象。
三、 嵌入式框架
如果你關(guān)心瀏覽器兼容性的話，你應(yīng)該使用嵌入式框架。一些老式的瀏覽器支持IFRAME元素，但不支持XmlHttpRequest對(duì)象。當(dāng)然，使用這種方式還有如下一些理由：
· 被加載到一個(gè)IFRAME中的內(nèi)容在裝載的過程中被顯示于瀏覽器中，這向終端用戶顯示一個(gè)可視化進(jìn)程。
· 頁(yè)面緩沖總是使用加載到一個(gè)IFRAME中的內(nèi)容工作。一些版本的Opera還不能較好地使用XmlHttpRequest對(duì)象處理經(jīng)緩沖的響應(yīng)。
為此，我們可以把一個(gè)空IFRAME插入到每一個(gè)DIV容器中，并且在每一個(gè)IFRAME后添加一個(gè)簡(jiǎn)短的JavaScript語句，如下所示：
＜div id="header"＞
＜div style="height: 100px; width: 100%"＞＜/div＞
＜iframe id="header_iframe" style="height: 0px;"＞＜/iframe＞
＜script＞loadIframe("header"，"/navigation/header.html")＜/script＞
＜/div＞
IFRAME的id應(yīng)該等于以_iframe為后綴的占位符的id。loadIframe函數(shù)使用了兩個(gè)參數(shù)：占位符的id和要加載到其中的URL。
技巧
如果你想在下載過程中使得IFRAME內(nèi)容可見，那么你應(yīng)該使用一個(gè)適當(dāng)大小的IFRAME元素來替換在占位符內(nèi)的空的DIV框。然而，如果你想使IFRAME保持不可見，那么你應(yīng)該使用style屬性來把它的高度設(shè)置為０以克服一些瀏覽器中的錯(cuò)誤。
啟動(dòng)裝載過程的loadIframe函數(shù)是很簡(jiǎn)單的：
function loadIframe(id，url) {
try {
var iframeObj = document.getElementById(id+"_iframe");
iframeObj.src = url ;
} catch (err) {
alert("cannot load "+url+" into "+id) ;
}
}
注意
本文中所有示例代碼都假定，瀏覽器兼容文檔對(duì)象模型(DOM)。
然而，還沒有一種機(jī)制來通知請(qǐng)求頁(yè)面所希望的內(nèi)容已經(jīng)被加載到占位符IFRAME中。因此，被裝載的內(nèi)容必須通知父頁(yè)面(經(jīng)由一個(gè)JavaScript調(diào)用)可以使用該內(nèi)容了。實(shí)現(xiàn)這一操作的最好時(shí)機(jī)是，在頁(yè)面加載完成以后。因此，在IFRAME內(nèi)容中的BODY標(biāo)志應(yīng)該包含一個(gè)onLoad事件:
＜body  style="margin: 0px 0px;
padding: 0px 0px"＞
技巧
加載到IFRAME中的內(nèi)容的body部分應(yīng)該總是有零邊距和填充空白；否則，當(dāng)把它集成到父頁(yè)面中時(shí)，它將會(huì)輕微地遷移。
在IFRAME的上下文中執(zhí)行的contentLoaded函數(shù)將提取body部分相應(yīng)的HTML內(nèi)容并且把它傳遞到一個(gè)在父頁(yè)面上下文中執(zhí)行的函數(shù)，此函數(shù)將使用它來填充相應(yīng)的占位符：
contentLoaded在IFRAME上下文的上下文中執(zhí)行：
function contentLoaded(parentID) {
var myContent = document.body.innerHTML ;
parent.copyContent(parentID，myContent);
}
copyContent在父web頁(yè)面的上下文中執(zhí)行：
function copyContent(id，content) {
try {
var placeholder = document.getElementById(id) ;
placeholder.innerHTML = content;
} catch (err) {
alert("Cannot copy HTML content into "+id);
}
}
現(xiàn)在，細(xì)心的讀者應(yīng)該感到疑惑，為什么這么復(fù)雜？在IFRAME元素中加載導(dǎo)航元素不是更簡(jiǎn)單一些嗎？事實(shí)證明，對(duì)于此方法還要加一些防止誤解的說明為好：
· IFRAME具有固定的高度和寬度。如果內(nèi)容彼此超出，則內(nèi)容將被剪掉或者IFRAME要加上滾動(dòng)條。然而，被復(fù)制到一個(gè)在父頁(yè)面中的DIV元素中的HTML標(biāo)記其大小卻總是保持自動(dòng)調(diào)整大小。
· 當(dāng)在一個(gè)IFRAME中時(shí)，在導(dǎo)航內(nèi)容中的鏈接(一個(gè)元素)將裝載IFRAME中的新頁(yè)面，除非你把target="_parent"添加到每一個(gè)鏈接之后。
· 依附到導(dǎo)航元素的JavaScript事件處理器將在IFRAME的上下文中工作（如果還保留這個(gè)上下文的話）。如果你把導(dǎo)航內(nèi)容移動(dòng)主頁(yè)面上，那么事件處理器能夠存取在主頁(yè)面中定義的函數(shù)和變量。
四、 使用XmlHttpRequest
如果你的用戶主要使用Internet Explorer的較新版本或基于Gecko的瀏覽器(Mozilla，F(xiàn)irefox，Netscape 7)，那么你可以決定使用XmlHttpRequest對(duì)象來把其它內(nèi)容下載到你的web頁(yè)面中。第一步非常類似于前面描述的方式。對(duì)于每一個(gè)占位符，你需要一個(gè)JavaScript函數(shù)調(diào)用來啟動(dòng)加載過程：
＜div id="header"＞
＜div style="height: 100px; width: 100%"＞＜/div＞
＜script＞loadContent("header"，"/navigation/header.html")＜/script＞
＜/div＞
然而，loadContent函數(shù)是根本不同的：它創(chuàng)建了一個(gè)新的XmlHttpRequest對(duì)象，然后把一個(gè)事件處理器指派給它，并且異步啟動(dòng)裝載過程：
function loadContent(id，url) {
try {
var rq = new XMLHttpRequest() ;
rq.open("GET"， url， true);
rq.onreadystatechange = function() { contentLoaded(rq，url，id) }
rq.send(null);
} catch (err) {
alert("cannot load "+url+" into "+id) ;
}
}
注意
每一種主流瀏覽器家族都以一種不同的方式實(shí)現(xiàn)了XmlHttpRequest對(duì)象。處理這種兼容性問題的最容易的方法是，使用一個(gè)包裝器庫(kù)，例如Sarissa。我們?cè)诒疚闹惺纠芯褪褂昧诉@種庫(kù)。
回調(diào)函數(shù)contentLoaded負(fù)責(zé)檢查XmlHttpRequest對(duì)象是否已經(jīng)準(zhǔn)備好及完成狀態(tài)(如果請(qǐng)求已完成的話)，并且從響應(yīng)中提取HTML標(biāo)記。提取HTML代碼(除非你使用XHTML，這種情況下，你可以使用XMLDOM接口)的最容易的方法是，使用字符串處理函數(shù)來查找＜body＞和＜/body＞標(biāo)志之間的文本：
function contentLoaded(rq，url，id) {
try {
if (rq.readyState != 4) { return; }
if (rq.status != 200) { alert("failed to load "+url); return; }
var txt = rq.responseText ;
//查找＜body＞標(biāo)記的開始位置
var startBodyTag = txt.indexOf("＜body")
//查找＜body＞標(biāo)記的結(jié)束，跳過任何屬性
var endOfStartTag = txt.indexOf("＞"，startBodyTag+1)
//查找＜/body＞標(biāo)記
var endBodyTag = txt.indexOf("＜/body")
if (endBodyTag == -1) { endBodyTag = txt.length ; }
//提取實(shí)際內(nèi)容
var bodyContent = txt.substring(endOfStartTag+1，endBodyTag)
if (bodyContent) {
var placeholder = document.getElementById(id) ;
placeholder.innerHTML = bodyContent;
}
} catch (err) {
alert("cannot load "+url+" into "+id) ;
}
}
與前面描述的基于IFRAME的方法相比，使用XmlHttpRequest對(duì)象具有下列好處：
· 代碼更干凈，并且不依賴于頁(yè)面的上下文切換。
· XmlHttpRequest對(duì)象使你能夠檢測(cè)和處理錯(cuò)誤（通過它的readyState和status屬性）。而使用IFRAME加載內(nèi)容時(shí)，如果出現(xiàn)錯(cuò)誤，則只能顯示非常粗略的錯(cuò)誤提示，這主要是因?yàn)槿狈?duì)回調(diào)函數(shù)的調(diào)用。
· 你能夠?qū)崿F(xiàn)內(nèi)容元素的平行裝載(如在這一節(jié)中顯示的)或順序化裝載請(qǐng)求以最小化帶寬利用。

五、 小結(jié)
在本文中，你學(xué)習(xí)了怎樣實(shí)現(xiàn)把你的web頁(yè)面內(nèi)容與包圍該內(nèi)容的可導(dǎo)航元素分離開來。分離導(dǎo)致更為集中地描述搜索引擎要搜索的頁(yè)面內(nèi)容，并且也減少了用戶使用低速互聯(lián)網(wǎng)存取的加載時(shí)間（既然是在可導(dǎo)航元素被下載之前把實(shí)際內(nèi)容顯示給用戶）。
當(dāng)重新設(shè)計(jì)你的web頁(yè)面來利用這種方案時(shí)，切記，一些基本格式的導(dǎo)航必須保留在頁(yè)面上以便允許搜索引擎和決定禁止使用JavaScript的用戶在你的網(wǎng)站的頁(yè)面之間進(jìn)行導(dǎo)航。
你可以使用嵌入式框架(IFRAME)或使用在最現(xiàn)代瀏覽器中實(shí)現(xiàn)的XmlHttpRequest對(duì)象來實(shí)現(xiàn)可導(dǎo)航元素的延遲裝載。IFRAME方法能夠?yàn)檩^老式的瀏覽器所支持；因此，它可能是你要考慮使用的方法-如果你非常關(guān)心向后兼容問題的話。另一方面，XmlHttpRequest對(duì)象的使用使你能夠更為緊密地控制裝載過程并能夠檢測(cè)和處理下載錯(cuò)誤。

站長(zhǎng)網(wǎng)新聞榜 www.admin5.com/top