Nagłówki i struktura strony

Moduł 3: Techniczne podstawy strony · Czas czytania: 11 minut

Cel lekcji: Po tej lekcji potrafią Państwo zbudować stronę z wyraźnym nagłówkiem głównym i logicznymi śródtytułami, wyjaśnić, co Google i czytniki ekranu robią z nagłówkami, oraz pisać dobre teksty alternatywne i nazwy plików dla obrazów.

Kluczowe pojęcia: nagłówek (od <h1> do <h6>), nagłówek główny, śródtytuł, pomijanie poziomu, semantyczny HTML, czytnik ekranu, sformatowany tekst, który nie jest nagłówkiem, tekst alternatywny (alt), pusty alt="" dla dekoracji, nazwa pliku, tekst na obrazach

Nagłówki to spis treści Państwa strony

Nikt nie lubi czytać długiego tekstu bez śródtytułów. W internecie jest to jeszcze wyraźniejsze: odwiedzający najpierw przeglądają stronę wzrokiem i zaczynają czytać dopiero wtedy, gdy widzą, że znajdą na niej odpowiedź. Nagłówki w tym pomagają. Nagłówki to jednak coś więcej niż duże, pogrubione litery. W HTML są to osobne elementy z określonym poziomem:

<h1>Bruidsboeketten op maat</h1>
  <h2>Zo werken we</h2>
    <h3>De kennismaking</h3>
    <h3>Het proefboeket</h3>
  <h2>Voorbeelden</h2>
  <h2>Veelgestelde vragen</h2>

Element <h1> to nagłówek główny: o czym jest ta strona? Elementy <h2> to rozdziały, elementy <h3> to podrozdziały w ich obrębie i tak dalej, aż do <h6>. (Przykład pochodzi ze strony holenderskiej kwiaciarni o bukietach ślubnych: „Bruidsboeketten op maat” to „Bukiety ślubne na zamówienie”.) Wcięcia powyżej służą tylko do zobrazowania struktury; w prawdziwym HTML nie mają znaczenia.

Tę strukturę rzeczywiście odczytują dwie grupy:

1. Osoby korzystające z czytnika ekranu. Osoba niewidoma lub słabowidząca często każe czytnikowi ekranu najpierw wymienić wszystkie nagłówki, a następnie przechodzi do fragmentu, którego szuka. Bez prawdziwych nagłówków strona jest jednym długim blokiem tekstu.
2. Wyszukiwarki. Google używa nagłówków, aby zrozumieć, czego dotyczą poszczególne części strony.

Co Google mówi o nagłówkach

Na temat nagłówków krąży wiele mitów. Oto, co mówi sam Google:

• W przewodniku dla początkujących po SEO Google podaje, że kolejność nagłówków nie ma znaczenia dla wyszukiwarki Google i że nie istnieje żadna magiczna liczba nagłówków, którą strona musi mieć. Nagłówki w logicznej kolejności są natomiast bardzo pomocne dla czytników ekranu.
• John Mueller z Google powiedział w nagraniu wideo (2019), że systemy Google nie mają problemu z wieloma nagłówkami <h1> na jednej stronie. Google stara się pracować z HTML takim, jaki jest: z jednym <h1>, z kilkoma lub tylko ze sformatowanym tekstem bez prawdziwych nagłówków.
• W dokumentacji dotyczącej linków tytułowych (lekcja 3.1) Google wskazuje jednak sytuację, w której coś może pójść nie tak: brak wyraźnego tytułu głównego. Jeśli na górze strony znajduje się kilka dużych, wyróżniających się nagłówków i nie wiadomo, który z nich jest tytułem głównym, Google może mieć trudność z wyborem dobrego linku tytułowego. Google zaleca wyraźne wyróżnienie nagłówka głównego, na przykład jako pierwszego widocznego elementu <h1>.

Wniosek tego kursu: jeden wyraźny <h1> na stronę to dobry nawyk, nie dlatego, że w przeciwnym razie Google ukarze stronę, ale dlatego, że wtedy strona jasno mówi wszystkim, o czym jest. Czytelnicy, czytniki ekranu i Google nie mają wtedy wątpliwości. Dlatego test w zadaniu A3.2 pokazuje kolor zielony przy dokładnie jednym niepustym <h1>, pomarańczowy przy więcej niż jednym i czerwony, gdy nie ma go wcale.

Częste błędy

Budowa strony, która udziela odpowiedzi

Dobra kolejność dla niemal każdej strony:

1. Nagłówek główny (<h1>), który mówi, co odwiedzający tu znajdzie. Często przypomina tytuł z lekcji 3.1, ale nie musi być taki sam. Tytuł wyświetla się w wynikach wyszukiwania, a nagłówek główny na samej stronie.
2. Krótkie wprowadzenie, które od razu podaje najważniejszą odpowiedź.
3. Śródtytuły (<h2>) dla każdego podtematu, sformułowane tak, jak czytelnik szuka informacji: "Ile kosztuje bukiet ślubny?" mówi więcej niż "Ceny".
4. W razie potrzeby <h3> pod elementem <h2>, a nie osobno.

