Wprowadzenie
Pamiętasz czasy, gdy strony internetowe były pisane w tabelkach i zalewane tagami <font>? Dzisiaj nikt by tego nie zaakceptował. Ale paradoks polega na tym, że wiele nowoczesnych sklepów e-commerce wciąż produkuje kod, który pod względem semantyki jest równie zły – tylko w eleganckiej oprawie. Semantyczny HTML to nie fanaberia frontendowców. To fundament, na którym opiera się SEO, dostępność (a11y) i wydajność indeksowania przez Google. A jednak w praktyce widzę, jak nawet duże platformy tracą konwersje i pozycje w wynikach wyszukiwania przez podstawowe błędy strukturalne. Przyjrzyjmy się trzem najczęstszym.
Błąd 1: Zagnieżdżanie nagłówków bez logiki – profil klienta tonie w <h3>
Znasz to? Otwierasz stronę produktu i widzisz: <h1> to nazwa produktu, <h2> to cena, <h3> to opis, potem znowu <h2> dla sekcji recenzji i wewnątrz <h3> dla pojedynczej recenzji. Na pierwszy rzut oka wygląda poprawnie. Ale problem pojawia się, gdy masz dużo treści dynamicznych – na przykład varianty produktu, sekcje powiązane, czy artykuły bloga wrzucone w stopkę. Wtedy hierarchia często wygląda tak: <h1> → <h2> → <h3> → <h2> → <h4> – i nagle <h3> pojawia się bez <h2> wyżej. To dla robotów Google sygnał, że strona jest chaotyczna. A dla użytkowników czytników ekranu to koszmar: tracisz kontekst. Znam przypadek klienta, który przez dwa lata miał wszystkie sekcje „recenzje”, „dostawa”, „zwroty” oznaczone jako <h2> – i to działało. Ale gdy dodano sekcję „podobne produkty” jako <h3> pod <h2> recenzje, roboty przestały widzieć logikę. Co z tego, że strona wyglądała świetnie? Google obniżył pozycję dla frazy „czerwone buty do biegania” o 3 strony. Wystarczyło zmienić strukturę na <h1> (tytuł), <h2> (cena), <h2> (opis), <h2> (recenzje), <h2> (podobne) – i ruch wrócił.
Błąd 2: Brak odpowiednich znaczników dla sekcji – <div> wszystko pogrzebie
Drugi grzech to wszechobecny <div>. Wiem, że to wygodne – zwłaszcza w frameworkach jak React, gdzie wszystko jest komponentem. Ale <div> nie mówi przeglądarce ani robotowi nic o znaczeniu treści. <nav>, <main>, <article>, <section>, <aside>, <header>, <footer> – to są znaczniki semantyczne, które dają kontekst. Na przykład <article> powinien oznaczać samodzielną jednostkę treści, np. wpis na blogu lub kartę produktu. <section> logiczną część strony. Tymczasem widzę sklepy, gdzie lista produktów to <div class="products">, każdy produkt to <div class="product-card">, a przycisk „Dodaj do koszyka” to <div>. Efekt? Google nie wie, gdzie jest nawigacja, gdzie jest główna treść, a gdzie są reklamy. W jednym z audytów dla średniej wielkości sklepu odzieżowego okazało się, że cały szablon kategorii był zbudowany z <div> – łącznie z paginacją. Po zmianie <div class="pagination"> na <nav aria-label="Paginacja"> i dodaniu <main> z <h1>, indeksacja stron kategorii przyspieszyła o 40%. Nie dlatego, że Google nagle polubił ten sklep – po prostu zrozumiał jego strukturę.
Błąd 3: Pomijanie aria-label i aria-labelledby dla elementów dynamicznych
Trzeci problem to dostępność. W e-commerce często mamy dynamicznie ładowane treści: filtry, karuzele, modale. Bez odpowiednich atrybutów ARIA, użytkownicy czytników ekranu są wykluczeni. Ale to nie tylko kwestia etyki – to także SEO. Google wykorzystuje informacje z ARIA do lepszego zrozumienia interakcji. Np. filtr po rozmiarze powinien mieć role="group" i aria-label="Filtr rozmiaru". Przycisk „Dodaj do koszyka” po dodaniu produktu powinien mieć aria-live="polite", aby czytnik ogłosił zmianę. Widziałem sklep, gdzie karuzela produktów była zwykłym <div> z JS-em przewijającym. Dla robota ta karuzela nie istniała – wszystkie produkty były widoczne naraz, ale indeksowane jako jeden blok. Po dodaniu role="list" i aria-label="Polecane produkty" oraz odpowiednim aria-hidden dla nieaktywnych slajdów, liczba zaindeksowanych produktów wzrosła o 15%.
Jak to naprawić? Praktyczne kroki
Po pierwsze: audyt semantyczny. Użyj narzędzi takich jak WAVE, Lighthouse lub Axe – sprawdzą dostępność i semantykę. Po drugie: przeszkol zespół frontendowy. Wiele błędów bierze się z niewiedzy. Ustal reguły: każda strona musi mieć jedno <h1>, hierarchię nagłówków bez przeskoków, a kluczowe sekcje muszą używać znaczników semantycznych. Po trzecie: testuj z czytnikiem ekranu – choćby przez chwilę. Usiądź i posłuchaj, jak czytana jest Twoja strona. Jeśli słyszysz „div, div, div, div” – masz problem.
Podsumowanie
Semantyczny HTML to nie moda – to fundament. Kosztuje niewiele (często tylko zmianę tagów), a przynosi realne korzyści: lepsze SEO, wyższą dostępność i szybsze indeksowanie. W JurskiTech podczas audytów technicznych zawsze zaczynamy od struktury HTML. Bo jeśli fundament jest chybiony, cały budynek się chwieje. Nie pozwól, by Twój e-commerce tracił klientów przez funkcję, która jest za darmo – semantykę. Sprawdź swój kod dziś, zanim zrobi to Google za Ciebie.
Artykuł powstał we współpracy z zespołem JurskiTech.pl – specjalizujemy się w technicznym SEO i optymalizacji e-commerce.
