Jak prawidłowo używać tagów nagłówka HTML?

Opublikowany: 2020-06-25

Każda strona internetowa jest swoim unikalnym potworem, a programiści i projektanci umieszczają w kodzie własne głosy. Ale jednym z elementów wspólnych dla każdej strony internetowej są tagi nagłówków HTML. Te nagłówki nie tylko dzielą zawartość na bardziej czytelne sekcje, ale tworzą semantyczny zarys witryny, dzięki czemu wyszukiwarki i oprogramowanie ułatwiające dostęp mogą dokładnie określić, jaka zawartość składa się na witrynę. Czasami pojawiają się pewne zamieszanie dotyczące prawidłowego użycia i funkcji tagów nagłówków HTML, dlatego chcemy przejść przez wszystkie 6 poziomów i omówić, jak i kiedy używać ich poprawnie.

Subskrybuj nasz kanał YouTube

Dlaczego warto używać tagów nagłówka HTML?

Jak powiedzieliśmy powyżej, te tagi tworzą szkielet Twojej witryny. Bez nich nie tylko tytuł i cel Twojej witryny są mniej niż jasne, ale treść wygląda dla użytkowników i botów jak jedna wielka ściana tekstu — nawet jeśli podzielisz ją za pomocą akapitów.

Ponadto czytniki ekranu i oprogramowanie ułatwień dostępu używają ich do nawigacji w treści (czasem dosłownie). Jeśli więc nie dołączysz tagów nagłówków HTML, Twoja witryna stanie się niedostępna dla wielu osób, ponieważ po prostu nie mogą poruszać się po stronie i treści.

Ponadto wyszukiwarki i inne roboty sieciowe, które trafiają do Twojej witryny, również poruszają się po Twoich nagłówkach. Ostatnio Google rozważa semantykę kodu w swoich rankingach, co oznacza, że ​​intencja wyszukiwania jest bardzo ważona. Twoje tagi nagłówków HTML są główną częścią tego, informując Google i odwiedzających, gdzie na stronie znaleźć określone informacje, uporządkowane według ważności hierarchicznej.

Każdy tag na Twojej stronie pomaga w tym wszystkim na swój własny sposób.

Hierarchia tagów jest ważna

Hierarchia tagu nagłówka HTML ma znaczenie. Kolejność, w jakiej używasz tych tagów, może spowodować lub zepsuć SEO Twojej witryny. Chociaż możesz stylizować je za pomocą CSS i uczynić tag H6 większym, pogrubionym i jaśniejszym niż H2, nadal powinieneś starać się zachować je w porządku, aby nie mylić robotów indeksujących (i czytelników).

Pomyśl o tagach w porządku rosnącym tak, jakby były nagłówkami konspektu Twojego posta. Powinieneś tylko (ogólnie) umieścić wyższą liczbę pod bezpośrednim poprzednikiem. Możesz zagnieździć je tak głęboko, jak chcesz, ale upewnij się, że za każdym razem umieszczasz tylko następny.

Oto przykład: 

<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>

Mogą wystąpić szczególne przypadki, w których masz pojedynczy H6 nad H4, ale w większości przypadków Google i inne wyszukiwarki określają priorytet tematu i mierzą skuteczność treści w celu wyszukiwania, używając nagłówków do poruszania się po treści.

Tagi H1

Znacznik H1 może być najprostszym ze znaczników nagłówka HTML, a jednocześnie jednym z najbardziej niezrozumianych. W większości przypadków zobaczysz nagłówek H1 jako tytuł konkretnej strony lub posta. To właśnie wyszukiwarki (prawdopodobnie) będą wyświetlać w wynikach. Twoja przeglądarka prawdopodobnie pokaże to również na pasku tytułu, chociaż wiele wtyczek SEO i podobnych aplikacji pozwala to zmienić. Z tego powodu, chociaż ważne jest, aby docelowa fraza kluczowa znajdowała się w tagu H1, nie jest to w 100% konieczne. Napisz nagłówki i tytuły semantycznie, aby zakryć intencję wyszukiwania odwiedzających, zamiast wypełniać słowa kluczowe tagami nagłówków HTML.

h1 przykład

Powyższy obrazek pokazuje tag H1 używany jako tytuł wpisu do artykułu na blogu Elegant Themes. Jest to również jedyny tag H1 na stronie. Oznacza to, że jest to temat treści na stronie.

Przez lata standardową praktyką było posiadanie jednego (i tylko jednego) tagu H1 na stronie. W większości jest to nadal dobra rada. Google i inne wyszukiwarki indeksują Twoją stronę i wyszukują tag H1. Następnie używają go do określenia tematu, tytułu i struktury.

Jednak Google powiedział wyraźnie, że posiadanie wielu tagów nagłówka HTML H1 w Twojej witrynie nie wiąże się z żadnymi karami za SEO. Nie oznacza to, że możesz zwariować, używając ich wszędzie w swojej witrynie, ale oznacza to, że możesz użyć więcej niż jednej strony na stronie, gdy zajdzie taka potrzeba.

