Znacznik <header> może kojarzyć się z nagłówkami od H1 do H6, które są istotnymi elementami w optymalizacji witryny pod wymagania algorytmu wyszukiwarki Google. Praktyka pokazuje, że nagłówki sekcji są często zawarte w tym znaczniku, ale tak naprawdę nie jest to obowiązkowe. Czym jest HTML Header i jakie ma znaczenie w SEO?
HTML Header – co to jest?
<header> nie jest tym samym co nagłówki HTML, czyli headings H1-H6. To właśnie w nich umieszcza się słowa kluczowe. <header> jest natomiast nagłówkiem strony lub danej części witryny. Może zawierać wspomniane nagłówki, spis treści, logo czy informacje o autorze. W dokumencie HTML często występuje więcej niż jeden element header, ale każdy musi się znajdować w innej sekcji. Powinien zawierać informacje przydatne pod kątem wprowadzenia do treści właściwej albo jeśli chodzi o nawigację. Header to znacznik kontener na inne elementy.
Oto przykładowa zawartość tego znacznika:
<article>
<header>
<h1> Nagłówek pierwszy</h1>
<p>Treść przygotowana przez Pawła Nowaka</p>
<p> Więcej informacji na ten temat </p>
</header>
HTML Header – elementy
Znacznik <header> nie zastępuje nagłówków H1-H6. Może co najwyżej je zawierać. Zdarza się, że jest mylony z <head>, czyli sekcją w kodzie, w której znajdują się tagi <title> i <description>, a także tam wstawia się np. kod tagu Google.
Oto inny przykład zawartości znacznika header:
<header>
<h1>Tytuł witryny</h1>
<nav>
<a href=”site1.html”>Strona 1</a>
<a href=”site2.html”>Strona 2</a>
</nav>
</header>
Wszystko, co znajduje się między <header> a </header> jest częścią nagłówka. W tym przypadku użyto następujących elementów w kodzie:
- <h1> – najważniejszy nagłówek. Przeważnie zawiera główny tytuł strony. To bardzo ważny element w SEO. W H1 powinno się znaleźć najważniejsze słowo kluczowe dla danej strony.
- <nav> – czyli nawigacja wewnątrz nagłówka. Ten element informuje, że linki wewnątrz niego są elementem głównej nawigacji witryny.
- <a href=”site2.html”>Strona 2</a> – odnośniki prowadzące do innych stron.
Znacznik header może również zawierać <img src=”logo.png” alt=”Logo “>. Atrybut src wskazuje na ścieżkę do pliku logo, a alt – tekst alternatywny, czyli opis obrazka. To nie wszystkie elementy, które mogą się znajdować w znaczniku <header>, ale przeważnie dodawane są właśnie one.
HTML Header – jakie ma znaczenie w SEO?
Zawartość znacznika <header> ma wpływ na widoczność strony w wynikach wyszukiwania Google, ponieważ znajdują się w nim zazwyczaj nagłówki H1-H6. Optymalizacja ich treści może przynieść poprawę pozycji zajmowanych przez witrynę. Poza tym wprowadzenie do nagłówków może wpływać na konwersję i powodować, że użytkownicy spędzają więcej czasu na stronie. Treść jest dzięki temu atrakcyjniej zaprezentowana.
Najważniejszym z nagłówków jest H1. Powinien być treściwy i opisywać, czego dotyczy content. H1 zazwyczaj wyróżnia się na tle pozostałych nagłówków rozmiarem czcionki czy też kolorem. Koniecznie umieść w nim najważniejsze dla danej treści słowo kluczowe, ale oczywiście w naturalnej, gramatycznej formie, bez upychania fraz na siłę.
Niemal zawsze strona zawiera również nagłówek H2, który umożliwia opisanie, czego dotyczą poszczególne części contentu. Ma zastosowanie zarówno na blogu, jak i witrynach sprzedażowych. To także miejsce do umieszczenia słów kluczowych.
Często w treściach dodawany jest również nagłówek H3, rzadziej H4-H6. Jeśli jednak struktura danej contentu daje pole do ich wykorzystania, warto to zrobić. To kolejna treść, w której możesz użyć słów kluczowych.
Dla Google największe znaczenie ma nagłówek H1, ale pozostałe są także ważne. Jeśli dobrze dobierzesz ich treść, może to przynieść zdecydowaną poprawę widoczności, zdobycie wysokich pozycji na dodatkowe zapytania.
HTML Header – warto dopracować treść
Elementy, które znajdują się w znaczniku header, mogą, ale nie muszą mieć wpływu na widoczność w wynikach Google. Jeśli znajdują się w nim nagłówki i są zoptymalizowane, może to się przełożyć na większy ruch z wyników organicznych.
