如何正確使用 HTML 標題標籤

已發表: 2020-06-25

每個網站都是自己獨特的怪物，開發人員和設計人員將自己的標誌性聲音放入代碼中。但是每個網站都有的一個共同元素是 HTML 標題標籤。這些標題不僅將您的內容分解為更具可讀性的部分，而且還創建了您網站的語義大綱，以便搜索引擎和可訪問性軟件可以準確判斷網站的內容。關於 HTML 標題標籤的正確使用和功能，偶爾會有一些混淆，因此我們想通過所有 6 層並討論如何以及何時正確使用它們。

訂閱我們的 YouTube 頻道

為什麼要使用 HTML 標題標籤？

就像我們上面所說的，這些標籤創建了您網站的骨架。沒有它們，您網站的標題和目的不僅不清晰，而且內容在用戶和機器人看來就像是一堵巨大的文本牆——即使您使用段落將其分解。

此外，屏幕閱讀器和輔助功能軟件使用它們來導航您的內容（有時是字面意思）。因此，如果您不包含 HTML 標題標籤，您的站點將無法被許多人訪問，因為他們根本無法在頁面和內容中移動。

此外，進入您網站的搜索引擎和其他網絡爬蟲也會通過您的標題進行導航。最近，谷歌一直在其排名中考慮代碼語義，這意味著搜索意圖非常重要。您的 HTML 標題標籤是其中的主要部分，它告訴 Google 和訪問者在頁面上的哪個位置可以找到按層次重要性組織的特定信息。

頁面中的每個標籤都以自己的方式幫助這一切。

標籤層次很重要

HTML 標題標籤層次結構很重要。您使用這些標籤的順序可能會影響您網站的 SEO。雖然您可以使用 CSS 設置它們的樣式並使 H6 標籤比 H2 更大、更粗、更亮，但您仍應盡量保持它們的有序性，以免混淆爬蟲（和讀者）。

按升序考慮標籤，就好像它們是帖子大綱的標題一樣。您應該只（通常）在其直接前任下放置更高的數字。您可以根據需要將它們嵌套任意深，但請確保每次只按順序放置下一個。

下面是一個例子：

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
        <h3>Subtopic</h3>
            <h4>Very specific point</h4>
        <h3>Main Point Number 2</h3>
            <h4>Subtopic</h4>
                <h5>Example or important chart</h5>
            <h4>Specific point</h4>
                <h5>Example or important chart</h5>
                    <h6>Highly specific example explaining this point</h6>

在某些特定情況下，您的 H6 高於 H4，但在大多數情況下，Google 和其他搜索引擎通過使用標題來導航您的內容來確定主題優先級並衡量搜索意圖的內容有效性。

H1標籤

H1 標籤可能是最簡單的 HTML 標題標籤，同時也是最容易被誤解的標籤之一。在大多數情況下，您會看到 H1 標題是特定頁面或帖子的標題。這就是搜索引擎將（可能）顯示在結果中的內容。您的瀏覽器也可能會在其標題欄中顯示這一點，儘管許多 SEO 插件和類似應用程序允許您針對這些進行更改。因此，雖然在 H1 標籤中包含目標關鍵詞很重要，但這並不是 100% 必要的。在語義上編寫標題和標題以涵蓋訪問者的搜索意圖，而不是關鍵字填充 HTML 標題標籤。

h1 示例

上圖顯示了用作 Elegant Themes 博客文章條目標題的 H1 標籤。它也是頁面上唯一的 H1 標籤。這表明它是頁面內容的主題。

多年來，標準做法是每頁有一個（並且只有一個）H1 標籤。在大多數情況下，這仍然是一個很好的建議。 Google 和其他搜索引擎會抓取您的網頁並尋找 H1 標籤。然後他們使用它來確定主題、標題和結構。

但是，谷歌明確表示，在您的網站上使用多個 H1 HTML 標題標籤不會導致任何 SEO 懲罰。這並不意味著在您的網站上到處使用它們，而是意味著在需要時您可以在每個頁面上使用多個。

何時使用多個 H1 標題