Kiedy używać wielu nagłówków h1

Jedynym celem H1 jest wskazanie pełnej sekcji na jeden temat. Oznacza to, że jeśli masz jedną stronę, która ma więcej niż jeden temat, chciałbyś użyć H1 dla każdego nowego tematu na tej stronie. W ten sposób poinformujesz Google, że Twoja strona nie dotyczy tylko tematu w tytule. Ale może być też sekcja na zupełnie inny (choć powiązany) temat niżej.

W przypadku witryn jednostronicowych jest to również ważne, ponieważ na tej jednej stronie może znajdować się sekcja Informacje, Ceny, Kontakt i Portfolio. Jak więc powiadomić Google, że treść zawarta w każdej sekcji jest osobną autonomiczną jednostką?

Tagi H1, właśnie tak. Traktujesz każdą sekcję jak własną mini-stronę internetową, używając hierarchii, którą omówiliśmy powyżej w każdej z nich. W ten sposób Google widzi nagłówki podczas poruszania się po stronie, a następnie może określić, z której z tych sekcji pobrać polecane fragmenty (i tak dalej), aby odpowiedzieć na pytania wyszukiwarek.

Możesz także użyć tagu H1 za każdym razem, gdy używasz tagu sekcji w swojej witrynie, ale sugerujemy to tylko wtedy, gdy jest to sekcja o znaczeniu równoległym do tytułu strony, a nie podrzędna.

Tagi H2

Obecnie tagi H2 będą najprawdopodobniej najczęściej używanym tagiem nagłówka HTML na Twoich stronach. I nie bez powodu. Większość postów i stron w Internecie składa się z jednego tematu z kilkoma podtytułami. Zalecamy, aby każda tworzona przez Ciebie treść zawierała co najmniej jeden tag H2. Yoast i inne wtyczki SEO sugerują nagłówek mniej więcej co 300 słów. W zależności od treści, do tego służą tagi H2.

Oddzielają podtematy (lub kroki), aby ułatwić czytanie. Na przykład większość naszych postów składa się głównie z nagłówków h2 (w stosownych przypadkach z H3). To dlatego, że nasze artykuły dotyczą jednego tematu, w którym staramy się rozwiązać jeden problem. Będziemy mieli tytuł „Jak używać OBS Studio do transmisji na żywo jako H1, ale podtytuły „Jak zacząć z OBS Studio” będą w H2.

przykład h2

Znacznik H2 reprezentuje poszczególne kroki, które odnoszą się bezpośrednio do tematu H1. W tym konkretnym poście zastosowaliśmy następującą strukturę: 

<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>

Tagi nagłówków H2 w tym poście omawiają główne idee, takie jak rozpoczęcie i pobieranie go, konfigurowanie rzeczywistego oprogramowania, a następnie dostosowywanie wyglądu ekranu dla widzów. Chociaż pod tymi w H3 znajdują się również etapy, nagłówki H2 wskazują na obraz artykułu w dużej skali. Jest to widok wysokiego poziomu, który roboty indeksujące i czytelnicy będą mogli przeglądać, aby sprawdzić, czy artykuł zawiera informacje, których szukają.

Ogólnie rzecz biorąc, będziesz mieć wiele tagów H2 na artykuł, podczas gdy możesz nie mieć pod nimi zagnieżdżonych podtytułów. Jeśli Twoja strona lub post dotyczy jednego tematu, który nie jest podzielony na sekcje z podsekcjami, jak w powyższym przykładzie, lepiej byłoby mieć wiele tagów H2 niż zagnieżdżone H2 -> H3 -> H4, ponieważ wskazują one robotom ponowne zanurzenie się głębiej w suptopie niż rozwinięcie głównego tematu postu.

Tagi H3

Z drugiej strony tagi H3 to miejsce, w którym Twoje artykuły mogą naprawdę zagłębić się w szczegóły Twojego tematu. Nigdy nie powinieneś używać tych tagów H3 bezpośrednio pod H1. Googleboty i wyszukiwarki widzą je absolutnie jako podtytuły. Podczas gdy H2 jest akceptowany jako nagłówek główny dla sekcji w ramach jednego artykułu (przy czym H1 deklaruje główny temat jako tytuł, pamiętaj).

h3 przykład

Jeśli przyjrzysz się uważnie powyższemu obrazkowi, zobaczysz, że rzeczywista stylizacja i rozmiar między naszymi tagami H2 i H3 nie różnią się zbytnio. Powodem jest to, że nie chcemy, abyś na podstawie skanowania zakładał, że jakikolwiek punkt, który zrobimy w H3 jest mniej ważny niż H2. Bo tak nie jest.

