HTML5 與 SEO - HTML4/XHTML 與 HTML5 語義架構的差別

許多人都在問：HTML5真的有助於SEO嘛？這點我們可以從XDite大大在Google+上的發文可以看到，這答案是肯定的！不過這中間可能會有一個邏輯上的誤區：不是HTML5帶來SEO的效益，而是網頁正確語義化及HTML5更完美的架構，導致了搜索來量的提升。這也是為什麼，未來從事SEO工作的時候，我們可能要將HTML5化，作為SEO工作之一。



反過來說，我們現在使用的HTML4/XHTML，難道就不能語義化嘛？這點半對半不對。在HTML4/XHTML中，除了傳統的td,tr切版方式的網頁製作外，DIV+CSS的版面配置已經逐漸受到重視。所以，一個基礎的網頁我們可能有這樣的配置。

嗯，看起來很熟悉吧。不過這是很基礎的DIV配置，還沒有做到語義化的目的，所以在HTML5出來前，依據W3C的規則，我們其實可以利用"id"這個元素，來幫我們的每個DIV「取名」，其實只要做到這一步，搜索引擎就已經可以清楚辨識每個DIV的作用，並正確找到文章的重點，所以在HTML4/XHTML中的語義化實現是：

See，這樣用id來幫DIV命名，跟前一張圖相比較，連中文附註都不用，就可以很清楚知道版塊的用意，同樣的搜索引擎也能快速的了解網頁。但是在HTML5中，新增了header、article、section、footer、aside、nav等標籤，來協助我們在使用HTML5做到更好的語義架構，也更容易讓搜尋引擎快速的了解一整頁的重點，所以從上圖的架構來說，利用HTML5來做編輯的話，可以調整為：

好了，我想從基礎架構來說，你應該已經知道HTML5下的語義架構下，該怎麼去調整自己的網站了吧！不過有幾個容易搞混的地方還是要提醒一下：

• 所謂「標籤」，在語義上就表示包含的內容是具有意義的。所以不要遇到區塊就用section去包。像是Logo一些無意義的內容，div還在，請善用。
• 不要凡是遇到「列表」或是「導覽列」就用nav，個人的基本分類原則：連站內的再用nav，如果是要導航到外站的，請用section，或是div就好。

其他常見的誤區，可以參考XDite的如何設計出正確語意的 HTML5，或是觀賞這份由HTML5體現的Slide:HTML5 語意標籤理論與實戰。其他像是hgroup體現heading tag的正確表示、aside的運用、time及address以及更重要的HTML5中的microdata。我們留到其他篇再來提吧！

參考書籍

• HTML5：建置與執行
• HTML5与CSS3权威指南（簡，台灣無售）

（利益揭示：以上有博客來AP及卓越亞馬遜連結，你從下方連結購書我可以獲得一定比例的回饋）