H1 的唯一目的是指示關於單個主題的完整部分。這意味著如果您有一個包含多個主題的頁面，您可能希望為該頁面上的每個新主題使用 H1。這樣做會告訴 Google，您的頁面不僅僅與標題中的主題有關。但是下面可能還有一個關於完全不同（但相關）的主題的部分。

在單頁網站上，這也很重要，因為您可能在該頁面上有“關於”、“定價”、“聯繫方式”和“作品集”部分。那麼你如何讓谷歌知道每個部分中包含的內容是它自己的自治單元？

H1標籤，就是這樣。您將每個部分視為自己的迷你網頁，使用我們上面在每個部分中討論的層次結構。這樣，谷歌在瀏覽頁面時會看到標題，然後它可以確定從這些部分中提取哪些部分（等等）來回答搜索者的問題。

您也可以在每次在網站上使用部分標籤時選擇使用 H1 標籤，但我們建議僅在該部分與頁面標題具有同等重要性時才使用 H1 標籤，而不是次要部分。

H2標籤

現在，H2 標籤很可能成為頁面上最常用的 HTML 標題標籤。並且有充分的理由。互聯網上的大多數帖子和頁面都包含一個主題，只有幾個副標題。我們建議您創建的每一段內容都至少包含一個 H2 標籤。 Yoast 和其他 SEO 插件建議大約每 300 個字的標題。根據您的內容，這就是 H2 標籤的用途。

他們將子主題（或步驟）分開以便於閱讀。例如，我們的大部分帖子主要由 H2 標題組成（適用時為 H3）。那是因為我們的文章是關於一個主題的，我們試圖解決一個問題。我們將在 H1 中使用諸如如何使用 OBS Studio 進行直播之類的標題，但諸如“如何開始使用 OBS Studio”之類的副標題將在 H2 中。

h2 的例子

H2 標籤代表與 H1 主題直接相關的各個步驟。在那個特定的帖子中，我們使用了以下結構：

<h1>How to Use OBS Studio to Livestream</h1>
    <h2>What is OBS Studio?</h2>
        <h3>What about SLOBS?</h3>
    <h2>How to Get Started with OBS Studio</h2>
    <h2>OBS Studio Setup</h2>
        <h3>Setting Up a Scene in OBS Studio</h3>
        <h3>Adding Sources in OBS Studio</h3>
    <h2>Adjusting Sources Onscreen</h2>
        <h3>RMTP Keys and OBS Studio</h3>
    <h2>Wrapping Up</h2>

這篇文章中的 H2 標題標籤涵蓋了主要思想，例如入門和下載、設置實際軟件，然後調整您的屏幕對觀眾的顯示方式。雖然在 H3 的下面也涉及步驟，但 H2 標題表示文章的大尺寸圖片。它們是一個高級視圖，爬蟲和讀者將能夠瀏覽以查看文章是否包含他們正在搜索的信息。

一般來說，每篇文章會有多個 H2 標籤，而它們下可能沒有嵌套的子標題。如果您的頁面或帖子屬於一個主題，並且沒有像上面的示例那樣細分為帶有小節的部分，那麼擁有多個 H2 標籤比嵌套 H2 -> H3 -> H4 更好，因為這些標籤會向爬蟲表明您重新深入研究一個次要主題，而不是擴展帖子的主要主題。

H3標籤

另一方面，H3 標籤是您的文章可以真正深入了解主題細節的地方。你不應該直接在 H1 下使用這些 H3 標籤。 Googlebots 和搜索引擎絕對將它們視為副標題。而 H2 被接受為單個文章中部分的主要標題（H1 將主要主題聲明為標題，請記住）。

h3 示例

如果您仔細查看上圖，您會發現 H2 和 H3 標籤之間的實際樣式和大小並沒有太大不同。原因是，我們不希望您通過掃描來假設我們在 H3 中提出的任何一點都不如 H2 重要。因為它不是。

它只是在尺寸上更小，表明它是 H2 的一個從屬點，而不是與整個主題的直接聯繫，從結構的角度來看，這對於您的文章的 SEO 來說是最重要的。對於人類讀者，而不是機器人，視覺上的區別只是幫助他們向下移動頁面並將信息分解為更容易解析。

