heading(h1,h2,h3…) 標簽的用法

  1. 當前位置:
  2. 首頁
  3. 新聞動態
  4. 正文
Read:0

學會合理的使用heading標簽應該算做是使用符合w3c的義語Xhtml進行頁面構架的第一步。今天正好就朋友問起我h1標簽的用法,那么我來說說我的習慣。
首先我要知道,什么是heading標簽?
heading是h1,h2,h3,h4,h5,h6 這六個Xhtml標簽的統稱,既標題的意思。六個標簽的權重由大到小,既h1為大標題,h6為最小的標題。
寫法為(h1)內容(/h1);heading標簽均為塊級元素(block),其嵌套規則在XHTML標簽的嵌套規則一文中有提到過。 
為什么要使用heading標簽?
在珍愛生命 遠離“DIV”+ CSS 一文中我們說到,所謂div+css,其實只是我們通俗的叫法,正確的叫法應該是Xhtml+css。
我們所使用到的標簽,都應該是有含義的:比如ul是無序列表,適合做新聞列表;ol是有序列表,適合做排行版;del是刪除線,適合用來放b2c的“原價”;address里放的是地址;blockquote大段引用…其它義語標簽的用法,在這里暫不一一列舉,等等這些,為得是能讓搜索引擎知道,這些內容到底是什么意思,也算是比較淺顯的所謂人機交互。
義語標簽對于SEO的重要性大家都很明白,那么heading標簽,顧名思義,標題!它們的重要性大家可想而知。
heading標簽是用來詮釋整個網站、頻道、欄目甚至文章段落的標簽。
關于heading標簽的用法,網上眾說紛紜,我參考了官方的說明及結合了許多網站的構架、優化經驗,總結了一套自己認為合理的使用方法,僅供參考。
以下方法適用于行業門戶網站、購物商城、電子商務網站、企業網站等類型的站點。如像新浪、網易那樣的大站,可以把其諸如旅游頻道、科技頻道等欄目理解為一個獨立網站。
h1,h2,h3 的用法:
h1 — 大標題,放置于首頁頂部區域,通常即導航以上的部分,全站通用,用來詮釋整個網站的內容,應包含網站主關鍵字,但切忌不要進行關鍵字堆砌。最好是在網頁源代碼的body標簽一開始的第一個容器中第一行出現。且保證一個頁面中只出現一次。
h2 — 副標題,每個頁面出現的次數以1-3次為宜。
首頁:同h1,放置于主頭部區域,于h1的下方,全站調用,同樣用于概括整站的內容。或者在頭部通用區域的下方,首頁內容的開頭或者中間部分使用一次,用于詮釋首頁的內容。
子頻道頁:無論頂部區域是否出現過一次h2,可結合實際情況在頭部通用區域的下方,頁面內容的開頭部分使用一次,用于詮釋頻道頁面的內容。
(以上2種方法可以任選其一,也可以同時并存)
文章/產品內頁:文章的標題使用h2標簽。
按以上方法,h2標簽最多會被使用到3次,但是請少使用1次。據以往經驗來看,文章/產品內頁使用h2標簽效果顯著!

圖例:

設計師在進行頁面設計的時候就應該實現構思好heading標簽的放置位置。這是云南電玩網的頂部設計。其中首頁body中代碼的一開始就出現了h1標簽,內容為“云南電玩網,昆明電玩在線購物商城”。緊接著logo用的是h2標簽,插圖的alt屬性里寫著“云南電玩網-昆明最大的掌機,電視游戲機網購平臺”。
主意兩個標簽措詞不同,但均包含了網站的主要關鍵字。
這里值得說明的是,有的網站的設計感會很強,很難給heading標簽預留出前合適的位置,那么這里可以采用的是,把頁面中出現的第一個img放在h1里,比如logo,在其alt屬性中寫入網站名稱或關鍵字。那么對于SEO的效果來說,經嘗試是有作用的,至于效果,個人認為肯定會比把heading標簽里的文字直接出現在頁面上要略差一點。

西華通訊手機在線銷售b2c,用的是h1,h2在頂部全站通用。

云南貨架網,企業網站。頂部全站調用一個h1,首頁使用獨立的h2,每個頻道頁面用自己獨立的h2。
h3— 小標題,個人愛用于欄目的名稱,如圖:

以香格里拉旅投集團為例,首頁及內頁的欄目標題均使用h3標簽。至于h3的使用次數,沒有明確的規定,大家用到該用的地方就行。剛才說道h2適用于文章內頁的文章標題上,那么h3我通常也用到文章的分段標題上,如本文一開始的“首先我要知道,什么是heading標簽?”等。
以上主要講述了h1-h3這3個heading標簽的用法,至于h4-h6,并沒有前3個那么常用,大家只要記得它們的權重為降序,舉一反三即可。
heading標簽的用法很靈活,jason在這里也只是拋磚引玉,后續的文章中我們會逐一分享到title的調用方法及strong與heading的區別等一些列SEO知識,敬請期待。