Jest tylko mniejszy, aby wskazać, że jest to punkt podrzędny w stosunku do H2, a nie bezpośredni związek z ogólnym tematem, co jest najważniejsze ze strukturalnego punktu widzenia dotyczącego SEO Twojego artykułu. Ludzkim czytelnikom, a nie robotom, wizualne rozróżnienie po prostu pomaga przesuwać ich w dół strony i rozbijać informacje, aby łatwiej je analizować.

Tagi H4, H5, H6

Nie bez powodu połączyliśmy je razem. Ogólnie rzecz biorąc, trudno będzie znaleźć witryny, które w pełni wykorzystują zakres tagów nagłówków HTML od H1 do H6. Zdecydowanie najpopularniejszą strukturą jest H1 do H3. Tak jak rzadko widzisz zarys treści wykraczający poza drugi poziom zagnieżdżony. 

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

H4

W większości tag H4 będzie służył temu samemu celowi co H3. Będziesz ich używać, aby przejść do szczegółów kroków i przykładów, ale zawsze są one zagnieżdżone pod głównymi nagłówkami. Projektanci zazwyczaj stylizują je za pomocą CSS mniejszego niż H3. Zwykle widzą ograniczone zastosowanie w zwykłym tworzeniu treści. Temat wydaje się być bardzo dogłębny, jeśli pomysły muszą być podzielone tak, aby potrzebny był tag nagłówka H4.

H5 i H6

Możesz używać nagłówków H5 i H6 na kilka różnych sposobów.

Pierwsza droga

(Tylko dla przykładu, podzieliliśmy tę konkretną sekcję na różne części za pomocą nagłówka, a teraz znajdujemy się w H4, ponieważ jest to podtemat głównego artykułu.)

Te nagłówki są często używane w spisach treści i podobnych listach, chociaż ich główna funkcja jest technicznie taka sama jak inne, wyznaczając tematy o malejącym znaczeniu na całej stronie. Rzadko będzie można znaleźć dokument z pełną gamą nagłówków aż do H6.

Druga droga

Niektórzy używają znaczników H5 i H6 jako „specjalnych” nagłówków formatujących. Do tych dwóch tagów nagłówków HTML zastosują specjalny kod CSS, który jest zupełnie inny od H1 do H4. Następnie możesz ich użyć do zwrócenia uwagi na tematy i pomysły, które w przeciwnym razie mogłyby zostać przeoczone.

Nie jest to technicznie najlepsza praktyka, ponieważ nagłówki są hierarchiczne. Jeśli jednak Twoja witryna jest ogólnie dobrze zorganizowana i używasz oszczędnie H5 i H6 jako specjalnych stylów na niektórych pojedynczych stronach lub postach, prawie na pewno nie odniesiesz żadnego trafienia SEO.

Pamiętaj tylko, że nawet jeśli używasz ich do specjalnego formatowania, nie wyłamujesz się z hierarchii. Utrzymuj je w porządku. Więc jeśli używasz H6 do stylizacji podtytułu, upewnij się, że następny, którego używasz, to H1 lub H2, aby pokazać, że wróciłeś do standardowej struktury.

Czego nie robić z tagami nagłówka HTML

Nie twórz struktury pojedynczej strony z całą hierarchią nagłówków w dół. Lepiej jest mieć H1 dla tytułu i wszystkie H2, niż zagnieżdżać każdy kolejny nagłówek.

Tak: 

<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>

Nie: 

<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>

Dodatkowo nie chcesz używać nagłówków przypadkowo. Używaj ich tylko w kolejności. W przeciwnym razie roboty indeksujące nie będą miały pojęcia, jak poruszać się po Twojej stronie, podobnie jak oprogramowanie ułatwień dostępu.

Nie: 

<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>

Ogólnie można założyć, że robot indeksujący będzie wiedział, że opuściłeś podsekcję, gdy znajdzie następne H1 lub H2. W powyższym fragmencie kodu roboty i boty miałyby trudności z analizowaniem struktury informacji.

Zawijanie za pomocą tagów nagłówka HTML

I zobaczyć? Wracamy do H2, żeby wszystko podsumować. Tagi nagłówków są ważnym elementem każdej strony internetowej. Właściwe ich użycie może zwiększyć rankingi w wyszukiwarkach, a także UX Twojej witryny, ponieważ odwiedzający będą mogli łatwiej znaleźć informacje, których szukają w Twoich treściach. Pamiętaj, aby nie umieszczać słów kluczowych w zbyt wielu nagłówkach. Chociaż dobrym pomysłem jest uwzględnienie słów kluczowych lub wyrażeń, które omawiasz, aby upewnić się, że Twoje pomysły są jasne, Googleboty i inne są dość sprytne i potrafią stwierdzić, kiedy zamieniłeś tematy lub jesteś na tym samym. Ogólnie rzecz biorąc, używanie tagów nagłówków HTML jest niezwykle ważne, ale jeśli pamiętasz tylko o kilku rzeczach, Twoje witryny błyskawicznie zabłysną.

Czy poprawnie używasz tagów nagłówków HTML?

Artykuł wyróżniony obrazem autorstwa VectorV / shutterstock.com