Lekcja 7.3 omawia dokładniej samo pisanie. Tutaj chodzi o szkielet.

Obrazy: tekst alternatywny i nazwa pliku

Wyszukiwarka nie "widzi" zdjęcia tak jak Państwo. Google korzysta z rozpoznawania obrazu, ale wiele informacji czerpie z otaczającego tekstu. Najważniejsze źródło wskazuje sam Google: tekst alternatywny (alt).

<img src="/beelden/bruidsboeket-pioenrozen-wit.jpg"
     alt="Bruidsboeket met witte pioenrozen en eucalyptus">

Tekst alternatywny ma dwa zadania:

• Dostępność: czytnik ekranu odczytuje go osobom, które nie widzą obrazu. Jeśli obraz się nie wczyta, przeglądarka wyświetla ten tekst zamiast zdjęcia.
• Zrozumienie: Google używa tekstu alternatywnego, razem z rozpoznawaniem obrazu, aby zrozumieć, co przedstawia obraz. Pomaga to szczególnie w Grafice Google.

Jak napisać dobry tekst alternatywny:

• Proszę opisać jednym krótkim zdaniem, co widać na obrazie i dlaczego znajduje się on na tej stronie.
• Słów kluczowych prosimy używać tylko wtedy, gdy pasują naturalnie. Google ostrzega, że teksty alternatywne przeładowane słowami kluczowymi pogarszają wrażenia użytkowników i mogą zostać uznane za spam.
• Obraz, który jest wyłącznie ozdobą (linia, wzór w tle), otrzymuje pusty atrybut alt: alt="". Czytnik ekranu go wtedy pomija. Brak atrybutu alt to coś innego: wtedy czytnik ekranu czasem odczytuje nazwę pliku.
• Jeśli na obrazie znajduje się ważny tekst (godziny otwarcia, cena, ulotka), prosimy umieścić ten tekst również zwyczajnie na stronie. Tekst na obrazku jest trudny do odczytania dla czytnika ekranu i dla wyszukiwarki.

Trochę pomaga również nazwa pliku. Google zaleca krótkie, opisowe nazwy i podaje image1.jpg lub pic.gif jako przykłady tego, czego lepiej unikać. bruidsboeket-pioenrozen-wit.jpg mówi więcej niż IMG_4032.jpg.

Szybkość i wymiary obrazów omawiamy w lekcji 4.3.

W praktyce: nagłówki w kreatorach stron

• W AI Builder od WebOké pierwszy nagłówek strony automatycznie staje się elementem <h1>, a wszystkie kolejne nagłówki elementami <h2>. Dzięki temu każda strona ma dokładnie jeden nagłówek główny. Do każdego zdjęcia można dodać opis, który staje się tekstem alternatywnym. Kontrola SEO ostrzega o zdjęciach bez opisu.
• W WordPress poziom (od H1 do H6) wybiera się w edytorze blokowym w bloku Nagłówek. Motyw zazwyczaj sam zamienia tytuł strony w element <h1>; w treści prosimy wtedy używać H2 i niższych. Tekst alternatywny wpisuje się przy obrazie w bibliotece mediów lub w bloku.

Inne kreatory stron działają podobnie. W razie wątpliwości prosimy zajrzeć do kodu źródłowego (Ctrl+U) lub wyszukać za pomocą Ctrl+F ciąg <h1.

Podsumowanie

• Nagłówki (od <h1> do <h6>) są spisem treści Państwa strony dla czytelników, czytników ekranu i wyszukiwarek.
• Google nie ma problemu z kilkoma elementami <h1> ani z inną kolejnością, ale zaleca wyraźny tytuł główny. Jeden wyraźny <h1> to dobry nawyk.
• Poziom należy dobierać według struktury, a nie wielkości czcionki; najlepiej nie pomijać poziomów.
• Dobry tekst alternatywny krótko opisuje, co widać na obrazie; ozdoby otrzymują alt=""; bez upychania słów kluczowych.
• Ważny tekst powinien znajdować się na stronie, a nie tylko na obrazie.

Quiz

Zadanie

Zadanie A3.2: Jeden nagłówek główny i logiczna struktura. Prosimy wpisać adres jednej ze stron swojej witryny. Program pobierze stronę, policzy nagłówki <h1> i pokaże strukturę nagłówków jako spis treści. Zobaczą Państwo, czy jest dokładnie jeden niepusty nagłówek główny, czy pomijane są poziomy i ile obrazów nie ma atrybutu alt. Najpierw prosimy wpisać, ile elementów <h1> według Państwa znajduje się na stronie. Nie mają Państwo własnej strony? Prosimy użyć www.rijksoverheid.nl.

Więcej informacji

• Google Search Central, przewodnik dla początkujących po SEO (nagłówki, tekst alternatywny): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, sprawdzone metody dotyczące obrazów: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (dostępne nagłówki): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, teksty alternatywne: https://www.w3.org/WAI/tutorials/images/