Pami\u0119tasz czasy, gdy strony internetowe by\u0142y pisane w tabelkach i zalewane tagami Znasz to? Otwierasz stron\u0119 produktu i widzisz: Drugi grzech to wszechobecny Trzeci problem to dost\u0119pno\u015b\u0107. W e-commerce cz\u0119sto mamy dynamicznie \u0142adowane tre\u015bci: filtry, karuzele, modale. Bez odpowiednich atrybut\u00f3w ARIA, u\u017cytkownicy czytnik\u00f3w ekranu s\u0105 wykluczeni. Ale to nie tylko kwestia etyki \u2013 to tak\u017ce SEO. Google wykorzystuje informacje z ARIA do lepszego zrozumienia interakcji. Np. filtr po rozmiarze powinien mie\u0107 Po pierwsze: audyt semantyczny. U\u017cyj narz\u0119dzi takich jak WAVE, Lighthouse lub Axe \u2013 sprawdz\u0105 dost\u0119pno\u015b\u0107 i semantyk\u0119. Po drugie: przeszkol zesp\u00f3\u0142 frontendowy. Wiele b\u0142\u0119d\u00f3w bierze si\u0119 z niewiedzy. Ustal regu\u0142y: ka\u017cda strona musi mie\u0107 jedno Semantyczny HTML to nie moda \u2013 to fundament. Kosztuje niewiele (cz\u0119sto tylko zmian\u0119 tag\u00f3w), a przynosi realne korzy\u015bci: lepsze SEO, wy\u017csz\u0105 dost\u0119pno\u015b\u0107 i szybsze indeksowanie. W JurskiTech podczas audyt\u00f3w technicznych zawsze zaczynamy od struktury HTML. Bo je\u015bli fundament jest chybiony, ca\u0142y budynek si\u0119 chwieje. Nie pozw\u00f3l, by Tw\u00f3j e-commerce traci\u0142 klient\u00f3w przez funkcj\u0119, kt\u00f3ra jest za darmo \u2013 semantyk\u0119. Sprawd\u017a sw\u00f3j kod dzi\u015b, zanim zrobi to Google za Ciebie.<\/p>\n Artyku\u0142 powsta\u0142 we wsp\u00f3\u0142pracy z zespo\u0142em JurskiTech.pl \u2013 specjalizujemy si\u0119 w technicznym SEO i optymalizacji e-commerce.<\/p>\n","protected":false},"excerpt":{"rendered":" Wprowadzenie Pami\u0119tasz czasy, gdy strony internetowe by\u0142y pisane w tabelkach i zalewane tagami <font>? Dzisiaj nikt by tego nie zaakceptowa\u0142. Ale paradoks polega na tym, \u017ce wiele nowoczesnych sklep\u00f3w e-commerce wci\u0105\u017c produkuje kod, kt\u00f3ry pod wzgl\u0119dem semantyki jest r\u00f3wnie z\u0142y \u2013 tylko w eleganckiej oprawie. Semantyczny HTML to nie fanaberia frontendowc\u00f3w. To fundament, na kt\u00f3rym<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[776,850,913,431,914],"class_list":["post-2394","post","type-post","status-publish","format-standard","hentry","category-warto-wiedziec","tag-ai-e-commerce","tag-ai-seo","tag-html","tag-optymalizacja-wydajnosci","tag-semantyka"],"_links":{"self":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/comments?post=2394"}],"version-history":[{"count":0,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2394\/revisions"}],"wp:attachment":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/media?parent=2394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/categories?post=2394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/tags?post=2394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<font><\/code>? Dzisiaj nikt by tego nie zaakceptowa\u0142. Ale paradoks polega na tym, \u017ce wiele nowoczesnych sklep\u00f3w e-commerce wci\u0105\u017c produkuje kod, kt\u00f3ry pod wzgl\u0119dem semantyki jest r\u00f3wnie z\u0142y \u2013 tylko w eleganckiej oprawie. Semantyczny HTML to nie fanaberia frontendowc\u00f3w. To fundament, na kt\u00f3rym opiera si\u0119 SEO, dost\u0119pno\u015b\u0107 (a11y) i wydajno\u015b\u0107 indeksowania przez Google. A jednak w praktyce widz\u0119, jak nawet du\u017ce platformy trac\u0105 konwersje i pozycje w wynikach wyszukiwania przez podstawowe b\u0142\u0119dy strukturalne. Przyjrzyjmy si\u0119 trzem najcz\u0119stszym.<\/p>\nB\u0142\u0105d 1: Zagnie\u017cd\u017canie nag\u0142\u00f3wk\u00f3w bez logiki \u2013 profil klienta tonie w
<h3><\/code><\/h2>\n<h1><\/code> to nazwa produktu, <h2><\/code> to cena, <h3><\/code> to opis, potem znowu <h2><\/code> dla sekcji recenzji i wewn\u0105trz <h3><\/code> dla pojedynczej recenzji. Na pierwszy rzut oka wygl\u0105da poprawnie. Ale problem pojawia si\u0119, gdy masz du\u017co tre\u015bci dynamicznych \u2013 na przyk\u0142ad varianty produktu, sekcje powi\u0105zane, czy artyku\u0142y bloga wrzucone w stopk\u0119. Wtedy hierarchia cz\u0119sto wygl\u0105da tak: <h1><\/code> \u2192 <h2><\/code> \u2192 <h3><\/code> \u2192 <h2><\/code> \u2192 <h4><\/code> \u2013 i nagle <h3><\/code> pojawia si\u0119 bez <h2><\/code> wy\u017cej. To dla robot\u00f3w Google sygna\u0142, \u017ce strona jest chaotyczna. A dla u\u017cytkownik\u00f3w czytnik\u00f3w ekranu to koszmar: tracisz kontekst. Znam przypadek klienta, kt\u00f3ry przez dwa lata mia\u0142 wszystkie sekcje \u201erecenzje\u201d, \u201edostawa\u201d, \u201ezwroty\u201d oznaczone jako <h2><\/code> \u2013 i to dzia\u0142a\u0142o. Ale gdy dodano sekcj\u0119 \u201epodobne produkty\u201d jako <h3><\/code> pod <h2><\/code> recenzje, roboty przesta\u0142y widzie\u0107 logik\u0119. Co z tego, \u017ce strona wygl\u0105da\u0142a \u015bwietnie? Google obni\u017cy\u0142 pozycj\u0119 dla frazy \u201eczerwone buty do biegania\u201d o 3 strony. Wystarczy\u0142o zmieni\u0107 struktur\u0119 na <h1><\/code> (tytu\u0142), <h2><\/code> (cena), <h2><\/code> (opis), <h2><\/code> (recenzje), <h2><\/code> (podobne) \u2013 i ruch wr\u00f3ci\u0142.<\/p>\nB\u0142\u0105d 2: Brak odpowiednich znacznik\u00f3w dla sekcji \u2013
<div><\/code> wszystko pogrzebie<\/h2>\n<div><\/code>. Wiem, \u017ce to wygodne \u2013 zw\u0142aszcza w frameworkach jak React, gdzie wszystko jest komponentem. Ale <div><\/code> nie m\u00f3wi przegl\u0105darce ani robotowi nic o znaczeniu tre\u015bci. <nav><\/code>, <main><\/code>, <article><\/code>, <section><\/code>, <aside><\/code>, <header><\/code>, <footer><\/code> \u2013 to s\u0105 znaczniki semantyczne, kt\u00f3re daj\u0105 kontekst. Na przyk\u0142ad <article><\/code> powinien oznacza\u0107 samodzieln\u0105 jednostk\u0119 tre\u015bci, np. wpis na blogu lub kart\u0119 produktu. <section><\/code> logiczn\u0105 cz\u0119\u015b\u0107 strony. Tymczasem widz\u0119 sklepy, gdzie lista produkt\u00f3w to <div class=\"products\"><\/code>, ka\u017cdy produkt to <div class=\"product-card\"><\/code>, a przycisk \u201eDodaj do koszyka\u201d to <div><\/code>. Efekt? Google nie wie, gdzie jest nawigacja, gdzie jest g\u0142\u00f3wna tre\u015b\u0107, a gdzie s\u0105 reklamy. W jednym z audyt\u00f3w dla \u015bredniej wielko\u015bci sklepu odzie\u017cowego okaza\u0142o si\u0119, \u017ce ca\u0142y szablon kategorii by\u0142 zbudowany z <div><\/code> \u2013 \u0142\u0105cznie z paginacj\u0105. Po zmianie <div class=\"pagination\"><\/code> na <nav aria-label=\"Paginacja\"><\/code> i dodaniu <main><\/code> z <h1><\/code>, indeksacja stron kategorii przyspieszy\u0142a o 40%. Nie dlatego, \u017ce Google nagle polubi\u0142 ten sklep \u2013 po prostu zrozumia\u0142 jego struktur\u0119.<\/p>\nB\u0142\u0105d 3: Pomijanie
aria-label<\/code> i aria-labelledby<\/code> dla element\u00f3w dynamicznych<\/h2>\nrole=\"group\"<\/code> i aria-label=\"Filtr rozmiaru\"<\/code>. Przycisk \u201eDodaj do koszyka\u201d po dodaniu produktu powinien mie\u0107 aria-live=\"polite\"<\/code>, aby czytnik og\u0142osi\u0142 zmian\u0119. Widzia\u0142em sklep, gdzie karuzela produkt\u00f3w by\u0142a zwyk\u0142ym <div><\/code> z JS-em przewijaj\u0105cym. Dla robota ta karuzela nie istnia\u0142a \u2013 wszystkie produkty by\u0142y widoczne naraz, ale indeksowane jako jeden blok. Po dodaniu role=\"list\"<\/code> i aria-label=\"Polecane produkty\"<\/code> oraz odpowiednim aria-hidden<\/code> dla nieaktywnych slajd\u00f3w, liczba zaindeksowanych produkt\u00f3w wzros\u0142a o 15%.<\/p>\nJak to naprawi\u0107? Praktyczne kroki<\/h2>\n
<h1><\/code>, hierarchi\u0119 nag\u0142\u00f3wk\u00f3w bez przeskok\u00f3w, a kluczowe sekcje musz\u0105 u\u017cywa\u0107 znacznik\u00f3w semantycznych. Po trzecie: testuj z czytnikiem ekranu \u2013 cho\u0107by przez chwil\u0119. Usi\u0105d\u017a i pos\u0142uchaj, jak czytana jest Twoja strona. Je\u015bli s\u0142yszysz \u201ediv, div, div, div\u201d \u2013 masz problem.<\/p>\nPodsumowanie<\/h2>\n