如何正確使用HTML標題標籤

每個網站都是自己獨特的怪獸,開發人員和設計師將自己的簽名聲音放入代碼中。但是,每個網站都有一個共同點是HTML標題標籤。這些標題不僅將您的內容分成更易讀的部分,而且還創建了網站的語義輪廓,以便搜索引擎和可訪問性軟體可以準確分辨出組成網站的內容。關於HTML標題標籤的正確使用和功能,有時會有些混亂,因此我們希望遍歷所有6個層,並討論如何以及何時正確使用它們。

為什麼使用HTML標題標籤?

就像我們上面說的,這些標記創建您網站的框架。沒有它們,不僅網站的標題和目的不盡如人意,而且對用戶和機器人而言,內容看起來就像是一堵巨大的文字牆,即使您使用段落將其拆開也是如此。

另外,屏幕閱讀器和輔助功能軟體會使用它們來瀏覽您的內容(有時是字面意思)。因此,如果您不包括HTML標題標籤,那麼許多人將無法訪問您的網站,因為他們根本無法在頁面和內容之間移動。

此外,搜索引擎和其他訪問它的Web爬網程序也會通過您的標題進行導航。最近,Google在其排名中一直在考慮代碼語義,這意味著搜索意圖非常重要。HTML標題標籤是其中的主要部分,它告訴Google和訪問者頁面中何處可以找到特定信息,這些信息按層次結構重要性進行組織。

頁面中的每個標籤都以自己的方式幫助所有這些操作。

標籤層次結構很重要

HTML標題標記的層次結構很重要。您使用這些標籤的順序可以為您的網站建立或破壞SEO。儘管您可以使用CSS設置樣式,並使H6標籤比H2更大,更粗和更亮,但您仍應嘗試使其順序整齊,以免使搜尋器(和讀者)感到困惑。

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

這是一個例子:

<h1>標題</ h1> <h2>主要點編號1 </ h2> <h3>子主題</ h3> <h4>非常特定的點</ h4> <h3>主要點編號2 </ h3> <h4 >子主題</ h4> <h5>示例或重要圖表</ h5> <h4>特定點</ h4> <h5>示例或重要圖表</ h5> <h6>解釋此點的高度特定的示例</ h6>

在某些情況下,您可能會在H4上方有一個H6,但在大多數情況下,Google和其他搜索引擎會確定標題優先順序,並通過使用標題導航您的內容來評估內容有效性以達到搜索目的。

H1標籤

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

如何正確使用html標題標籤如何正確使用HTML標題標籤

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

多年以來,標準做法是每頁只有一個(只有一個)H1標籤。在大多數情況下,這仍然是個不錯的建議。Google和其他搜索引擎會抓取您的頁面並查找H1標籤。然後,他們使用它來確定主題,標題和結構。

但是,Google明確表示,在您的網站上擁有多個H1 HTML標題標籤不會對SEO造成任何損失這並不意味著在站點上的所有地方都瘋狂使用它們,而是意味著在需要時每頁可以使用多個頁面。

何時使用多個H1標題

H1的唯一目的是指示單個主題的完整部分。這意味著,如果您的單個頁面上有多個主題,則需要為該頁面上的每個新主題使用H1。這樣做會告訴Google,您的頁面不僅僅是標題中的主題。但是,在下面可能還會有一個完全不同的主題(至今相關)。

在單頁網站上,這也很重要,因為您可能在該頁面上有「關於」,「定價」,「聯繫人」和「投資組合」部分。那麼,如何讓Google知道每個部分中包含的內容是其自己的自治單元呢?

H1標籤,就是這樣。您可以使用上面我們在每個部分中討論的層次結構,將每個部分視為自己的迷你網頁。這樣,Google在瀏覽頁面時會看到標題,然後可以確定從哪個部分中提取(或以此類推)特色片段來回答搜索者的問題。

您也可以在每次在網站上使用板塊標籤時選擇使用H1標籤,但是我們建議您僅在與頁面標題具有平行重要性的板塊而不是從屬板塊使用此標籤。

H2標籤

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

他們將子主題(或步驟)分開,以便於閱讀。例如,我們的大多數職位主要由H2標題組成(適用時為H3)。這是因為我們的文章僅涉及一個主題,而我們試圖解決一個問題。我們將使用H1作為標題,例如如何使用OBS Studio將Livestream用作Livestream,但是諸如「如何使用OBS Studio入門」的子標題將位於H2。

how-to-use-html-heading-tags-correctly-1如何正確使用HTML標題標籤

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

<h1>如何使用OBS Studio進行直播</ h1> <h2>什麼是OBS Studio?</ h2> <h3> SLOBS怎麼樣?</ h3> <h2>如何開始使用OBS Studio </ h2 > <h2> OBS Studio設置</ h2> <h3>在OBS Studio中設置場景</ h3> <h3>在OBS Studio中添加源</ h3> <h2>在屏幕上調整源</ h2> <h3> RMTP密鑰和OBS Studio </ h3> <h2>包裝</ h2>

這篇文章中的H2標題標籤涵蓋了主要思想,例如入門和下載,設置實際軟體,然後調整屏幕在查看器中的顯示方式。雖然H3中的步驟也涉及下面的步驟,但H2標題表明了該文章的整體情況。它們是高級視圖,爬蟲程序和閱讀器將能夠進行掃描,以查看文章是否包含他們正在搜索的信息。

通常,每篇文章將有多個H2標籤,而它們下方可能沒有嵌套的副標題。如果您的頁面或帖子是關於單個主題的,而沒有像上面的示例那樣細分為多個小節,那麼擁有多個H2標籤比嵌套H2-> H3-> H4更好,因為這些標籤會指示抓取工具您與主題的主要主題相比,對主題的關注更深。

H3標籤

另一方面,H3標籤是您的文章可以真正深入研究主題細節的地方。絕對不要在H1下直接使用這些H3標籤。Googlebot和搜索引擎絕對將它們視為副標題。鑒於H2被視為一篇文章中各節的主要標題(H1聲明主題為標題,請記住)。

how-to-use-html-heading-tags-correctly-2如何正確使用HTML標題標籤

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

它的大小只是較小,表明它是H2的從屬點,而不是整個主題的直接聯繫,從結構角度而言,這對於您的文章的SEO最為重要。對於人類讀者而不是機器人,視覺上的區別只是幫助他們將其向下移動到頁面上,並分解信息以更輕鬆地進行解析。

H4,H5,H6標籤

由於某種原因,我們將它們混為一談。通常,很難找到任何充分利用H1至H6範圍的HTML標題標籤的網站。到目前為止,最受歡迎的結構是H1至H3。就像您很少看到內容大綱超出第二層嵌套級別一樣。

I.想法A.子點1.細節II。想法A.子點1.細節III。理念

H4

在大多數情況下,H4標籤的作用與H3相同。您將使用它們詳細介紹步驟和示例,但始終嵌套在主標題下方。設計師通常使用小於H3的CSS來設置樣式。他們傾向於在普通內容創建中使用有限。如果需要分解主意,則需要一個H4標題標籤,因此該主題通常會非常深入。

H5和H6

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

第一種方式

(僅舉一個例子,我們已經通過標題將這個特定的部分分成了多個部分,由於它是主要文章的子主題,因此我們現在處於H4之下。)

這些標題通常用於目錄和類似列表中,儘管它們的主要功能在技術上與其他標題相同,但在整個頁面中都描述了重要性遞減的主題。幾乎找不到標題包含H6的文檔的情況很少。

第二種方式

有些人將H5和H6標籤用作「特殊」格式標題。他們將特殊的CSS應用於這兩個HTML標題標記,這些標記與H1到H4完全不同。然後,您可以使用它們來引起人們對可能被忽略的主題和思想的關注。

這不是技術上的最佳做法,因為標題是分層的。但是,如果您的網站總體結構良好,並且在某些單獨的頁面或帖子上很少使用H5和H6作為專業樣式,則幾乎可以肯定不會對SEO造成負面影響。

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

HTML標題標記不做什麼

不要將標題的整個層次結構一直向下構造一個頁面。對於標題和所有H2,最好使用H1,而不要嵌套每個後續的標題。

是:

<h1>標題</ h1> <h2>主要點編號1 </ h2> <h2>主要點編號2 </ h2> <h2>主要點編號3 </ h2> <h2>主要點編號4 </ h2>

沒有:

<h1>標題</ h1> <h2>點編號2 </ h2> <h3>點編號3 </ h3> <h4>點編號4 </ h4> <h5>點編號5 </ h5> <h6 >第6點</ h6>

此外,您不想隨意使用標題。僅按順序使用它們。否則,搜尋器將不知道如何導航頁面,輔助功能軟體也將不知道。

沒有:

<h1>標題</ h1> <h3>點編號2 </ h3> <h2>點編號3 </ h2> <h6>點編號4 </ h6> <h5>點編號5 </ h5> <h4 >第6點</ h4>

通常,您可以假設某個搜尋器在找到下一個H1或H2時便知道您已移出該子節。在以上代碼段中,爬蟲和漫遊器將很難解析信息的結構。

包裝HTML標題標籤

看嗎 我們回到H2標題進行總結。標題標籤是每個網站的重要組成部分。正確使用它們可以提高搜索引擎的排名以及網站的用戶體驗,因為訪問者可以更輕鬆地在您的內容中找到他們要查找的信息。請記住,不要用太多的標題來標明關鍵詞。儘管最好包含您正在討論的關鍵字或短語以確保您的想法清晰明了,但Googlebot和其他智能工具非常聰明,可以告訴您何時交換主題或在同一主題上。總體而言,使用HTML標題標籤非常重要,但是如果您僅牢記一些注意事項,那麼您的網站將很快出現。

相關文章