HTML5是最新的HTML標準,陸續許多網站架設開發人員都會發現需要使用到這個最新的標準,同時會感覺到,重新開發一個HTML5的網站,要比把一個網站從HTML4遷移到HTML5上容易的多,這是因為這兩個版本之間有很大不同之處。既然兩個版本之間就存在很大不同之處,那麼他們對SEO又存在怎樣的差異性呢?
首先從網站性能角度來說,HTML5首先是縮減了HTML文檔,比起HTML4它使SEO這件事情變得更簡單。
就從用戶可讀性上說,原先一大堆東西,像SEO初學者第一次看到這些東西是看不懂的,而HTML5的聲明方式對用戶來說顯然更友善。
第一,文檔編碼的聲明,用HTML5方式的話,就更簡單。
第二,就是標籤的差異性。在SEO中不是一件很常見的事情,但是卻是比較值得推崇的,就是使用更簡潔的標籤方式。HTML5從這個名字大家可以聽出,它是從HTML4繼承過來的。HTML4裡面有嚴格模式跟過渡模式,HTML5是支持這種過渡模式的,就是你可以不把一些標籤閉合。但是,我並不推薦所有的標籤,比方說BODY標籤的不閉合,這種我們不推薦。但是像P標籤最常用的,還有列表標籤LI。為什麼這樣說?首先從視覺的角度來說,這樣的方式更簡潔一點。然後關鍵的是在文檔傳輸過程中,內容會更少。
第三,做SEO的人都知道,網頁速度對於SEO的優化有多重要,所以接下來我們談論的是關於圖片的優化,圖片永遠是又愛又恨的元素。因為當圖片多的時候,會嚴重拖垮整個頁面的加載速度。關於圖片的優化方式,之前章節已經有陸續說明過,總結起來主要有三點:使用精靈圖、優化圖片的大小,使用DATA URI。
而我們要說的是圖片優化的另一個思維是:no-image。拋棄圖片,擁抱CSS3。HTML4 需要設置一張圓角效果的圖片,現在使用CSS3中的 border-radius;原先HTML4需要設置陰影效果的圖片,現在使用CSS3中的box-shadow;原先HTML4需要設置漸變的背景圖片,現在使用CSS3中的gradient。
接下來再講一個Prefetching,預取,是SEO在HTML優化的另一個思維。我們現在優化的思維無非就是少。很多都是從少的角度,比方說前面把文檔大小減少,把圖片的大小減少。很多張的圖片變成一張精靈圖,都是為了把發送請求的數量減少。預先載入的話,是另一種思維,提早加載好資源,用戶去點的時候,實際上已經加載好,那速度當然是更快。
其實預先加載只是在瀏覽器空閒的時候才會去拉,但不保證一定會去拉,這是很重要的一點。因為本身瀏覽器有一個全局的監控器,這是內部的一個接口,當瀏覽氣空閒的時候,它會去執行瀏覽器空閒的時候應該做事情,但是空閒會執行預加載。
Chrome不支持HTTP4資源的預加載。
一個預拉取的頁面雖存在後不可見,實際上它是在正常解析。假如說我預拉取登陸頁面,登陸頁面有很多資源,比方說有圖片,有CSS文件,JS文件。它是從上往下正常的會被解析,解析的過程中,這個頁面沒有顯現,但是它實際上是存在的。而在HTML5裡面,可通過document.visibilityState得到當前頁面狀態,通常頁面有兩種狀態,可見與不可見,但是現在有一個新的狀態,叫做預渲染的狀態。可以直接通過document.visibilityState 是否等於prerender 來判斷頁面是否在預渲染狀態。
其實,我們從上面幾個HTML4與HTML5關於SEO的差異性,我們可以直接發現對於SEO工作者來說,HTML5明顯優於HTML4!