Hierarchiczna struktura treści z wykorzystaniem nagłówków Hx

Stosowanie nagłówków treści na stronach WWW to dość popularny temat, wokół którego narosło wiele mitów pokutujących do dziś. Czym zatem są nagłówki, po co się je stosuje i jak wdrożyć optymalną strukturę nagłówków na swojej stronie?

Czym są nagłówki (headings)?

 

Nagłówki (ang. heading tags) służą do prezentowania struktury treści użytkownikom (robotom wyszukiwarek także). Istnieje sześć rozmiarów nagłówków – od H1 do H6, przy czym ten pierwszy ma największe znaczenie (jest najważniejszy). Bardzo rzadko używa się natomiast nagłówków najniższego rzędu tj. H5 czy H6.

 

Jako że nagłówki Hx zawierają tekst, który jest (powinien być) wyraźnie większy od reszty treści, jest to wizualna wskazówka dla użytkowników pomagająca zrozumieć co zawierają akapity pod nimi. Stosowanie różnych rozmiarów nagłówków w celu reprezentowania hierarchicznej struktury ułatwia użytkownikom konsumpcję treści.

 

W składni HTML używamy znaczników w nawiasach < >:

<h1>Nagłówek 1</h1>
<h2>Nagłówek 2</h2>
<h3>Nagłówek 3</h3>
<h4>Nagłówek 4</h4>
<h5>Nagłówek 5</h5>
<h6>Nagłówek 6</h6>

ale już na stronie WWW będą one wyglądały (oczywiście w zależności od arkusza stylu) na przykład tak:

struktura-naglowkow-Hx

Przykłady użycia można znaleźć tutaj: https://www.w3schools.com/html/html_headings.asp.

Używaj w nagłówkach Hx istotnych treści

Gdy niemal każdego dnia powstają nowe wpisy blogowe, newsy, poradniki czy artykuły eksperckie, warto przyciągać uwagę użytkownika nie tylko ładnym zdjęciem czy chwytliwym tytułem, ale też uporządkowaną strukturą treści.

 

Często przewijając konkretną publikację na urządzeniach mobilnych czytelnik w głównej mierze zwraca uwagę właśnie na nagłówki. Poza względami czysto estetycznymi, poprawna struktura nagłówków przyczynia się do łatwiejszego interpretowania i konsumowania treści, a tym samym istnieje szansa, że użytkownik zostanie na stronie dłużej.

 

Nie tylko użytkownicy mogą korzystać z dobrodziejstwa przyzwoicie wdrożonej struktury. Robią to też boty wyszukiwarek, dla których tekst wstawiony w nagłówku również ma znaczenie. Dlatego tak ważne jest, by nagłówki zawierały istotne słowa kluczowe, które będą tematycznie powiązane z resztą treści na stronie. Jeżeli targetujemy daną podstronę na konkretne keywordsy, warto aby znalazły się one (nawet w formie odmienionej) w nagłówkach, oczywiście mogą być obudowane tekstem – wszystko w granicach rozsądku.

 

Struktura powinna mieć wyraźny zarys, a nagłówki powinny różnić się od siebie wielkością. Błędem będzie ostylowanie ich w ten sam sposób, co tekst, lub nie rozróżnianie ich ze względu na rząd.

Nagłówki Hx w artykułach

Tworząc wpisy blogowe, mamy dość duże pole do popisu w temacie kreatywnego używania nagłówków. Jeszcze przed rozpoczęciem pisania warto zdefiniować strukturę artykułu. Nagłówki mogą przybrać formę śródtytułów rozdzielających poszczególne akapity tekstu (jak w tym artykule), a najważniejszy z nich <h1> zastosować do oznaczenia tematu. Bardzo często bywa on zdefiniowany automatycznie w szablonie witryny, więc jeżeli jest inaczej, warto wdrożyć poprawkę w konsultacji ze Specjalistą SEO i Web Developerem.

 

Dobrze zaprojektowana struktura artykułu potrafi uatrakcyjnić jego wygląd. Interesujące treści umieszczone w nagłówkach będą dawały jasny sygnał potencjalnym czytelnikom (robotom wyszukiwarek także), czego mogą się spodziewać, zgłębiając (analizując) publikację.

Jakie nagłówki umieścić na stronie głównej witryny?

