以SEO的角度來分析HTML5與搜索引擎優(yōu)化的聯(lián)系

時間：2022-05-25 19:24:01 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-25 19:24:01 來源：網(wǎng)絡(luò)營銷

HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標(biāo)準(zhǔn)的 HTML 標(biāo)準(zhǔn)版本，現(xiàn)在仍處于發(fā)展階段，但大部分瀏覽器已經(jīng)支持某些 HTML5 技術(shù)。HTML 5有兩大特點：首先，強化了 Web 網(wǎng)頁的表現(xiàn)性能。其次，追加了本地數(shù)據(jù)庫等 Web 應(yīng)用的功能。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。其實我覺得HTML5的興起完全是因為iPhone和iPad，自從Adobe停止開發(fā)flash、Android4.0不支持flash后，我覺得在不久的將來HTML5會廣泛應(yīng)用，而且HTML4已經(jīng)10年沒更新了。

一、HTML5 的特性：

A、語義特性（Class：Semantic）

HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對RDFa的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對程序、對用戶都更有價值的數(shù)據(jù)驅(qū)動的Web。

B、本地存儲特性（Class: OFFLINE & STORAGE）

基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動時間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲功能。Indexed DB（html5本地存儲最重要的技術(shù)之一） 和API說明文檔。

C、設(shè)備兼容特性 (Class: DEVICE ACCESS)

從Geolocation 功能的API文檔公開以來，HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來了更多體驗功能的優(yōu)勢。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)

D、連接特性（Class: CONNECTIVITY）

更有效的連接工作效率，使得基于頁面的實時聊天，更快速的網(wǎng)頁游戲體驗，更優(yōu)化的在線交流得到了實現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現(xiàn)服務(wù)器將數(shù)據(jù)’推送’到客戶端的功能。

E、網(wǎng)頁多媒體特性(Class: MULTIMEDIA)

支持網(wǎng)頁端的Audio、Video等多媒體功能，與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。

F、三維、圖形及特效特性（Class: 3D, Graphics & Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺效果。

G、性能與集成特性（Class: Performance & Integration）

沒有用戶會永遠等待你的Loading——HTML5會通過XMLHttpRequest2等技術(shù)，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。

H、CSS3特性(Class: CSS3)

在不犧牲性能和語義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強的效果。此外，較之以前的Web排版，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性。

二、HTML5與HTML4代碼結(jié)構(gòu)對比

HTML5很多功能已經(jīng)被介紹過了，比如在圖片中可以直接寫標(biāo)題（不是alt哦），更精簡的代碼，直接用HTML5播放音頻、視頻，HTML5新增了不少內(nèi)聯(lián)元素，這為黑帽SEO節(jié)約了一筆不菲的時間。不過主流瀏覽器支持的比較少，對此億企邦在這里就不介紹了，以后會在億企邦上一一來講解。

隨著HTML5的到來傳統(tǒng)的<div id="header">和<div id="footer">無處不在的代碼方法現(xiàn)在即將變成自己的標(biāo)簽如<Header>和<footer>，下面以一張圖來表達更為清楚：


（傳統(tǒng)的div+css寫法）

（HTML5的寫法）

可以看看出HTML5的代碼可讀性更高了，也更簡潔了，內(nèi)容的組織相同，但每個元素有一個明確的清晰的定義，不再被迫去猜測之間不同命名的<div>標(biāo)記，搜索引擎可以更容易地衡量你網(wǎng)頁上的內(nèi)容和相關(guān)內(nèi)容。

對于Web用戶來說，F(xiàn)lash既是一個驚喜，也是一種痛苦。有很多的Web開發(fā)人員對HTML5對Flash產(chǎn)生的威脅很不滿。但對于那些忍 受著要花幾年時間加載和運行的臃腫的Flash視頻的人來說，用新的 <canvas> 標(biāo)記生成視頻的技術(shù)已經(jīng)到來。

目前， <canvas> 標(biāo)記并不能提供所有的Flash具有的功能，但假以時日，F(xiàn)lash必將從web上淘汰。我們拭目以待，因為很多人還并不認同這種觀點。

HTML 5(text/html) 瀏覽器將在錯誤語法的處理上更加靈活。HTML 5在設(shè)計時保證舊的瀏覽器能夠安全的忽略掉新的HTML 5代碼。與HTML 4.01相比，HTML 5給出了解析的詳細規(guī)則，力圖讓不同的瀏覽器即使在發(fā)生語法錯誤時也能返回相同的結(jié)果。

三、html5中值得介紹的一些標(biāo)簽

雖然我們看到了HTML5的簡潔和強大之處，但據(jù)億企邦所了解，很多人制作html頁面的時候不會按照語義來書寫代碼。邊欄（aside）會寫成sidebar，如果是這樣的話，會使網(wǎng)頁更加混亂，最終導(dǎo)致搜索引擎不好理解。

noscript標(biāo)簽將會被大量使用，因為HTML5時代將會是一個富媒體時代。傳統(tǒng)的文字、圖片、鏈接、視頻、音頻可能已經(jīng)滿足不了用戶的需求，大量的腳本能夠編輯出豐富的信息，包括游戲、個性化設(shè)計等等。

time標(biāo)簽可能會作為一個來判斷網(wǎng)頁文字源，也就是能夠通過time標(biāo)簽來識別哪篇文章是原創(chuàng)的。而time標(biāo)簽可能將是成為HTML5時代SEO們爭論不休的一個標(biāo)簽。