H4, H5, H6 標籤

我們把這些放在一起是有原因的。通常，您將很難找到任何充分利用 H1 到 H6 範圍的 HTML 標題標籤的站點。到目前為止，最流行的結構是 H1 到 H3。就像您很少看到超出第二個嵌套級別的內容大綱一樣。

I. Idea 
    A. Subpoint
        1. Detail
II. Idea
	A. Subpoint
		1. Detail
III. Idea

H4

在大多數情況下，H4 標籤的用途與 H3 相同。您將使用它們來詳細了解步驟和示例，但始終嵌套在主要標題下方。設計師通常使用比 H3 小的 CSS 來設計它們。他們傾向於在普通內容創建中看到有限的使用。如果需要分解想法以便需要 H4 標題標籤，則主題往往非常深入。

H5 和 H6

您可以通過幾種不同的方式使用 H5 和 H6 標題。

第一種方式

（舉個例子，我們通過標題把這個特定的部分分成了不同的部分，我們現在在 H4 下，因為它是主要文章的一個子主題。）

這些標題通常用於目錄和類似列表中，但它們的主要功能在技術上與其他標題相同，在整個頁面中描繪重要性降序的主題。很難找到包含完整標題到 H6 的文檔。

第二種方式

有些人使用 H5 和 H6 標籤作為“特殊”格式標題。他們將對這兩個與 H1 到 H4 完全不同的 HTML 標題標籤應用特殊的 CSS。然後，您可以使用它們來引起人們對可能會被忽視的主題和想法的關注。

這不是技術上的最佳實踐，因為標題是分層的。但是，如果您的網站整體結構良好，並且您在某些單獨的頁面或帖子上謹慎地使用 H5 和 H6 作為特殊樣式，則幾乎可以肯定您不會受到 SEO 的影響。

請記住，即使將它們用於特殊格式設置，也不會脫離層次結構。讓它們井然有序。因此，如果您使用 H6 來設置副標題的樣式，請確保您使用的下一個是 H1 或 H2，以表明您已返回到標準結構。

HTML 標題標籤不該做什麼

不要用整個標題層次結構一直向下構建單個頁面。您最好為標題和所有 H2 使用 H1，而不是嵌套每個連續的標題。

是的：

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
    <h2>Main Point Number 2</h2>
    <h2>Main Point Number 3</h2>
    <h2>Main Point Number 4</h2>

不：

<h1>Title</h1>
    <h2>Point Number 2</h2>
    <h3>Point Number 3</h3>
    <h4>Point Number 4</h4>
    <h5>Point Number 5</h5>
    <h6>Point Number 6</h6>

此外，您不想隨意使用標題。只能按順序使用它們。否則，爬蟲將不知道如何導航您的頁面，無障礙軟件也不知道。

不：

<h1>Title</h1>
    <h3>Point Number 2</h3>
    <h2>Point Number 3</h2>
    <h6>Point Number 4</h6>
    <h5>Point Number 5</h5>
    <h4>Point Number 6</h4>

通常，您可以假設爬網程序在找到下一個 H1 或 H2 時會知道您已移出小節。在上面的代碼片段中，爬蟲和機器人很難解析信息的結構。

用 HTML 標題標籤結束

看到了嗎？我們回到 H2 標題來總結一下。標題標籤是每個網站的重要元素。正確使用它們可以提高您的搜索引擎排名，以及您網站的用戶體驗，因為訪問者將能夠更輕鬆地找到他們在您的內容中尋找的信息。請記住，不要在標題中使用過多的關鍵字。儘管包含您正在討論的關鍵字或短語以確保您的想法清晰是一個好主意，但 Googlebots 和其他人非常聰明，可以判斷您何時交換了主題或在同一主題上。總體而言，使用 HTML 標題標籤非常重要，但如果您只記住幾件事，您的網站將很快大放異彩。

您是否正確使用了 HTML 標題標籤？

文章特色圖片由 VectorV / shutterstock.com 提供