HTML H1 H2 H3標題標籤是什麼?搞懂 Heading tags,SEO友善的文章架構沒煩惱!

H標籤(H1~H6)是撰寫網頁內容不可或缺的架構工具,寫出對人與機器都友善的H標籤,不僅能讓讀者快速掌握段落重點,也讓搜尋引擎理解你的內容邏輯,進而提升 SEO 表現。
2022/12/14

eric    Eric Wang

 

文章發佈到網站後,會經歷Google爬蟲的檢索、索引,而後產生排名,但是網路上每時每刻都在產出新的東西,Google爬蟲不可能細看所有內容,取而代之的,它會透過讀取H標籤的來了解文章架構,確認你的文章是否值得推薦給更多使用者。

 

H標籤(Heading tags)是什麼?

HTML由標籤(tag)結構組成,H標籤是Heading的簡稱,它能讓Google爬蟲快速了解文章基本架構,H標籤又可以細分為H1到H6,概念就像是Word文件中的目錄階層,文件標題(H1)接著是章節(H2)和其他子題(H3)。

 htag001

 

 

H標籤的層級有哪些?

一篇文章會透過下大小標使文章主題明確、段落清楚分明,不同層級的H標籤也有類似的用處:

 

H1標籤

在所有層級的H標籤中,H1標籤是最重要的,通常是文章的標題,一篇文章(又或者說一個網頁中)一般的情況下只會設定一個。雖然H1標籤在關鍵字行銷中擁有很高的權重,但濫用資源,添加一堆H1標籤,反而會適得其反,失去文章的核心重點,不利於SEO排名。

 

延伸閱讀:

 

H2標籤

H2標籤多作為文章副標題(或稱段落標題)使用,一篇文章可以有很多H2標籤,用以區分各個段落,幫助一般閱讀者和Google爬蟲了解文章結構,所以H2是最適合用來安排關鍵字的標籤,相較H1標籤,它能依照個段落的小重點安排不同的關鍵字,增加文章出現在搜尋引擎頁面的機會。

 

H3標籤

H3標籤是段落的小標題,當文章的內容層次越豐富,可能就越需要小標題來讓整體架構更清楚明確。

 

H4~6標籤

H3標籤以後若還是有小分類,便會使用到H4~6標籤,但通常比較少使用。

 

延伸閱讀:

 

 

我要如何在網頁上運用H標籤?圖解快速Get!

透過在HTML文件中新增<h1>、<h2>等標籤,並加入相應文字,以成功建立文章結構,下方我們做了張簡單的示意圖,讓你更了解該如何增設H標籤:

htag002

 

從上圖可以看到,H1標籤對應的是文章標題,H2標籤是幫助理解段落內容的副標,H3則是小標題。

那麼該在哪裡編輯H標籤?直觀的作法是在網頁原始碼中編輯(如下方左邊),或者也可以使用圖文編輯器,直接套用不同的標題層級(如下方右邊)

但要注意的是,在不同的編輯器中,名稱不一定會顯示H1、H2,而是會稱作標題1、標題2(如下圖右),或是其他可能,只要記住標籤的層級順序,編輯完成後再次回到前台確認,基本上不會出太大的問題。

 

htag003

 

延伸閱讀:

 

 

H標籤有什麼功能?對SEO的6大幫助與解析

記得在最一開始我們有提到H標籤和SEO的關係嗎?H標籤到底是如何影響SEO?沒有安排H標籤又會有什麼影響呢?以下透過H標籤的功能來說明兩者的關係:

 

1. 讀者可以快速掌握文章重點

在一般人的認知中,H標籤就像文章的目錄系統,其功能在於吸引人點擊、道出文章段落的重點,並藉由各個標題建構出完整的文章組織,最理想的情況是當人們看到你的文章標題或各段標題就能預期可能會看到的內容,真正閱讀後發現內容與期待吻合,便能透過符合期待的文章累積觀看流量,進一步達到SEO行銷。

 

2. 幫助搜尋引擎理解內容架構

Google會不定期地派爬蟲抓取網頁內容,透過讀取H標籤的來了解文章主題,若是沒有在網站文章中安排H標籤,爬蟲沒辦法讀取架構、快速掌握文章內容,會降低 Google 對頁面語意的理解度,進而影響收錄與排名。

 

延伸閱讀:

 

 

3. 提升文章整體內容品質

如前所述,Google爬蟲透過讀取H標籤了解架構,接著判斷其內容優劣與否,因此也可以說,妥善運用H標籤有助於強化頁面內容的語意邏輯,增加頁面「品質」的評價分數,這正是搜尋引擎評估內容價值的重要依據之一。

 

延伸閱讀:

 

 

4. 提升文章出現在0版位機會

隨著科技日益變遷,人們的閱讀習慣都會依賴主副標題清楚的文章內容,機器人也不例外,Google也偏好將結構清楚、H標籤明確的內容做為精選摘要,讓讀者一搜尋問題馬上可以知道答案,也就是說搜尋結果上方的「0 排名」位置,建議可以搭配條列式的回答或FAQ架構,會更容易取得0版位門票。

featured snippet

 

 

5. 有助於語音搜尋理解

越來越多人會使用語音助理取代打字,如 Siri、Google Assistant,所以搜尋引擎在提供解答時也會偏好語意結構清晰、有段落邏輯的內容,正確且吸引人的H標籤可以幫助語音系統快速抓取正確答案。

 

6. 友善無障礙人士閱讀

視障使用者會使用螢幕閱讀器會依據H標籤來朗讀頁面,清楚且相對口語化的H標籤對於他們理解網頁內容也非常重要。

 

延伸閱讀:無障礙網頁的圖片 alt(替代文字)怎麼寫?3步教你快速符合標準

 

 

H 標籤使用三原則:寫給搜尋引擎也寫給人看的標題邏輯

使用H標籤當然也有需要注意的地方,濫用可能會對網站行銷造成負面效果。

 

1. 一個頁面僅設置一個H1標籤

H1到H6標籤中,H1是最重要,對SEO排名影響最深的標籤。那我在文章中瘋狂設置H1標籤,是不是就能快速提升自家網站的排名呢?千萬不要這麼做,這只會帶來反效果,讓Google爬蟲認為你的文章主題不明確,沒有重點。

 

2. H標籤不宜過長或艱深迂迴

標題應簡潔扼要,用簡單的敘述來表達,並控制字數,避免過長的標題無法完整顯示在搜尋引擎的結果頁面,讓使用者看不到想看的關鍵字,失去點擊觀看的動力。

 

3. 適當安排關鍵字在H標籤中

SEO行銷重點中,除了完整的文章架構,別忘了還有關鍵字!適當地將關鍵字安排在H標籤中,能幫助SEO排名,但切記標題需與文章內容一致,避免胡亂搪塞、文不對題,也不要為了強塞關鍵字讓標題變得語意不順、難以閱讀理解。

 

延伸閱讀:

 

 

以上是H標籤的介紹和一些SEO行銷的建議,希望看到這裡的你對此已經有了基礎概念,若是對SEO想要有更一步的認識,歡迎搜尋相關文章深入了解。

 

延伸閱讀:

延伸閱讀:

延伸閱讀:

延伸閱讀:

認識網站行銷SEO

為什麼推薦台中網頁設計公司凱士數位?位於台中的凱士相對有機會接觸到各種不同的產業面向,擁有各種產業的網站設計經驗,幫助企業提升網路品牌形象,建立良好的使用體驗。如果您有形象網站、企業網站、客製化網頁、網站改版相關需求,歡迎聯絡我們。

 

您可以直接填寫諮詢表單;撥打諮詢電話 04-22210688;或加入凱士LINE由專人與您聯繫。

line qrcode

sticky text

line

contact btn