Nagłówki w HTML i SEO – jak je stosować w pozycjonowaniu?

Nagłówki w HTML i SEO – jak je stosować w pozycjonowaniu?

12 minut czytania Opublikowano: 31/10/2023 Zmodyfikowano: 05/11/2023

Ilu jest pozycjonerów, tyle opinii na temat tego jak stosować nagłówki w SEO, w tym artykule przedstawię swój punkt widzenia oraz swoją opinię na ten temat. Wskażę też swoją praktykę,  jak ustalić hierarchię nagłówków HTML tak, żeby roboty wyszukiwarek, jak i użytkownicy nie mieli problemu w rozumieniu i czytaniu treści.

Cały artykuł opieram na podstawie swojej wiedzy i zdobytego doświadczenia w pozycjonowaniu. Informacje wynikają m.in. z tego jak sposób uporządkowania nagłówków wpływał na efekty pozycjonowania.

Standardowo zaczniemy od ogólnych pojęć, przechodząc do esencji wiedzy.

Spis treści:

  1. Co to jest nagłówek w HTML?
  2. Do czego służą nagłówki HTML?
  3. Nagłówki w SEO, czyli pozycjonowaniu
  4. Nagłówki w pozycjonowaniu sklepów internetowych:
  5. Nagłówki w pozycjonowaniu bloga
  6. Częste praktyki w nagłówkach, które budzą wątpliwości dla SEO

Co to jest nagłówek w HTML?

Nagłówki w HTML stworzono na podobieństwo nagłówków stworzonych w gazetach i czasopismach, które są wykorzystywane do tytułów i podtytułów artykułów, tym samym do porządkowania treści, jaką dostarczamy.

W języku HTML ma służyć do porządkowania tekstu i ułatwienia skanowania oraz poprawy czytelności tekstu, jaki dostarczamy użytkownikowi.

Jak wygląda nagłówek HTML?

Nagłówek w języku HTML (kodzie) wygląda następująco:

<h1>Tytuł bardzo wciągającej treści</h1>

Stosowanie nagłówków, jak widać jest bardzo proste i krótkie, być może dlatego twórcy stron www, czy sklepów (jak i szablonów / motywów) często je stosują w nieodpowiednich miejscach.

Do czego służą nagłówki HTML?

Nagłówki HTML mają za zadanie uporządkować treść i ułatwić jej czytanie, co wpływa na pozytywny odbiór czytelnika każdego tekstu opublikowanego na stronie internetowej i ułatwia jej skanowanie, jak i czytanie przez użytkownika.

Hierarchia nagłówków HTML:

Hierarchia nagłówków opiera się na liczbie obok litery h, czyli skrótu od header. Im wyższa cyfra, tym nagłówek jest mniej istotny w strukturze treści, tekstu czy artykułu.

Nagłówki HTML  mają hierarchię rozpoczynającą się na <h1> i kończącą na <h6>

<h1>Najważniejszy tytuł opisujący stronę / podstronę</h1>
	<h2>Podtytuł nawiązujący do tematu</h2>
	<h2>Drugi podtytuł nawiązujący do tematu</h2>
		<h3>Podtytuł  dla nagłówka h2</h3>
		<h3>Drugi podtytuł  dla nagłówka h2</h3>
			<h4>Podtytuł dla nagłówka h3</h3>
			<h4>Drugi podtytuł dla nagłówka h3</h3>
				<h5>Podtytuł dla nagłówka h4</h5>
					<h6>Podtytuł dla nagłówka h5</h6>

Najczęściej w hierarchi nagłówków wykorzystuje się:

  • Nagłówek h1 <h1>Treść</h1> – jako tytuł danej strony lub podstrony bądź nazwy kategorii / produktu w sklepach internetowych. Do momentu powstania HTML5 nagłówek h1 mógł pojawić się tylko raz na stronie, w dokumentacji HTML5 nie może pojawiać się częściej niż raz na sekcję, czyli dopuszcza się wielokrotne stosowanie nagłówka h1, w branży SEO ciągle są na tym polu różne praktyki. 
  • Nagłówek h2 <h2>Treść</h2> – jako podtytuł dla strony lub podstrony rozszerzający już zapoczątkowany tekst, może pojawiać się wielokrotnie, tylko musi wynikać z ogólnego nagłówka h1, 
  • Nagłówek h3 <h3>Treść</h3> – jest to podtytuł dla nagłówka h2, jest to podzielenie podtytułu nagłówka h2 na kolejne składowe tekstu, czyli wejście w kolejne szczegóły danego tematu.

Pozostałe nagłówki stosuje się rzadziej, ponieważ rozgałęzienie byłoby już bardzo duże, najczęściej możliwe jest to przy rozbudowanych wpisach blogowych. 

Nagłówki można najłatwiej przedstawić jako elementy porządkujące treść, zaczynając od ogółu do szczegółu. 

Oczywiście ważne dla nagłówków poza samą kwestią ustalenia hierarchii nagłówków hx będzie odpowiednie „ostylowanie” w CSS , czyli przygotowanie odpowiedniego dla nich wyglądu. Najczęściej nagłówki wyróżniają się wielkością czcionki, gdzie nagłówek pierwszego poziomu jest największy (h1), a ostatniego poziomu proporcjonalnie najmniejszy (h6).  

Nagłówki w SEO

Pierwszy nagłówek, czyli nagłówek h1 powinien być zaraz na samym początku generowanego dynamicznie kodu. Dokładnie w miejscu, gdzie treść wyświetlana jest unikalna w zależności od podstrony, na której się znajdujemy.  

#kod strony

## kontener dla treści dynamicznie generowanej:
<h1>Tytuł strony / podstrony</h1>
## kontener np. dla dalszej części tekstu lub listy produktów

Ważne, żeby każdy nagłówek h1 był unikalny i nie powtarzał się w obrębie serwisu.

Przykładowo kategoria dla butów damskich powinna mieć w treści:

<h1>Buty damskie</h1>

Pozostałe nagłówki od h2 do h6 stosujemy ponownie w treści, nie do stylizowania elementów strony, w zależności od tego jak bardzo zagłębiamy się w temat. 

Nagłówki SEO na stronie głównej

Hierarchię nagłówków dla strony głównej najlepiej ustalić na podstawie zawartości, załóżmy że nie ma tekstu SEO, wtedy:

  • Nagłówek h1 jako ogólna forma działalności lub i / z jej nazwą
  • Nagłówek h2 jako najważniejsze elementy strony, np. Nasze usługi xxx
  • Nagłówek h3 jeśli jakieś elementy tworzymy z pod sekcjami

Gdy korzystamy z tekstu na stronie głównej najlepiej wykorzystać nagłówki h2 i inne tylko do niego. Natomiast nagłówek h1 wykorzystać standardowo gdzieś na początku strony głównej  w początkowym miejscu generowanej treści z krótkim bądź dłuższym akapitem, w zależności od naszego podejścia, czy celu strony głównej. 

Nagłówki SEO dla landingów / stron lądowania i podstron

Nagłówek h1

Podobnie jak na stronie głównej, nagłówek pierwszego poziomu dla landingu / stron lądowania i podstron musi być unikalny oraz wskazać jej zawartość w możliwie precyzyjny sposób. Jego długość zawsze będzie zależna od tego, w jaki sposób rozbudowujemy lub rozbudowaliśmy stronę internetową. 

Nagłówek h2 / h3 / h4 itd.

Pozostałe nagłówki stosujemy standardowo do poziomu rozbudowy tematu i przejście w kolejne szczegóły opisywanego pojęcia.

Przykład

<h1>Antywindykacja</h1>
[treść…]
<h2>Sposoby na antywindykację</h2>
[treść…]
	<h3>Sposób 1 na antywindykację<h3>
		[treść…]
	<h3>Sposób 2 na antywindykację</h3>
		[treść…]
<h2>Koszty antywindykacji</h2>
			[treść…]

Nagłówki w pozycjonowaniu sklepów internetowych:

Poniżej wskażę stosowane przez siebie praktyki dotyczące zastosowania nagłówków w zależności od rodzaju podstrony sklepu internetowego.