video標(biāo)簽中間區(qū)域的文字信息將會讓搜索引擎讀懂視頻，這是一次飛躍。

四、HTML5 元素變化

新的解析順序新的元素：section, video, progress, nav, meter, time, aside, canvasinput

元素的新屬性：日期和時間，email, url。

新的通用屬性：ping, charset, async

全域?qū)傩裕篿d, tabindex, repeat。

移除元素：center, font, strike。

五、搜索引擎會抓取HTML5嗎？

這是一篇來自Google站長論壇John Mu的文章，我覺得比較中肯，拿來給大家分享下：

“一般來說，我們（Google）的搜索引擎爬蟲是不能夠百分百地從語法層面去精確地描述或者分析HTML中的標(biāo)簽的，新興的HTML5也不例外。如果HTML5組織的網(wǎng)站越來越多，并且在實際當(dāng)中給我們的爬蟲抓取信息帶來方便與效益的話，我們會盡力將完善我們的算法去迎合HTML5的標(biāo)簽特性。要記住的是，我沒有明確地支持你們大家都用HTML5來構(gòu)建網(wǎng)站，并且我沒有明確提出希望大家的網(wǎng)站由于用HTML5來構(gòu)建而在搜索當(dāng)中獲得很好的對待。HTML5仍然有許多地方需要不斷完善，而如果大網(wǎng)站致力于運用HTML5的話將是令人振奮的事。”

對于HTML5，我覺得它仍沒有得到廣泛的推廣與應(yīng)用，因此我們暫時不會將焦點放到它上面，我們不肯定使用HTML5構(gòu)建的網(wǎng)站比用舊版本的HTML構(gòu)建的網(wǎng)站在搜索中是否表現(xiàn)出優(yōu)勢。

Google尚未準(zhǔn)備好，百度更不用說了。

六、HTML5跟網(wǎng)站SEO的聯(lián)系


1、使搜索引擎更加容易抓取和索引

對于一些網(wǎng)站，特別是那些嚴重依賴于FLASH的網(wǎng)站HTML5是一個大福音。如果你有一個都是FLASH的站點，你就一定會看到切換到HTML5的 好處。首先，搜索引擎的蜘蛛將能夠抓去你的站點和索引你的內(nèi)容。所有嵌入到動畫中的內(nèi)容將全部可以被搜索引擎讀取。在搜索引擎優(yōu)化的基本理論中，這一方面將會驅(qū)動你的網(wǎng)站獲得更多的右擊流量。

2、提供更多的功能，提高用戶的友好體驗

使用HTML5的另一個好處就是它可以增加更多的功能。對于HTML5的功能性問題，我們可以從全球幾個主流站點對它的青睞就可以看出。社交網(wǎng)絡(luò)大亨Facebook已經(jīng)推出他們期待已久的基于HTML5的iPad應(yīng)用平臺，潘多拉最近也推出他們基于HTML5的音樂播放器的新版本。游戲平臺 Zynga最近也在推出了三款新的在移動設(shè)備瀏覽器上運行的基于HTML5的游戲等等。每天都有不斷的基于HTML5的網(wǎng)站和HTML5特性的網(wǎng)站被推 出。保持站點處于新技術(shù)的前沿，也可以很好的提高用戶的友好體驗。

3、可用性的提高，提高用戶的友好體驗

最后我們可以從可用性的角度上看，HTML5可以更好的促進用戶于網(wǎng)站間的互動情況。多媒體網(wǎng)站可以獲得更多的改進，特別是在移動平臺上的應(yīng)用，使用 HTML5可以提供更多高質(zhì)量的視頻和音頻流。到目前位置，事實就是iPhone和iPad將不會支持FLASH，同時ADOBE公司也在近期公開聲明將 停止FLASH基于移動平臺的開發(fā)，現(xiàn)在我們已經(jīng)可以這么說移動平臺日后視頻音頻是HTML5的天下。

七、最終用戶優(yōu)先(Priority of Constituencies)

“In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.”

一旦遇到?jīng)_突，最終用戶優(yōu)先，其次是作者，其次是實現(xiàn)者，其次標(biāo)準(zhǔn)制定者，最后才是理論上的完滿。

當(dāng)HTML5提供了一些令用戶興奮的東西，其次產(chǎn)品得到更好的展現(xiàn)，其次我們可以放心地使用它們，其次元素被更謹慎的方式定義，最后搜索引擎也不再淡定了。

億企邦點評：

看到以上的介紹，想必有些人就立馬有種把自己網(wǎng)站改成HTML5的沖動，但是在這億企邦還要勸下各位目前仍不要因為優(yōu)化而使用HTML5。谷歌已經(jīng)表示過，對于HTML5的站點，它們并不會給與特殊的照顧。所以億企邦認為目前位置還沒有必要為了優(yōu)化而將站點轉(zhuǎn)換為HTML5的站點。互聯(lián)網(wǎng)的發(fā)展是爆炸式的，每天都有不一樣的事物出現(xiàn)。對于我們優(yōu)化除了要與時俱進的同時也要對這些新事物進行一個深度的思考，考慮是否符合自己的需求，不能只是盲目的跟風(fēng)，才能使自己的站點走得更加的遠。