Czytelność dla agenta

Pierwszy filar agent-readiness: zdolność strony do bycia odczytaną przez agenta AI bez renderowania JavaScript — obejmuje semantyczny HTML, hierarchię nagłówków i dostępność treści w czystym HTML.

W Polsce nazywane też:

agent readabilityodczytywalność stronyHTML readabilityfilar czytelności

Seria sześciu filarów agent-readiness zaczyna się tutaj. Nie dlatego że czytelność jest najciekawsza — dlatego że bez niej reszta nie ma sensu. Agent który nie może odczytać strony nie skorzysta z danych strukturalnych na niej umieszczonych. Nie wykona akcji przez formularz. Nie zacytuje treści w odpowiedzi użytkownikowi. Każda kolejna warstwa zakłada że ta działa.

Czytelność jest fundamentem. I jest też tą warstwą która — na szczęście — jest najbliżej tego co dobry webmaster robił od lat.

Czym jest czytelność dla agenta

Filar 1 to zdolność strony do bycia odczytaną przez agenta AI bez renderowania JavaScript — obejmuje semantyczny HTML, hierarchię nagłówków i dostępność treści w czystym HTML.

Trzy słowa w tej definicji są kluczowe: bez renderowania JavaScript.

Człowiek otwiera stronę w przeglądarce. Przeglądarka pobiera HTML, uruchamia JavaScript, renderuje DOM, wyświetla efekt końcowy. Człowiek widzi gotową stronę. Agent często pomija środkowy krok — pracuje na surowym HTML zanim JavaScript zdąży cokolwiek zbudować. Jeśli treść strony istnieje tylko po wykonaniu JavaScript — agent widzi pustą stronę albo szkielet bez zawartości.

Najprostszy test: wyłącz JavaScript w przeglądarce i odśwież stronę. To co widzisz — widzi agent.

Trzy elementy czytelności

Pierwsza warstwa to dostępność treści w czystym HTML. Treść musi być w HTML, nie budowana dynamicznie przez JavaScript. Dotyczy to szczególnie stron opartych na frameworkach frontendowych — React, Vue, Next.js — gdzie cała zawartość może być renderowana po stronie klienta. Dla WordPressa i Divi problem zwykle nie istnieje, bo treść trafia do HTML natywnie. Ale każdy element oparty na JavaScript — lazy load, dynamiczne sekcje, treści ładowane po scrollu — warto sprawdzić.

Druga warstwa to semantyczny HTML. Agent nie widzi layoutu. Nie wie że ten duży tekst po lewej to nagłówek strony a ta kolumna po prawej to sidebar. Wie to tylko jeśli HTML mu o tym mówi — przez znaczniki <main>, <article>, <nav>, <header>, <footer> zamiast generycznych <div> bez znaczenia. Semantyczny HTML to instrukcja obsługi strony dla każdego systemu który nie ma oczu. Agent rozumie go dosłownie.

Trzecia warstwa to hierarchia nagłówków. Jeden <h1> na stronie — tytuł. Potem <h2> dla głównych sekcji. <h3> dla podsekcji. Bez przeskoków z <h1> na <h4>. Bez kilku <h1> na stronie bo „ładniej wygląda w projekcie”. Agent który przetwarza artykuł używa nagłówków jak spisu treści — wie że po <h2> pojawią się informacje o danym temacie, wie że <h3> to uszczegółowienie. Hierarchia bez sensu to mapa której nie da się czytać.

Czytelność a dostępność — nie przypadkowe podobieństwo

Praca nad Filarem 1 to w dużej mierze ta sama praca co praca nad dostępnością stron dla osób korzystających z czytników ekranowych. Czytnik ekranowy — podobnie jak agent — nie widzi layoutu, pracuje na HTML, porusza się po hierarchii nagłówków, rozumie semantyczne tagi i potrzebuje sensownych opisów alternatywnych dla obrazów.

To nie jest przypadek. Oba systemy — czytnik ekranowy i agent AI — potrzebują tego samego: strony która mówi co znaczy, nie tylko jak wygląda.

Jeśli strona przeszła kiedyś audyt dostępności i wypadła dobrze — Filar 1 jest prawdopodobnie w dobrym stanie. Jeśli nie — to jest punkt wyjścia.

Co sprawdzić w praktyce

Checklista Filaru 1 z artykułu na Webflux.pl daje konkretne punkty weryfikacji. Wyłączyć JavaScript i sprawdzić czy treść jest widoczna — to można zrobić w DevTools przeglądarki w trzydzieści sekund. Sprawdzić hierarchię nagłówków przez rozszerzenie HeadingsMap albo zakładkę Accessibility w DevTools — outline nagłówków powinien wyglądać jak spis treści, nie jak losowy zestaw poziomów. Przejrzeć czy strona używa semantycznych tagów zamiast samych <div> — w DevTools widać to w widoku Elements. Sprawdzić czy obrazy mają atrybuty alt które coś znaczą — „zdjęcie produktu” jest informacją, pusty alt albo nazwa pliku z aparatu informacją nie jest. Sprawdzić czy linki mają sensowne anchory — „czytaj więcej” nic nie mówi agentowi, „czytaj więcej o agent-readiness” mówi wszystko.

Każdy z tych punktów można sprawdzić bez żadnych płatnych narzędzi, w jeden wieczór.

Znak że ta warstwa działa

Strona z wyłączonym JavaScript pokazuje całą treść. Outline nagłówków wygląda jak spis treści artykułu. Tagi semantyczne są użyte tam gdzie powinna być semantyka. Obrazy mają opisy które coś znaczą. Linki mają anchory które mówią dokąd prowadzą.

Jeśli tak wygląda Filar 1 — wszystkie kolejne warstwy agent-readiness mają na czym stać.


Pełna checklista Filaru 1 wraz z pozostałymi pięcioma filarami dostępna jest w artykule na Webflux.pl: Sześć filarów agent-readiness — praktyczna checklista dla twojej strony