DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁SEO優化 >> SEO優化集錦 >> 實例分析heading(h1,h2,h3)標簽在SEO中的作用
實例分析heading(h1,h2,h3)標簽在SEO中的作用
編輯:SEO優化集錦     

學會合理的使用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標簽的放置位置。這是雲南電玩網(http://www.lhave.com)的頂 部設計。其中首頁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知識,敬請期待。

轉載請注明出處:雲南網站設計師jason http://www.p

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved