Sprawdzanie struktury nagłówków: konspekt H1 do H6 z HTML | We.Inc
Wklej HTML i zobacz strukturę nagłówków H1 do H6 jako drzewo z oznaczonymi pominiętymi poziomami, brakującymi lub powtórzonymi H1 i pustymi nagłówkami. Działa w przeglądarce; nic nie jest wysyłane.
Sprawdzanie struktury nagłówków
Wklej HTML strony, a narzędzie narysuje konspekt jej nagłówków jako wcięte drzewo, od h1 do h6, łącznie z elementami z role="heading". Oznacza pominięte poziomy, takie jak h2, po którym następuje h4, brakujący lub powtórzony h1 oraz puste nagłówki. Analiza odbywa się w Twojej przeglądarce, więc kod nigdy nie opuszcza Twojego urządzenia.
Co oznacza narzędzie
Kontrola
Przykład
Dlaczego to ważne
Pominięty poziom
h2, po którym od razu następuje h4
Użytkownicy czytników ekranu tracą orientację
Brak h1
Strona zaczyna się od h2
Strona nie ma głównego nagłówka
Więcej niż jeden h1
Logo i tytuł to oba h1
Jeden h1 powinien nazywać stronę
Pusty nagłówek
<h3></h3> lub sama ikona
Odczytywany bez żadnej treści
Pierwszy nagłówek to nie h1
h3 przed h1
Konspekt zaczyna się w połowie
Nagłówki to sposób, w jaki osoby korzystające z czytników ekranu przeglądają stronę, a wyszukiwarkom pokazują kształt Twojej treści. Wklej poniżej HTML strony lub komponentu, z widoku źródła albo z edytora, a pojawi się konspekt z każdym problemem oznaczonym w wierszu, w którym występuje.
Skopiuj HTML swojej strony, na przykład z widoku źródła, i wklej go w pole. Możesz też wczytać przykład, aby zobaczyć działanie kontroli.
Narzędzie odczytuje każdy element od h1 do h6 i każdy element z role="heading" w kolejności dokumentu.
Czytaj drzewo: wcięcie odpowiada poziomowi, a ostrzeżenia są obok nagłówka, który je spowodował.
Popraw kod, wklej ponownie i skopiuj czysty konspekt jako zwykły tekst, jeśli potrzebujesz go do briefu.
Używaj poziomów nagłówków do struktury, a CSS do rozmiaru. Jeśli h2 wygląda w karcie na zbyt duży, zmień jego styl zamiast podmieniać go na h4.
Powrót o kilka poziomów w górę jest w porządku: po h4 może nastąpić h2, gdy zaczyna się nowa sekcja.
Logo rzadko jest właściwym h1. Daj h1 tytułowi, który nazywa tę stronę.
W aplikacjach single page wklej wyrenderowany HTML skopiowany z inspektora elementów przeglądarki, bo widok źródła może pokazać pustą powłokę.
Tekst ukryty przez CSS też jest tu liczony, ponieważ narzędzie czyta kod i nie stosuje Twojego arkusza stylów.
Najczęściej zadawane pytania
Czy pomijanie poziomów nagłówków jest błędem?
Samouczek W3C o nagłówkach mówi, że pomijanie poziomów może być mylące i należy go unikać tam, gdzie to możliwe, na przykład h2, po którym od razu następuje h4. Zamknięcie sekcji i powrót w górę, np. z h4 do h2, jest normalne.
Czy strona może mieć więcej niż jeden h1?
HTML na to pozwala, ale MDN zaleca jeden h1 opisujący treść strony. Dawna idea, że każda sekcja może zaczynać się od h1, opierała się na algorytmie konspektu dokumentu, którego przeglądarki nie używają, dlatego to narzędzie ostrzega przy drugim h1.
Dlaczego nie mogę po prostu wpisać adresu URL?
To statyczna strona działająca w Twojej przeglądarce, a przeglądarki blokują jednej witrynie odczytywanie HTML innej. Wklejanie kodu sprawia, że narzędzie jest uczciwe i prywatne: nic nigdzie nie jest wysyłane.
Czy rozumie role="heading"?
Tak. Element z role="heading" jest odczytywany na poziomie z aria-level. Jeśli brakuje aria-level, przeglądarki przyjmują poziom 2, więc narzędzie traktuje go jako h2 i oznacza brakujący atrybut.
Czy nagłówki wpływają na SEO?
Nagłówki opisują strukturę Twojej treści każdemu czytelnikowi, w tym wyszukiwarkom. Nie obiecujemy niczego w kwestii pozycji; przejrzysty konspekt warto mieć przede wszystkim dla ludzi.
Jak czytać konspekt
Każdy wiersz to jeden nagłówek, wcięty według poziomu. Zdrowy konspekt czyta się jak spis treści: jeden tytuł, kilka sekcji h2 i podsekcje h3 pod nimi tam, gdzie są potrzebne.
Ostrzeżenia wskazują nagłówek, w którym nastąpił skok, a nie ten przed nim. Poprawiaj je od góry, bo jeden zły poziom na początku może sprawić, że wszystko poniżej wygląda dziwnie.
Typowe przyczyny
Większość pominiętych poziomów bierze się z wybierania nagłówka ze względu na jego domyślny rozmiar. Szablony i kreatory stron często robią tak w stopkach i kartach. Inne pochodzą z komponentów używanych ponownie na stronach o innej strukturze, dlatego warto, by poziom nagłówka komponentu był konfigurowalny.
Puste nagłówki zwykle otaczają ikonę lub obraz bez tekstu alternatywnego. Dodaj obrazowi tekst alternatywny, dodaj widoczny tekst albo przestań używać dla niego nagłówka.
Poziomy nagłówków w skrócie
Jak zwykle używa się sześciu poziomów na stronie internetowej
Poziom
Typowe użycie
Tytuł strony, raz
Główne sekcje strony
Podsekcje wewnątrz h2
Szczegóły wewnątrz h3, np. elementy listy funkcji
Rzadko; rozbudowana dokumentacja i teksty prawne
Naprawa zepsutego konspektu
Przed: poziomy wybrane ze względu na rozmiar
Tytuły kart przeskakują z h2 do h4, bo h4 miał odpowiedni rozmiar.
Po: właściwy poziom ze stylem zmienionym w CSS
Karty używają h3, kolejnego poziomu w dół, a klasa utrzymuje ich mały rozmiar.
Sprawdź swoje nagłówki
Wklej HTML poniżej. Jest odczytywany w Twojej przeglądarce i nigdy nie jest wysyłany.
HTML do sprawdzenia
Wczytaj przykład
Wyczyść
Konspekt
Nagłówki: {n}, ostrzeżenia: {w}
Nie znaleziono nagłówków. Wklej HTML strony, aby zobaczyć jej konspekt.
Nie znaleziono problemów.
(pusty)
role=heading
Kopiuj konspekt
Przeskok z h{from} do h{to}
Kolejny h1 na stronie
Pusty nagłówek
Pierwszy nagłówek to nie h1
Strona nie ma h1
role=heading bez aria-level (odczytywany jako poziom 2)