W przypadku strony głównej (czy jakiejkolwiek innej, np. usługowej) również obowiązuje hierarchiczna struktura nagłówków. W sekcji <head> warto umieścić H1, poniżej kolejno H2-H3, ale nie ma tu obostrzeń co do ich liczby. Ba! Nawet w przypadku H1 nie musimy się ograniczać tylko do jednego nagłówka (o czym w dalszej części artykułu).

 

Należy jednak pamiętać, że takie teksty jak “O nas” czy “Zobacz więcej” wstawiane w nagłówkach, nie wnoszą za dużo do tematu. Również obecność nagłówków niższego rzędu, np. H5-H6, nie ma (poza wyglądem) większego sensu.

Strony one page = jeden nagłówek H1?

W przypadku stron typu one page sprawa nie jest już tak oczywista jak przy artykułach blogowych. W specyfikacji HTML5 (https://www.w3.org/TR/2014/REC-html5-20141028/sections.html) znaleźć możemy tag <section>, który odpowiedzialny jest za definiowanie poszczególnych sekcji w dokumencie HTML. Sekcja zawiera zwykle nagłówek, tak więc w każdej z nich możemy wdrożyć osobną hierarchiczną strukturę, np.:

<section id=”about”>

  <h1>About me</h1>

  <p>Some text about me:)</p>

  <h2>My name is Dawid...</h2>

  <p>Second paragraph about me. lol :)</p>

</section>



<section id=”portfolio”>

  <h1>My portfolio</h1>

  <p>My latest projects...</p>

</section>



<section id="testimonials">

  <h1>Testimonials</h1>

  <p>Opinions of satisfied customers...</p>

  <h2>Latest tweets</h2>

  <p>Tweet 1</p>

  <p>Tweet 2</p>

</section>



<section id="contact">

  <h1>Contact</h1>

</section>

 

Jak widać w powyższym przykładzie, w każdej sekcji znajduje się osobny nagłówek H1, później H2… Jednak to w zależności od obranej strategii możemy zastosować kilka lub tylko jeden nagłówek H1, a kolejne już jako H2 i H3 itd.

Temat tagów Hx a stanowisko Google

Wypowiedzi pracowników Google na temat nagłówków jest sporo, warto jednak przytoczyć te najświeższe. Odpowiedź Johna Meullera na Forum Google dla Webmasterów sprzed roku: https://productforums.google.com/forum/#!msg/webmasters/BmyI8YX_25A/81hZNQFJDQA

We don’t treat HTML5 differently & having multiple H1 tags on a page is fine. Be reasonable when using them, use them where they make sense. There’s definitely no penalty for using H1s.”

 

Nieco później, bo w kwietniu 2017, John dosyć lakonicznie wypowiedział się na Twitterze (https://twitter.com/JohnMu/status/852131231928135680) w odpowiedzi na pytanie, jak dużo nagłówków H1 można stosować na jednej podstronie.

 

Finalnie na YouTube, w ramach serii “SEO Snippets” kanału Google Webmaster, umieszczony został krótki poradnik dotyczący tej kwestii:

Inne istotne kwestie dotyczące nagłówków treści

Pomimo tego, że pracownicy Google (przynajmniej w swoich oficjalnych wypowiedziach) sugerują podchodzić do tematu nagłówków dość elastycznie, to warto trzymać się kilku zasad:

  • nie przesadzajmy z liczbą użytych nagłówków na stronie,
  • używajmy ich tam, gdzie ma to sens i odzwierciedla dalszą część treści, by użytkownicy mogli rozróżnić, gdzie kończy i zaczyna się dany temat,
  • nie umieszczajmy całych akapitów (całej treści) w nagłówku,
  • nie używajmy jedynie słów kluczowych, a zwłaszcza w nienaturalnej (nieodmienionej) formie,
  • nie ukrywajmy nagłówków w treści, zmniejszając je do rozmiaru tekstu,
  • zachowajmy kolejność w hierarchii struktury,
  • być może zamiast nagłówka warto czasami użyć znacznika <strong> 😉.

Tworząc treści, nie ma co przesadzać z nadmierną optymalizacją, ale pozostawienie jej w surowej formie również nie będzie dobrym pomysłem. Warto zachować równowagę i skupić się na odczuciach użytkowników konsumujących nasze witryny internetowe, w tym publikacje, poradniki czy innego rodzaju wpisy blogowe. W końcu nagłówki są czynnikiem rankingowym w wyszukiwarce Google, dlatego pod kątem SEO z pewnością należy o nie zadbać.

 

Podziel się wiedzą!

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest