【HTML系列#2】h1~h6介紹與教學,影響SEO的重要關鍵!

HTML h1

無論是在網頁或是網站中,HTML的 h1 ~ h6 都是不可或缺的角色,甚至影響到SEO的成績

本篇教學將會教你如何使用 h 標題還有說明 h 標題與SEO的關係

本篇內容包含 :

  • 什麼是 HTML h1~h6 ?
  • Headings 介紹與用法
  • Headings 與 SEO
  • Headings 的 Q&A

前端入門系列 – HTML篇

本系列會介紹與教學關於HTML最基礎的知識語法,歡迎分享與留言討論!

HTML系列#1: 【HTML系列#1】HTML是什麼?5分鐘做出簡易網頁!

HTML系列#2: 【HTML系列#2】h1~h6介紹與教學,影響SEO的重要關鍵!

HTML系列#3: 【HTML系列#3】div、p、span 介紹與教學,區塊、段落一篇搞懂!

HTML系列#4: 【HTML系列#4】br、hr、& nbsp 介紹與教學,輕鬆加上斷行、分隔線與空格!

HTML系列#5: 【HTML系列#5】href、a、target介紹與教學,一起自訂傳送門!

HTML系列#6: 【HTML系列#6】ul、ol 介紹與教學,一招搞定清單列表!

HTML系列#7: 【HTML系列#7】img 介紹與教學,一行指令豐富你的網頁!

HTML系列#8: 【HTML系列#8】table 表格介紹與教學,5 分鐘搞懂表格!

HTML系列#9: 【HTML系列#9】iframe 介紹與教學,一招輕鬆嵌入影片!

什麼是 HTML h1~h6 ?

HTML 的 h1 ~ h6 標籤其實就是 Headings,有些人也會稱他們6個為「hgroup」,一個 h 群體的意思

通常這些標籤都代表著「標題」的意思,所以看到一篇文章或是網站有標題、副標題,這些都是由 Headings 所構成

而它們6個也有分權重的高低,h1 代表最高層級,h6 則代表最低層級

HTML h1
Headings


HTML Headings 範例影片 (英文版)



Headings 介紹與用法

Headings 介紹

h1

h1標籤就是一篇文章的標題,一篇文章只能出現一次,像是現在這篇文章的 h1 就是「【HTML系列#2】h1~h6介紹與教學,影響SEO的重要關鍵!

而google也會抓取每篇文章的 h1 作為搜尋結果,因為它代表文章中的最高權重,如果惡意使用多個 h1,很有可能會受到google懲罰,讓文章不能排名


h2

h2 扮演的角色是副標題,用來拆解 h1 的部分,並且一一的對其做說明,像是現在這篇文章的 h2 就是擁有灰色底的標題

每個標題都是針對 h1 下去做延伸並解釋,如果想要排版不那麼單調,那也可以再做更詳細的分類,往 h3、h4 發展


h3

h3 通常是用來輔助 h2 的內容,當 h2 內容範圍太過廣泛時,可以運用 h3 把 h2 的內容切割程幾個區塊,並且用 h3 去解釋

這篇文章的 h3 標題就是紅色的標題字,就是用來輔助 h2 的內容,一方面也是調整排版,讓文章容易閱讀一點


h4

h4 在一般文章中比較不常出現,通常會出現在一個網站中的側邊欄,但我在寫文章時很習慣會用到 h4 ,因為個人比較喜歡容易閱讀的文章

所以我在寫文章或是做網頁時,我會習慣把 h4 也放到文章中做使用,但有個前提就是一定會出現在 h3 底下,畢竟它們有個權重高低的關係


h5、h6

h5 就真的很少使用到了,我的網站沒有使用到 h5 跟 h6 ,通常它們會出現在比較不重要的位置,像是頁尾、網站底部等等的位置

但是如果你的文章或是網頁的內容非常的多也非常詳細,那可以考慮用到 h5 和 h6



Headings 用法

Headings 的用法非常簡單,只需要知道你要用到哪個 h ,然後放到 <body></body> 裡面就可以了

而寫法的部分就是使用標籤樣式的寫法「<h2> Heading 2 </h2>」,我用以下範例來呈現給大家看

程式碼範例

headings範例程式碼
程式碼範例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>
    
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

</body>
</html>

輸出結果

headings範例輸出結果
範例輸出結果


Headings 與 SEO

Headings 與 SEO 有哪些關聯呢?

其實在google搜尋引擎當中,會使用google spider到你的網站爬蟲,看看你的文章架構、內容等等,判定你的網站或是文章是否符合標題

所以當你使用了多個 h1 的話,他會覺得你是惡意的使用 h1 想要提高網站或是文章的權重,因此他就會懲罰你

而適時且適當的使用 h1 ~ h6 有時也會讓文章上到第一頁的精選!讓更多人看到你的文章,並且增加點閱率!

headings and seo
Headings 與 SEO


Headings 的 Q&A

Q1 : 一篇文章適合放多少個 h 標題?

A1 :

通常一篇文章 h1 標題只能有一個,就是你的文章標題,至於 h2 之後的標題要有幾個都是看個人決定

如果文章內容多又詳細,那放很多的做分類也不是壞事,但切記不要濫用,如果真的很少內容,那只有 h1 和 h2 也沒關係


Q2 : 為什麼要用 h 標題?

A2 :

h 標題有助於google到我們網站或網頁時判定我們的內容與架構,這樣一來內容的價值只要是足夠的,時間久了就有機會登上google第一頁

另一方面也有助於讀者或是使用者清楚的了解內容的分布,使用的恰當也會讓使用者體驗大幅增加、美感提升


Q3 : 標題要怎麼寫對SEO比較好?

A3 :

標題可以寫入一次這篇文章的關鍵字,但不要每個標題都這樣做,不然會被google認為惡意行為,也會被懲罰

而標題除了出現關鍵字之外,建議還是以唸起來順暢為主,不要為了加而加



總結

無論是在做網頁或是經營網站,Headings都是必定會出現的一個因素

因此我們在規劃內容時一定要好好的在這一塊做點功課,讓網站或網頁登上google的第一頁

希望這篇文章有幫助到不知道什麼是Headings的人,謝謝大家!



Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top