Czym jest lista HTML?
Lista składników na świąteczny makowiec, wyniki konkursu skoków w Zakopanem, ranking najlepiej sprzedających się płyt według Billboardu — co je łączy? To, że chyba nikt nie zdecydowałby się umieścić ich na swojej stronie, wymieniając kolejne elementy „po przecinku”. I tu właśnie sprawdza się przejrzyście sformatowana lista HTML.
Technicznie, obok nagłówków H1, H2 itd., to podstawowy sposób formatowania struktury treści. Przy pomocy trzech znaczników HTML: ol, ul oraz li możemy określić zbiór elementów, które zostaną wyróżnione w treści strony w postaci prostej, czytelnej i od razu przyciągającej uwagę listy.
Jakie są rodzaje list w HTML i kiedy je stosować?
W języku znaczników istnieją dwa podstawowe typy list: uporządkowane i nieuporządkowane.
Uporządkowane listy HTML
Lista uporządkowana HTML to taka, w której kolejnym elementom przypisuje się numer, literę alfabetu lub cyfrę rzymską. W języku HTML listy uporządkowane otwieramy oraz zamykamy przy pomocy znaczników:
<ol></ol>i zapisujemy w taki oto sposób:
O czym trzeba pamiętać? Po pierwsze, każdy element musi być wyróżniony znacznikami:
<li></li>Po drugie — znacznik ol w nawiasach ostrokątnych domyślnie interpretowany jest jako lista numerowana HTML. Jeśli chcemy uporządkować elementy innymi znakami, w znaczniku ol należy dodać:
- type="A" lub type="a", aby zastąpić numerację literami alfabetu (odpowiednio dużymi i małymi);
- type=”I” lub type=”i”, gdy chcemy posłużyć się cyframi rzymskimi.
Listy numerowane HTML warto wykorzystywać przede wszystkim, gdy kolejność informacji ma znaczenie. Z drugiej strony wielu copywriterów stosuje je także, gdy wcale nie jest ona istotna… co też nie jest błędem. Zwłaszcza w przypadku dłuższych list numeracja może pomóc czytelnikowi zorientować się, na jakim etapie lektury treści się znajduje.
Nieuporządkowane listy HTML
Przeciwieństwem listy uporządkowanej są tzw. punktory HTML — czyli nasze ulubione bullet pointy. Taka lista w HTML oznaczona jest znacznikami:
<ul><ul/>i może wyglądać tak:
Tak jak poprzednio, lista punktowana HTML wymaga zdefiniowania każdego elementu znacznikami li i /li.
Z naszych obserwacji listy punktowe HTML wykorzystuje się częściej niż numerowane. Nie narzucają one hierarchii elementów listy, a jednak pozwalają bardzo skutecznie podkreślić ważne fragmenty tekstu i sprawiają, że treść strony nie „tłoczy się” w trudniejszych do przeskanowania wzrokiem akapitach. A to bardzo ważne, jeśli chodzi o wrażenia użytkownika!
Czy (i jak) listy HTML wpływają na SEO?
Od dawna w świecie SEO istnieje przekonanie, że algorytmy wyszukiwarek bardzo „lubią” listy w HTML i przychylniej oceniają strony internetowe, które mają je w swoich treściach. A czy naprawdę tak jest?
Według Gary’ego Illyesa, analityka Google… niekoniecznie. W jednym z odcinków podcastu Search Off the Record prowadzonego wraz z Johnem Muellerem przyznał, że:
„[...] choć wiele osób jest przekonanych, że struktura HTML stron jest szalenie istotna dla ich pozycji w rankingu — w rzeczywistości nie ma wcale aż takiego znaczenia. Gdyby każda strona miała idealną strukturę, internet stałby się bardzo nudnym miejscem”.
Takie wyjaśnienie ma dużo sensu. Z perspektywy SEO, gdyby każda lista HTML miała bezpośredni wpływ na pozycję rankingowe, można byłoby się spodziewać wielu nadużyć ze strony twórców treści, co Google pewnie szybko by ukróciło.
Ale spójrzmy na to z innej perspektywy. Wiemy, że sama struktura HTML jest bardzo ważna dla robotów wyszukiwarek pod kątem semantycznego rozumienia tekstów na stronach WWW. Algorytmy uwzględniają formatowanie nagłówków, tabel czy właśnie list HTML przy analizie tego, jakie znaczenie mają treści w szerszym kontekście. A przecież od tego, w jaki sposób algorytm zrozumie treść zależy to, czy w ogóle zostanie ona wzięta pod uwagę przy generowaniu wyników wyszukiwania dla danego zapytania. Zwykła lista punktowa HTML może mieć więc pośredni wpływ na widoczność witryny, na podobnej zasadzie jak np. mapa strony.
Jednak to nie wszystko. Czy wiesz, ile średnio wszystkich kliknięć dla wyszukiwanych fraz generują tzw. featured snippets? Według Ahrefs — około 9%. A jednymi z najczęściej wyświetlanych przez Google typów snippetów są… właśnie listy (uporządkowane lub nie).
To, według jakich konkretnie kryteriów algorytm wybiera adresy URL do featured snippets, jest bardziej skomplikowane, ale obecność listy HTML w przypadku niektórych tematów na pewno może pomóc.
Na koniec, najważniejsza rzecz. Jeśli jest powód, dla którego na szczyt wyników wyszukiwań częściej trafiają strony z listami HTML — jest nim to, że użytkownicy… po prostu lubią czytać tak podane treści. Ponieważ listy:
- wyróżniają się na tle reszty tekstu i stanowią dobry punkt odniesienia;
- podkreślają najważniejsze informacje;
- są łatwe do przeskanowania;
- prowadzą czytelnika krok po kroku przez dane zagadnienie.
Czytelnicy chętniej zostają na stronach, które dobrze wykorzystują ten sposób formatowania. Spędzają na nich więcej czasu, częściej wchodzą „w głąb” witryny przez linkowanie wewnętrzne, nie szukają później odpowiedzi na swoje pytania na innych stronach. Dla Google to sygnał, że doświadczenia użytkowników witryny są pozytywne — więc może warto ją nagrodzić wyższą pozycją? ;)
Jak optymalizować treść listy pod kątem czytelności i SEO?
Dobrze wykorzystana lista numerowana HTML może pozytywnie wpłynąć na to, jak Twoją stronę ocenią czytelnicy i, do pewnego stopnia, algorytmy wyszukiwarek. Ale właśnie — musi być zrobiona z głową. Nie możesz po prostu rozbić dłuższego akapitu na kilka punktorów!
Oto nasze wskazówki:
- Pisz krótko i zwięźle — po to właśnie są listy.
- Trzymaj się jednego tematu. Jeśli piszesz o plusach jakiegoś rozwiązania, na wady poświęć odrębną listę.
- Nie bój się pogrubień; to dodatkowy element, który ułatwi skanowanie tekstu wzrokiem.
- Dodaj odstępy między punktami. „Ściśnięte” bullet pointy są bardzo nieczytelne.
- Podobnie jak nagłówki, listy są bardzo dobrym miejscem, aby umieścić w nich trudniejsze do odmiany słowa kluczowe.
- Jeśli treść listy odwołuje się do innych stron na Twojej witrynie — śmiało możesz dodawać też linki wewnętrzne.
- Pamiętaj o możliwościach CSS-a! Na przykład za pomocą list-style-image możesz dodawać własne ikony zamiast punktorów; pomyśl też, czy nie warto wyróżnić listy innym kolorem tła lub odrębną czcionką.
Podsumowanie — listy HTML i punktory
Czy listy HTML są tak samo ważne dla SEO Twojej witryny jak optymalizacja kodu strony pod kątem szybkości ładowania czy odpowiednie nasycenie słowami kluczowymi? Raczej nie. Ale witryny, które mądrze z nich korzystają, często oferują lepsze doświadczenia użytkownika. A to prosta droga do wzrostu zarówno widoczności w Google, jak i konwersji.
Zapisz się do darmowego newslettera
Zyskaj dodatkową wiedzę o SEO, marketingu i technologiach.
