跳到主要內容區塊

政府網站營運交流平台-中文

網路趨勢與社群應用分享

網頁內容架構-h1的使用

如果不了解甚麼是h1?h1對網站有甚麼重要性?可以參考這篇文章-How to Create the Perfect H1 Tag for SEO[註1],在這裡就不再重複贅述。

那我們現在還有甚麼要談的呢,這裡想要來談談最近比較多人的疑問,而且是非常實際的問題,就是「將h1擺在網頁的哪裡呢」,有人說放在網頁的上方、中間、左方、右方,更具體一點的有人會說放在網站名稱logo等。其實這問題問法似乎感覺哪個地方不對,「擺在網頁的哪裡」是從視覺的角度去問這個問題,而視覺可說是設計的複合體(包含各種元素,以及設計者的奇檬子),它的焦點不一定等同於資訊內容的重點,因此,h1的問題應該要先問「資訊內容的重點在哪裡」。對於一個接受委託進行開發建置網站的開發人員來說,自然很可能無法清楚理解網頁中的哪一個內容才是重點,如果有人告訴開發人員這個網頁的重點是它時,開發人員就能為它設定好h1。如此看來,h1要放在網頁的哪個內容上,能做這個決定的應該是落在面對眼前網頁的內容,非常熟悉且完全了解要凸顯甚麼樣的重點的人(一般就是提供內容的人)身上,一旦h1決定好設定起來,h2-h6的層級也能依序展開。因此,h1的角色作用,套個老梗,主角有沒有站在舞台的中心位置不重要,因為主角站的位置就是中心點。

站在中心點位置的主角h1

H1-H6的標題層級架構

H1-H6的標題層級架構

h1對網站SEO(Search Engine Optimization)的功用,在開頭所述的文章中已獲得實證,另外網頁使用h1-h6標頭除了能以程序化的方式了解資訊內容之間的關係[註2],很重要的目的是做好網頁的組織結構[註3]。從這個角度來思考網頁內容結構的布局,以及h1如何使用,回推確認h1的位置,這樣做應該是比較合理。依據W3C WCAG2.0技術指引,使用h1提供網頁的整個標題,然後h2為主要的章節,h3為主要章節的次章節,依序使用到最後一層為h6等[註4],對照How to Create the Perfect H1 Tag for SEO一文所強調的h1完美用法,h1代表的是網頁的整個標題,因此網頁中只使用1個h1、h1應描述該網頁的主題、讓h1在視覺上凸顯出來,看起來這麼做完全合理。

我們再回到實際的情況,有人說在首頁h1放在網站名稱logo上,我們從前面所提的點來看看合不合理,一般網站的首頁都會充滿著被認為重要的資訊內容,如果問網站管理人員認為哪一項資訊最重要,得到的答案可能是都很重要,如果再問這個頁面主要是要傳達甚麼訊息,得到的答案可能是要傳達網站首頁,並且網站名稱logo也非常醒目,因此,在首頁上將h1放在網站名稱logo上,看起來合理。那進入到內容頁面的情況呢?如果這時h1仍然放在網站名稱logo上,這將使h1的描述與首頁一樣,先不管SEO效果不佳的問題,我們再來問網站管理人員覺得在內容頁面中哪一項資訊最重要,得到的答案肯定是資訊內容本身,在進一步問這個頁面主要是要傳達甚麼訊息,答案肯定是該資訊內容標題所描述的內容,而且該標題看起來應該也非常醒目,所以,h1適合放在資訊內容標題上,如果h1仍然放在網站名稱logo上,肯定是不怎麼合理!

參考資料:

註1.How to Create the Perfect H1 Tag for SEO」。

註2.網頁中的標頭組件必須要按照正確的巢狀層次結構來配置」。

註3.使用標頭來組織網頁」。

註4.G141: Organizing a page using headings」