DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁SEO優化 >> SEO優化集錦 >> JavaScript解析:讓搜索引擎看到更真實的網頁
JavaScript解析:讓搜索引擎看到更真實的網頁
編輯:SEO優化集錦     

長期以來,站長們選擇使用JavaScript來實現網頁的動態行為,這樣做的原因是多種多樣的,如加快頁面的響應速度、降低網站流量、隱藏鏈接或者嵌入廣告等。由於早期的搜索引擎沒有相應的處理能力,導致在索引這類網頁上往往出現問題,可能無法收錄有價值的資源,也可能出現作弊。

引入JavaScript解析的目的,正是為了解決上述兩方面的問題,其結果也就是使搜索引擎可以更為清晰的了解用戶實際打開該網頁時看到的效果。比如有些網站會將用戶評論、評分等信息從網頁HTML中抽離,利用JavaScript甚至AJAX等方法在頁面被打開的時候動態顯示出來,早期的搜索引擎此時能處理到的頁面內容就是缺失的,由此會進一步影響對該頁面索引價值的判斷。

要引入JavaScript解析,需要考慮本身的設計與實現、解析速度和對系統其它方面影響等因素,本文通過一些典型的案例來分析如何設計並實現一套網頁JavaScript解析系統,並簡要介紹這樣的系統對於搜索引擎其它部分的作用和影響。

一、發現頁面鏈接

一般來說,頁面鏈接都是以HTML中的A標簽形式存在,鏈接URL標記在href屬性中,但實際存在著一些網站會選擇更為“動態”的方式,較為常見的方式有兩種:一種是動態寫入或調整A標簽,另一種是在用戶點擊的時候觸發事件改變默認的鏈接打開方式。

1. 動態寫入或調整鏈接標簽

抽象的說,網頁要實現這樣的效果,乃至後文描述的其它效果,與把大象放入冰箱極為類似,分為三步:找到要寫入/修改的目標(找到大象),准備好要寫入/修改的內容(打開冰箱門),執行寫入/修改(把它放進去)。

這三步操作映射到JavaScript上,就是先後調用三組標准的浏覽器功能函數:頁面元素定位、數據准備以及頁面修改。那麼,JavaScript解析的工作就是同樣提供出這樣的函數,隨著被站長的JavaScript代碼調用自然的發現相應的內容和行為。

分析至此,所需實現的函數也就基本確定了,其中較為簡單的包括:

document.getElementById // 定位

document.getElementsByTagName // 定位

document.getElementsByClassName // 定位

node.[firstChild/nextSibling/previousSibling/parentNode] // 定位

document.[createElement/createTextNode] // 創建鏈接

node.[appendChild/insertBefore/innerHTML=?] // 寫入內容

element.getAttribute, element.setAttribute // 設置屬性

element.href = ? // 設置屬性

至於要寫入的內容,可能是以數組等形式保存在JavaScript種,也可能是使用AJAX動態加載。前者屬於JavaScript語言的內置功能,此處不再復述;後者是一個單獨的話題,會在後文專門討論。

2. 點擊時觸發事件改變默認的鏈接打開方式

頁面這樣做的原因不一,有的是為了隱藏鏈接,有的是為了實現彈出窗口,有的則是為了程序拼接URL,還有的是做檢查看是否應該打開鏈接等等。但所有這些原因都對應著同樣的實現方法:添加click事件。

添加click事件的方法有三種:

1.將A標簽的href屬性設置為“javascript:func(…)”的形式

2.設置A標簽的onclick屬性,設置為onclick=”js_code” 的形式

3.調用事件綁定函數,如my_link_node.addEventListener('click', func, false)

支持這三種方法本身是較為簡單的,需要注意的地方在於如何觸發這樣的click事件,以及如何在觸發之後截獲目的URL。

對於觸發事件而言,首先需要收集到所有可能的click事件,而後再依次觸發。但對於每一個要觸發的click而言,實際觸發之前必須先檢查其是否還存在,這是由於在其之前的click事件很可能已經把當前這個click刪除掉了。

要做到截獲URL,首先要實現相關的頁面跳轉函數,既location.href = ?,window.open等。而後通過設置一系列標志,將本次點擊和頁面跳轉關連起來,如此也就得到了目標URL。

二、動態頁面內容

頁面動態內容是一種提升頁面加載速度、增強網站技術靈活性的手段,可以將那些會改變的內容(如評論、評分等)抽離,使頁面分為靜態和動態兩部分:靜態內容可以使用緩存等方法加快頁面顯示速度、降低網站流量;動態內容則有格式簡單好生成的優勢,同時也能節省流量。

另一方面,動態內容也是加載廣告和內容作弊的重要方法,最常見的就是寫入iframe,這對於早期搜索引擎而言有極大的隱蔽性。

在技術層次上,動態頁面內容所需要的工作與上一節“動態寫入或調整A標簽”在很大程度上是相同的,這裡需要增加的是經典的“document.write”方法。

該方法是最早的JavaScript功能之一,用於向頁面直接寫入一段HTML代碼,至今仍在廣泛使用。對於該方法,早期的搜索引擎都有所支持,但方法基本限於字符匹配,僅能支持最直接的寫入一個JavaScript字符串的方式,對於稍微復雜的文本拼接顯得無能為力。但對於JavaScript解析而言,這段代碼終究是要符合語言規范的,因此就能做到完整支持,處理文本拼接、條件判斷和混淆代碼等各種情況。

這裡還需要討論的一點是嵌套的document.write,也就是通過document.write寫入一個SCRIPT標簽,該標簽內部是另一段document.write。這類問題在跳轉作弊頁面中屢見不鮮,對其支持就不只需要JavaScript解析,還需要HTML解析器能夠支持處理嵌套的HTML寫入功能,這裡就不加以分析了。

通過上述方法,無論是網頁的主體信息,還是廣告或其它輔助信息,都會被暴露出來,從而更好的理解站長意圖。

三、網頁跳轉

網頁跳轉在有些情況下是達到頁面效果的必要選擇,但同樣會用於作弊。在技術上,多以下面兩種方式出現:

1.直接調用頁面跳轉函數

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved