跳到主要內容

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。我們留到其他篇再來提吧!

參考書籍

(利益揭示:以上有博客來AP及卓越亞馬遜連結,你從下方連結購書我可以獲得一定比例的回饋)
Enhanced by Zemanta

留言

這個網誌中的熱門文章

2022年了, Google 都建議你不要做 sitemap 了:重新認識 SEO 中的 Sitemap

首先,如果我跟你說你的網站 其實可能「不」需要 Sitemap ,我想這句話會顛覆多數人的認知,但實際上這句話卻是 Google 官方文件白紙黑字寫出來的[1],以下是可能「不」需要 Sitemap 的情況: 網站規模很「小」:所謂的規模很「小」,指的是網站的 網頁數不超過 500 個  (以您認為有需要納入搜尋結果的網頁為準)。 網站內部的連結完善:這表示 Google 可以透過首頁的連結找出網站上所有的重要網頁。 要顯示在搜尋結果中的媒體檔案 (影片、圖片) 或新聞網頁數量不多:Sitemap 可協助 Google 在您的網站上找出影片和圖片檔或新聞報導,並加以解讀。如果您不需要讓這些內容出現在圖片、影片或新聞搜尋結果中,可能就不需要 Sitemap。 其實絕大多數各位手邊的網站,真的有需要納入搜尋結果的網頁,各位請自行捫心自問一下:真的有超過 500 頁嗎?如果是電商,你的商品數真的有那麼多嗎?當然這是極端的說法,因為我相信大家都會覺得說:那有一天我超過 500 個怎麼辦,或是我是新網站怎麼辦?

用 ChatGPT 來做 SEO 的基礎內容建設是否能被搜尋引擎接受?實驗不到一個月我有了答案

身為一個 SEOer ,看到任何有趣的新東西,自然就是在思考:這個東西對 SEO 是不是有幫助?就像當年寫部落格是為了外鏈自建跟內容生成, Facebook 剛開始的年代,上面的外鏈全部是 DoFollow(具有價值的連結),所以我玩起了 FB 。但這麼多年來, ChatGPT 真的是我花最大量心思去投入的工具,因為他對我的 SEO 策略真的太有幫助了,但這些想法都是假設,於是我自己展開了實驗。我利用 ChatGPT 以及其他延伸的工具來產出「相對可能沒那麼 100% 專業,但應該有 80 分水準以上,適合普羅大眾觀看」的內容,大概步驟如下:

SEO建議做在QDM內建還是WordPress上比較好?電商內容行銷實務分享

那天有一位社團成員匿名發問:SEO建議做在QDM內建還是WordPress上比較好?他的問題是: 我們家使用QDM系統,有意願做SEO,之前因為QDM內建的部落格版面老闆覺得醜,所以另外用Wordpress自建了一個部落格目前兩邊都是有文章的,想問大家這個情況,SEO建議做在QDM內建的還是Wordpress上比較好呢? 其實他的問題是:如果我想透過內容行銷或產生文章來做好 SEO ,那我應該用電商平台內建的部落格功能,還是另外架設一個外部網站(如用 WordPress)來放內容呢?這個問題嚴格來說是老生常談,但在回答這個問題之前,我們先複習一下先前 台灣電商開店平台 SEO 能力大解析 中,電商平台 有沒有部落格功能這一評分標準 ,其實就會跟我們今天的解答有關係。