Czym są nagłówki HTML?
Nagłówki HTML są elementem graficznym tekstu, mającym za zadanie oddzielić akapity pomiędzy sobą, podzielić go na sekcje i nadać mu odpowiednią strukturę. Za pomocą nagłówków – tytułów, śródtytułów, można zwiększyć czytelność tekstu. Co mam na myśli?
Najprościej mówiąc – tekst podzielony na akapity, oddzielony odpowiednimi nagłówkami zwyczajnie łatwiej przeczytać i przyswoić. Nagłówek od razu sugeruje, czego dalszy fragment może dotyczyć i co opisuje. Poza tym, tekst nie jest wtedy tak zbity i pozwala robić naturalne pauzy podczas czytania. W myśl treść – pauza na przyswojenie – tekst.
Każdy nagłówek oznaczony jest literą H (ang. Header) i odpowiednią cyfrą, odpowiadającą za jego istotność. Kto wcześniej czytał mojego bloga, pamięta, że temat nagłówków HTML i ich istotności, poruszyłem pobieżnie w artykule na temat pisania tekstów SEO i optymalizacji treści. Kto nie czytał, zachęcam – przeczytasz o zasadach pisania treści zoptymalizowanych zgodnie z czynnikami rankingowymi. Tam zagadnienie nagłówków zostało ledwie muśnięte, jednak użyłem tam pewnego screena, którego użyję również w dalszej części wpisu.
Jakie mamy nagłówki HTML na stronie internetowej i jak je rozróżnić?
Nagłówków HTML istnieje 6. Im niższa liczba porządkowa tym dany tag HTML jest bardziej istotny z punktu widzenia kodu i treści. Lista nagłówków:
H1 – najbardziej istotny nagłówek strony i podstrony. Tag tytułowy. Warto używać go jako tytułu tekstu. Jest odbierany jako priorytetowy. Kiedyś istniało przeświadczenie, że znacznik H1, powinien na podstronie widnieć tylko raz, jednak kilka lat temu zostało to przez Google zdementowane. Ja jednak, nadal używam go wyłącznie jako oznaczenia tytułu podstrony, o czym niżej.
H2 – podtytuł, rozpoczęcie zagadnienia, we wszystkich moich tekstach możesz zauważyć każde kolejne zagadnienie, rozpoczęte od nagłówka H2.
H3 – nieco bardziej szczegółowe zahaczenie o temat rozpoczęty w H2, warto w nagłówku wyższego rzędu rozpocząć temat i rozpisać go merytorycznie, a za pomocą nagłówka H3, opisać bardziej szczegółowo, elementy tematu, wymagające większego objaśnienia.
H4, H5, H6 – nagłówki niższego rzędu. Analogiczne do sytuacji opisanej wyżej – mniej istotne treści niż w nagłówku H3. Zasada jest identyczna. Ja osobiście z tych wariantów nie korzystam, prawie wcale. Z punktu widzenia układu tekstu i pozycjonowania fajnie jest mieć te nagłówki w tekście, jednak upychanie ich na siłę nie ma większego sensu, jeżeli ma spowodować niepotrzebny bałagan.
W mojej opinii 3 nagłówki najwyższego rzędu to must have każdej treści blogowej. Tym bardziej, jeżeli domena nie ma szczególnej mocy – dajemy sygnał robotom, że warto jej się przyjrzeć.
Hierarchia nagłówków HTML – jak je stosować w SEO?
Obraz świetnie wyjaśnia stosowanie nagłówków HTML podczas pisania treści. I tak, Tytuł – czyli nagłówek H1, jest najważniejszym nagłówkiem w obrębie dokumentu. W tym samym artykule przytoczyłem wypowiedź Johna Muellera, z Google, który mówił, że nagłówków H1, możemy stosować ile nam się żywnie podoba. I owszem, teoretycznie, z punktu widzenia robotów wyszukiwarek stosowanie większej liczby nagłówków H1 nie szkodzi pozycjom strony, ale – bo zawsze jakieś jest – przecież nie tylko o roboty tutaj chodzi.
MOIM ZDANIEM, warto stosować zawsze wyłącznie jeden znacznik tytułowy, najlepiej umieścić go możliwie najwyżej w kodzie danej podstrony. Dlaczego moje osobiste zdanie tak wygląda? Otóż nagłówki mają nadawać tekstowi strukturę i ułatwiać jego przyswajanie. Skoro nagłówek H1 jest tytułowy i często graficznie jest największy ze wszystkich – warto umieścić go na górze i przy jego pomocy rozpocząć tę strukturę nadawać.
Znacznik H1 pełni istotną rolę dla użytkownika oraz robotów. O ile pozostałe nie są wymagane, o tyle ten tytułowy świetnie strukturyzuje treść, więc zachęcam stosowanie.
Ważne – zawsze utrzymujemy odpowiednią kolejność – po H1 następuje H2, po H2 – H3. Nigdy nie stosujemy ich naprzemiennie. Czyli, zgodnie z tym co pokazałem na screenie użytym wyżej:
<h1>Tytuł tekstu</h1>
<p>treść</p>
<h2>Rozpoczęcie zagadnienia 1</h2>
<p>treść rozwinięcia</p>
<h3>Rozwinięcie tematu z h2</h3>
<p>treść rozwinięcia</p>
<h2>Rozpoczęcia zagadnienia 2</h2>
<p>treść rozwinięcia</p>
I tak dalej. Mam nadzieję, że wyjaśnienie jest wystarczające. Dlaczego chcę zaznaczyć to tak wyraźnie? To jeden z najczęściej napotykanych błędów podczas audytów SEO!
Jak sprawdzić obecność nagłówków w kodzie strony?
Sprawdzenie obecności nagłówków z poziomu komputera osobistego, nie sprawi absolutnie żadnego problemu nawet amatorowi. Jak sprawdzić nagłówki?
Wystarczy prawy klik i opcja Pokaż źródło strony, w różnych przeglądarkach, ta opcja może być nazwana inaczej, ale generalnie powinno padać tam jakieś stwierdzenie o źródle. W większości przeglądarek zadziała również skrót klawiszowy Ctrl + U. Magiczna kombinacja pokaże Ci kod źródłowy, gdzie wystarczy użyć Ctrl + F i wyszukiwarce wpisać h1, a dostaniesz takie oto wyniki (przykład z mojej strony głównej):
Zaznaczyłem w ramce mój nagłówek H1 – czyli po prostu Kreacja Marki. Nagłówki mogą być opatrzone różnymi klasami, stylami i elementami nadającymi im wygląd zewnętrzny. W większości przypadków, elementy stylistyczne nie wpływają w żaden sposób na pozycjonowanie.
Pamiętaj, aby nagłówki były ostylowane odpowiednio – H1 powinien być największy, H2 nieco mniejszy, H3 mniejszy niż h2 i tak dalej. Każdy nagłówek niższego rzędu, rozwija treść z tego istotniejszego, więc powinno to zostać graficznie uwypuklone.
Narzędzia do sprawdzania struktury nagłówków
Istnieją narzędzia do analizy kodu strony i struktury nagłówków na danej podstronie. Jakie? SEO Meta in 1 Click dla Google Chrome lub SEO Spider od Screaming Frog, w wersji płatnej i darmowej, który pozwoli zbadać całą, nawet najbardziej rozległą strukturę serwisu pod kątem parametrów url, tagów, nagłówków właśnie i wielu innych. Ja natomiast, jako że najczęściej korzystam z Firefoxa, najbardziej lubię darmową wtyczkę SEO Quake. Nie jest skomplikowana, ale pokazuje najczęściej potrzebne parametry. Niski próg wejścia powoduje, że jest dobra do startowych działań nawet dla amatora.
Jak sprawdzić nagłówki w SEO Quake?
Wystarczy kilka kroków, żeby w jednym miejscu zobaczyć wszystkie znaczniki w obrębie danej podstrony. Po pierwsze – Instalujesz wtyczkę SEO Quake – link powyżej. Następnie wchodzisz na stronę, którą chcesz zbadać. W kroku kolejnym klikasz ikonę wtyczki:
Zobaczysz tabelę podobną do tej powyżej, lub przycisk zachęcający do logowania. Nie musisz się nigdzie logować! W następnym kroku musisz tylko kliknąć Diagnosis z paska menu:
Po kliknięciu zostaniesz przeniesiony na wygenerowaną stronę analizy, gdzie możesz zobaczyć opisy i oceny wykonania różnych aspektów strony. Nas interesuje sekcja headings, czyli nagłówki:
Tym samym widzisz wszystkie nagłówki w obrębie wybranej przeze mnie podstrony, widzisz jaksą ułożone i strukturę ich następowania po sobie. Wtyczka podpowiada także, czy struktura jest właściwa.
Nagłówkowy FAQ!
Zebrałem tu kilka pytań pojawiających się na forach, w innych publikacjach, rozmowach z klientami i tak dalej. Szybkie pytanie, szybka odpowiedź!
Dlaczego nagłówki HTML są istotne?
Pomagają ułożyć treść dla robotów i dla użytkowników. Z góry narzucają pewną strukturę, co użytkownikom pomaga w czytaniu i przyswojeniu tekstu, a robotom w odczytaniu intencji i ułożeniu sobie zawartości. Specyfikacja strony internetowej powinna opisywać nagłówki w serwisie.
Jaki długi powinien być każdy nagłówek HTML i co powinien zawierać?
Krótki i zwięzły, powinien odpowiadać na pytania użytkownika – tworząc nagłówki HTML weź pod uwagę, co może być ważne dla Twoich czytelników.
Co z frazami kluczowymi w nagłówkach?
Jak najbardziej warto je umieszczać – ale pamiętaj! Nie upychaj fraz kluczowych! Keyword Stuffing nie działa! Synonimy, wyrazy podobne, elementy powiązane z danym wyrażeniem – to wszystko warto umieścić w nagłówku.
Czy styl nagłówka ma znaczenie?
Tylko pośrednie! Wiadomo – ładne nagłówki lepiej się czyta. Pamiętaj o wielkości – H1 największy, każdy niżej mniejszy. Umieszczę to w podsumowaniu. Nagłówki nie służą do stylowania tekstu, a do nadania mu odpowiedniej struktury!
Czy h1 jako tytuł artykułu, to dobry pomysł?
Jak najbardziej. W przypadku mojego bloga, H1 zawsze jest jednocześnie tytułem artykułu. Od razu pokazujesz robotom, czego dotyczy podstrona.
Czy nagłówki HTML są niezbędne?
Nie, nie ma wymogu ich stosowania, ale na pewno ułatwiają proces pozycjonowania strony. Ładna, czysta struktura tekstu ułatwia robotom jego indeksowanie, a użytkownikom – czytanie. To zupełnie, jak z książką. Ciężko czytać teksty bez podziału na rozdziały, co?
Ile razy stosować dany nagłówek html?
Nie ma żadnego wymogu, ile razy dany śródtytuł powinien się pojawić. Nawet w przypadku H1 nie ma przymusu co do pojedynczego stosowania. Moim zdaniem – jedno H1 wystarczy, a wszystkie pozostałe – wedle potrzeb wynikających z treści tekstu. Czyli znacznik H2 rozpoczyna daną myśl, ewentualny H3 ją rozwija. Ważne, żeby był czytelny i łatwy do przyswojenia.
Czy można zastosować taką samą treść nagłówka na kilku różnych stronach?
Lepiej nie – unikalne nagłówki łatwiej pomogą robotom zrozumieć zawartość strony. Skoro na kilku podstronach znajdzie ten sam śródtytuł – może wybrać niewłaściwy artykuł do wypozycjonowania lub nie wybrać żadnego.
Podsumowanie i 9 porad na temat tagów HTML!
Tradycyjnie garść tipów – o czym pamiętać przy pracy z nagłówkami, czego unikać i jakie elementy są w tym temacie sprawdzone, czyli działają dobrze! Lista:
- Unikaj zbyt długich nagłówków – kondensuj najważniejszą treść, którą masz zamiar rozwinąć.
- Nie umieszczaj linków wewnętrznych w nagłówku – nie ma to żadnej wartości dodanej.
- Nie zostawiaj pustego nagłówka – puste elementy w kodzie robią bałagan.
- Dbaj o odpowiednią hierarchię – kolejność nagłówka jest istotna.
- Nie stosuj takich samych nagłówków na różnych stronach – na tych samych również, dbaj o unikalność.
- Nie upychaj – moim zdaniem jeden nagłówek H1 na stronę wystarczy.
- Staraj się umieszczać frazy kluczowe w nagłówkach – synonimy, odmiany, długi ogon – im bardziej zahaczysz o zagadnienie, tym lepiej.
- Nagłówki przede wszystkim „układają treść”, nie stosuj ich wyłącznie do stylowania.
- Dbaj o odpowiednią wielkość – H1 powinien być największy, a każdy kolejny, mniejszy od poprzedniego. Najkrócej – od najważniejszego, do najmniej ważnego.
Mam nadzieję, że mój poradnik rzucił trochę światła na temat porządkowania struktury nagłówków na stronie. Może warto zajrzeć do kodu swojego serwisu i zrobić porządek? W razie pytań – jestem oczywiście do dyspozycji! Napisz lub zadzwoń, a na pewno będę mógł Ci pomóc!
Dla zainteresowanych – nowość: administrowanie i opieka nad stroną internetową!
Zajrzyj też na moją stronę główną: Kreacja Marki i zobacz, co mogę dla Ciebie zrobić!
Cześć! Zbudowałem brand kreacjamarki.pl, żeby pomóc firmom, które chcą zaistnieć w internecie. Przez kilka lat prowadziłem redakcję w firmie marketingowej i nadszedł moment, aby zrobić coś dla siebie. Za sobą mam kilkadziesiąt ciekawych projektów. Przed sobą jeszcze więcej. Moje publikacje znajdziesz w miesięcznikach Biznes Hotel i Hotelarz. Prywatnie fan kina niezależnego i obsesyjny fan angielskiego futbolu.