Polecana hierarchia nagłówków dla kategorii produktowych:

  • Nagłówek h1
    jako h1 z pewnością należy zastosować nazwę kategorii, czyli co prezentujemy klientowi, mogą być to np. Buty. 

    Uwaga: Treść samego nagłówka wraz z rozwojem, czy wymaganą potrzebą trafienia do odpowiedniej grupy docelowej może się różnić od precyzyjnej nazwy kategorii. Przykładowo sprzedając limitowane buty, warto będzie sprecyzować nagłówek <h1>, żeby miał nazwę “Limitowane buty”, taki nagłówek precyzyjniej będzie wskazywać algorytmom, co sprzedajemy i łatwiej się wtedy będzie nam pozycjonować wykorzystując mniejsze zasoby.  
  • Nagłówek h2-h3-h4
    W moim przypadku stosuję je tylko i wyłącznie do opisu kategorii w zależności od tego, jak głęboko wejdziemy w dany temat.

Polecana hierarchia nagłówków dla karty produktowej

  • Nagłówek h1 jako nazwa produktu
  • Nagłówek h2 – częsta praktyka powtórzenia nazwy produktu.
  • Pozostałe nagłówki stosujemy w zależności od rozbudowy opisu produktu.

Zawsze przeze mnie niezalecane będzie stosowanie nagłówków do elementów nawigacyjnych, czy np. “tabów”, accordionów i innego typu bardziej lub mniej dynamicznych elementów.

Warto, żebyśmy w kodzie HTML precyzyjnie wskazywali zawartość tekstową podstrony podzieloną na nagłówki.

Klient nie zauważy różnicy, czy wykorzystaliśmy nagłówek h3 w elemencie nawigacyjnym strony, natomiast algorytmy mogą mieć inne zdanie :). Odpowiednia hierarchia nagłówków może wpłynąć na efekty pozycjonowania.

Nagłówki w pozycjonowaniu bloga

  • Nagłówek h1 jako tytuł wpisu
    Najważniejszy nagłówek zawsze powinien być nazwą danego wpisu blogowego. 
  • Pozostałe nagłówki od h2 do h6
    Stosujemy tylko dla tekstu wpisu, w zależności od tego, jak głęboko opisujemy dany temat i tego wymaga. Tytuły powiązanych wpisów, czy innych elementów strony najlepiej pozostawić z innymi elementami np. paragrafami, divami itp. 

Częste błędne praktyki w nagłówkach, które budzą wątpliwości dla SEO

  • Logo w nagłówku h1
    Nierzadko praktyką twórców stron internetowych jest / miejmy nadzieję, że było stosowanie nagłówka h1 w logo strony internetowej, czyli elementu stałego z kodem grafiki.
  • Stosowanie nagłówków jako “kontener” 
    <h2><a href=”link-do-karty-produktowej” title=”Nazwa produktu”>Nazwa produktu</a></h2>
    Nagłówek h2 jako kontener, czy inny, jako link tekstowy do produktu może tylko zaburzyć całą hierarchię i ze względu na ilość produktów je namnożyć zaburzając kod HTML, przede wszystkim sprawimy kłopot algorytmom, a ostatecznie sobie :).
  • Stosowanie nagłówków w elementach stałych
    Jeśli jakiś element powiela się na każdej podstronie i nie jest elementem dynamicznie generowanym na podstawie zawartości strony, nie stosujmy go jako nagłówek, tworzymy tylko niepotrzebne zamieszanie. 

Podsumowując cały temat, starajmy się utrzymywać porządek w hierarchii nagłówków, jest to element, który najczęściej jest błędnie stosowany nawet w “stronach internetowych pod SEO” oferowanych przez wielu deweloperów, czy twórców stron www.

Pamiętajmy o celu nagłówków, nie używajmy ich do tworzenia fajerwerków, czy ładnego wyglądu, jeśli zależy nam na możliwie najskuteczniejszym pozycjonowaniu naszej strony, czy sklepu internetowego.  

Inną ważną kwestią już będzie, jak pisać treść nagłówków, żeby najskuteczniej i najmniejszymi możliwymi zasobami pozycjonować stronę na interesujące nas frazy kluczowe, jednak to będzie już okazja do napisania innego artykułu blogowego.