Tekst alternatywny

TL;DR — Tekst alternatywny to krótki zastępnik, który dodajesz do obrazu, aby osoby, które go nie widzą — oraz wyszukiwarki — wiedziały, do czego służy. Dodajesz go za pomocą atrybutu alt na elemencie <img>. To jeden z elementów dostępności (nie gwarancja pełnej zgodności sam w sobie) i pomaga Twoim obrazom pojawiać się w wyszukiwarce grafiki. Opisz, co obraz robi na tej stronie, a nie tylko, co przedstawia; nie upychaj słów kluczowych; używaj pustego alt="" dla obrazów czysto dekoracyjnych; a w przypadku przycisków z ikonami i obrazów z linkami opisz działanie lub cel.

Czym jest tekst alternatywny

Gdy umieszczasz obraz na stronie internetowej, kod wygląda tak:

<img src="dalmatian-puppy.jpg" alt="Dalmatian puppy playing fetch in a park">

Ta część alt="..." to tekst alternatywny — skrót od alternative text. To pisemny zastępnik obrazu: krótki opis tego, co obraz pokazuje lub robi. Jeśli obraz nie może być widoczny, tekst alternatywny jest używany w jego miejsce.

Często usłyszysz, że ludzie nazywają to „alt tagiem”. To popularna nazwa, ale nie jest do końca poprawna — <img> to tag, a alt to atrybut na nim. Będę używać „tekstu alternatywnego” i „atrybutu alt”, ale jeśli powiesz „alt tag”, wszyscy będą wiedzieć, o co chodzi.

Dobry tekst alternatywny to nie stały szablon opisu — jest dobierany do tego, co obraz robi na danej stronie, a nie tylko do tego, co widać na nim. To samo zdjęcie może wymagać innego tekstu alternatywnego (lub żadnego) w innym miejscu, w zależności od tego, co ma przekazać i co już mówi otaczający tekst.

Dlaczego to ważne

Tekst alternatywny robi dwie ważne rzeczy:

• Dostępność. Osoby niewidome lub słabowidzące używają czytników ekranu, które czytają strony na głos. Gdy czytnik ekranu natrafi na obraz, czyta tekst alternatywny. Bez tekstu alternatywnego nie otrzymują nic użytecznego — albo co gorsza, czytnik ogłasza nazwę pliku obrazu. To nie jest tylko miły dodatek: brak tekstu alternatywnego to jedna z najczęstszych rzeczy wskazywanych w pozwach dotyczących dostępności stron internetowych.
• SEO obrazów. Wyszukiwarki nie „widzą” obrazu tak jak Ty. Tekst alternatywny to główny sposób, w jaki mówisz Google i Bingowi, o czym jest obraz, co pomaga Twoim obrazom pojawiać się w wyszukiwarce grafiki.

Jak pisać dobry tekst alternatywny

Kilka prostych zasad:

• Opisz, co faktycznie jest na obrazie, w kontekście Twojej strony. „Dalmatyńczyk bawiący się w aportowanie w parku” jest świetne. „piesek, szczeniaczek, pieski i doggies” to upychanie słów kluczowych — nie rób tego.
• Nie zaczynaj od „Obraz” lub „Zdjęcie”. Wyszukiwarki i czytniki ekranu już wiedzą, że to obraz. Po prostu go opisz.
• Trzymaj się krótko. Fraza lub zdanie. Nie potrzebujesz akapitu.
• W przypadku obrazów dekoracyjnych użyj pustego alt="". Jeśli obraz to tylko linia oddzielająca lub ozdobnik, który nic nie wnosi, nadaj mu alt="" (z niczym między cudzysłowami). To mówi czytnikom ekranu, aby go pominęły. Nie pomijaj całkowicie atrybutu alt — to właściwie gorsze. Test: jeśli obraz nie dodaje żadnych informacji poza tym, co strona już mówi gdzie indziej, jest dekoracyjny.
• W przypadku przycisków i kontrolek tylko z ikoną opisz działanie, nie ikonę. Przycisk wyszukiwania z ikoną lupy powinien mieć alt="Search", a nie alt="Magnifying glass" — osoba musi wiedzieć, co się stanie, gdy go aktywuje.

Rzecz, którą większość ludzi myli

Tekst alternatywny pomaga głównie w wyszukiwarce grafiki, a nie w zwykłych rankingach wyszukiwania w sieci. Wiele przewodników sugeruje, że dodanie tekstu alternatywnego do obrazów podniesie pozycję Twojej strony w normalnych wynikach wyszukiwania. To tak nie działa — John Mueller z Google mówił to wiele razy. Tekst alternatywny pomaga Twoim obrazom być znajdowanym w wyszukiwarce grafiki i dodaje trochę tekstu do strony, ale to nie magiczna dźwignia rankingowa dla wyszukiwania w sieci.

Chcesz dokładną wersję — dokładne cytaty z Google, rozróżnienie wyszukiwarka grafiki a wyszukiwarka w sieci, obrazy dekoracyjne, obrazy z linkami i jak znaleźć brakujący tekst alternatywny na dużą skalę? Przełącz się na zakładkę Zaawansowane.

TL;DR — Tekst alternatywny to wartość atrybutu alt w elemencie <img> — wymagany przez HTML, konieczność dla dostępności i najważniejszy element metadanych obrazu dla wyszukiwania. Niuanse, które większość przewodników myli: wpływa on głównie na wyszukiwanie obrazów, a nie na rankingi w wyszukiwarce internetowej (Mueller, wielokrotnie). Google czyta go wraz z wizją komputerową i kontekstem strony, więc pisz pod kontekst, a nie goły opis. Nie upychaj słów kluczowych, nie zaczynaj od „obrazek przedstawia” i używaj alt="" (nie brakującego atrybutu) dla obrazów dekoracyjnych. Na obrazie z linkiem tekst alternatywny działa jako tekst kotwicy. Google nie ma limitu znaków; 155 znaków to wskazówka pisarska. Brak tekstu alternatywnego to najczęstszy problem techniczny w sieci — 80,4 % witryn ma co najmniej jeden.

Czym właściwie jest tekst alternatywny

Tekst alternatywny to wartość atrybutu alt w elemencie HTML <img>:

<img src="dalmatian-puppy.jpg" alt="Dalmatian puppy playing fetch">

To krótki tekstowy substytut obrazu — dla użytkowników czytników ekranu, dla robotów indeksujących i dla przeglądarek, w których obraz jest wyłączony lub nie ładuje się. Jedna uwaga terminologiczna, którą warto dobrze zrozumieć: często nazywa się go „tagiem alt”, ale to błędne określenie. Tag to <img>; alt to atrybut tego taga. Ta nazwa jest tak zakorzeniona, że nie będę z nią walczyć, ale precyzyjny termin to atrybut alt, a tekst w nim zawarty to tekst alternatywny.

Atrybut alt jest wymagany w elementach <img> zgodnie ze specyfikacją HTML. Całkowite jego pominięcie to błąd zgodności. Pusta wartość (alt="") jest poprawna i ma znaczenie — to właściwy sposób oznaczania obrazu dekoracyjnego (więcej o tym poniżej).

Wybór tego, co napisać, nie polega na przejściu przez uniwersalny przepis na opis. Właściwy tekst alternatywny zależy od przeznaczenia obrazu w tym konkretnym miejscu na stronie — a nie od dosłownego spisu tego, co jest w kadrze. Ten sam obraz może w uzasadniony sposób wymagać innego tekstu alternatywnego (lub pustego) w zależności od tego, gdzie się znajduje i co już przekazuje otaczająca treść; nie ma jednego „poprawnego” opisu niezależnego od kontekstu.

Tekst alternatywny ma dwa osobne zadania SEO — a jedno z nich jest przeceniane

To rozróżnienie, które większość przewodników „tekst alternatywny dla SEO” zaciera, i to tutaj jest prawdziwa wartość tej strony. Tekst alternatywny robi dwie różne rzeczy dla wyszukiwania:

1. Dodaje tekst do strony. Google liczy tekst alternatywny jako część tekstu na stronie. Mueller: „Tekst alternatywny jest zasadniczo wyświetlany, gdy obrazy są wyłączone w większości przeglądarek, więc to coś, co liczymy jako część tekstu na stronie.” To realne, ale niewielkie.

2. Sygnalizuje, o czym jest obraz — dla wyszukiwania obrazów. To główne zadanie. Własna dokumentacja Google nazywa tekst alternatywny “the most important attribute” (tłumaczenie) „najważniejszym atrybutem” do dostarczania metadanych obrazu, a Mueller opisuje jego wpływ jako dotyczący wyszukiwania obrazów: “if someone is searching in Google Images for something that kind of matches the alt text, then we can use that to understand that your image is relevant.” (tłumaczenie) „jeśli ktoś szuka w Google Images czegoś, co mniej więcej pasuje do tekstu alternatywnego, możemy to wykorzystać, aby zrozumieć, że Twój obraz jest istotny.”

Oto część, którą warto przyswoić: dodanie tekstu alternatywnego nie sprawia, że strona rankuje wyżej w wyszukiwarce internetowej tylko dlatego, że ma obrazy. Mueller ujął to wprost: „To nie jest tak, że powiedzielibyśmy, że tekstowa strona internetowa ma większą wartość, ponieważ ma obrazy. Po prostu widzimy tekst alternatywny i stosujemy go do obrazu, a jeśli ktoś szuka obrazu, możemy go użyć, aby lepiej zrozumieć obraz.”

Więc jeśli Twoim celem jest widoczność w wyszukiwarce obrazów (i ruch z poleceń, który to przynosi), tekst alternatywny ma duże znaczenie. Jeśli masz nadzieję, że sam tekst alternatywny podniesie Twoje rankingi w wynikach z niebieskimi linkami, używasz niewłaściwego narzędzia. To ten sam punkt, który poruszam w moim artykule o JavaScript SEO: dla wyszukiwania internetowego tekst alternatywny liczy się jako tekst na stronie, ale jego znaczenie jest często przeceniane — jego prawdziwa wartość to wyszukiwanie obrazów i dostępność.

To nie jedyny sygnał, którego używa Google

Tekst alternatywny nie jest czytany w próżni. Google: “Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image.” (tłumaczenie) „Google używa tekstu alternatywnego wraz z algorytmami wizji komputerowej i treścią strony, aby zrozumieć temat obrazu.” Wizja komputerowa już potrafi stwierdzić, że to plaża. Zadaniem tekstu alternatywnego jest to, czego model nie może wywnioskować — kontekst: dlaczego ten obraz znajduje się na tej stronie i co tutaj oznacza. Dlatego porada Muellera z 2024 roku trafia w sedno: AI, które generuje “photo of a beach” (tłumaczenie) „zdjęcie plaży”, technicznie opisuje piksele, ale marnuje okazję, ponieważ “the alt-text is unique in that it’s what directly connects the image to the page with context.” (tłumaczenie) „tekst alternatywny jest wyjątkowy, ponieważ to on bezpośrednio łączy obraz ze stroną za pomocą kontekstu.” To samo zdjęcie plaży może wymagać innego tekstu alternatywnego na stronie o surfingu, w ofercie nieruchomości czy w artykule o klimacie.

Dostępność — i stawka prawna

Zanim będzie atutem SEO, tekst alternatywny jest wymogiem dostępności. Kryterium sukcesu WCAG 2.x 1.1.1 (Treść nietekstowa), poziom A wymaga tekstowego odpowiednika dla treści nietekstowych. Użytkownicy czytników ekranu polegają na nim; bez niego obraz jest martwym punktem na stronie, a pominięty atrybut alt może sprawić, że niektóre czytniki ogłoszą surową nazwę pliku.

To jedno kryterium sukcesu spośród kilkudziesięciu. Prawidłowy tekst alternatywny spełnia kryterium 1.1.1 dla Twoich obrazów, ale sam w sobie nie ustanawia pełnej zgodności z WCAG — ani zgodności z ADA — dla strony czy witryny. Te zależą również od innych kryteriów (kontrast kolorów, dostępność klawiatury, etykiety formularzy, struktura nagłówków i inne). Traktuj tekst alternatywny jako niezbędny element dostępności, a nie całość.

To ma konsekwencje. Brakujące atrybuty alt są rutynowo przywoływane w pozwach dotyczących dostępności stron internetowych na podstawie ADA, których w USA składa się tysiące rocznie. Jak zauważam w moim przewodniku po JavaScript SEO, “missing alt attributes are an accessibility issue, which may turn into a legal issue.” (tłumaczenie) „brakujące atrybuty alt są problemem dostępności, który może przerodzić się w problem prawny.” To zmienia perspektywę: to działanie zgodnościowe w pierwszej kolejności, a SEO w drugiej. Dlatego też narzędzia do crawlowania SEO (w tym Ahrefs Site Audit) oznaczają braki atrybutów alt jako problemy techniczne.

Jak pisać tekst alternatywny, który działa

• Zacznij od kontekstu, nie od podpisu. Opisz, co obraz oznacza dla strony, a nie tylko to, co jest na nim wizualnie. Mueller o wyszukiwarce obrazów: “you don’t necessarily need to describe exactly what is in the image, but rather kind of like what this image means for your particular page.” (tłumaczenie) „nie musisz koniecznie dokładnie opisywać tego, co jest na obrazie, ale raczej to, co ten obraz oznacza dla Twojej konkretnej strony.”
• Nie zaczynaj od „Obraz” / „Zdjęcie”. Lizzi Sassman z Google: “We already are aware that it’s an image. You don’t need to say, ‘It’s an image of’ and then the thing.” (tłumaczenie) „Wiemy już, że to obraz; nie musisz mówić: „To jest obraz” przed opisem.” Fraza opisowa jest w porządku — nie musi być pełnym zdaniem.
• Używaj słów kluczowych naturalnie, nigdy nie upychaj. Google: “focus on creating useful, information-rich content that uses keywords appropriately and is in context.” (tłumaczenie) „skup się na tworzeniu użytecznych, bogatych w informacje treści, które odpowiednio wykorzystują słowa kluczowe i są w kontekście.” Oraz ostrzeżenie: “Avoid filling alt attributes with keywords… as it results in a negative user experience and may cause your site to be seen as spam.” (tłumaczenie) „Unikaj wypełniania atrybutów alt słowami kluczowymi… ponieważ prowadzi to do negatywnych doświadczeń użytkownika i może sprawić, że Twoja witryna zostanie uznana za spam.” Gary Illyes ujął to wprost: tekst alternatywny “shouldn’t be what you want to rank for, but what’s in the image.” (tłumaczenie) „nie powinien być tym, na co chcesz się pozycjonować, ale tym, co jest na obrazie.”
• Nie kopiuj otaczającego akapitu do tekstu alternatywnego. Mueller: “I wouldn’t just blindly copy and paste the same text that you already have on a page as an alt text.” (tłumaczenie) „Nie kopiowałbym ślepo i nie wklejał tego samego tekstu, który już masz na stronie, jako tekstu alternatywnego.” Atrybut alt to wyjątkowa okazja do dodania kontekstu, a nie duplikat.
• Google nie ma limitu znaków. Mueller: “we don’t have any guidelines with regards to how long your alt text can be.” (tłumaczenie) „nie mamy żadnych wytycznych co do tego, jak długi może być Twój tekst alternatywny.” Powszechnie przywoływane „125 znaków” pochodzi z narzędzi dostępności; przewodnik stylu developerskiego Google sugeruje 155 znaków lub mniej jako wskazówkę dotyczącą pisania, a nie twardy limit. Trzymaj go krótko, ponieważ długie opisy przerywają przepływ czytania użytkownikom czytników ekranu — nie dlatego, że Google go skraca.
• Używaj spójnego tekstu alternatywnego dla powtarzających się obrazów. Jeśli ten sam obraz pojawia się w wielu miejscach, nadaj mu ten sam tekst alternatywny.

Obrazy dekoracyjne: alt="", a nie brakujący alt

W przypadku obrazów czysto dekoracyjnych — odstępników, separatorów, ozdobników tła, które nie niosą żadnej informacji — poprawnym wzorcem jest pusty atrybut alt:

<img src="divider.svg" alt="">

alt="" informuje technologie asystujące, że obraz jest dekoracyjny i należy go pominąć. To nie to samo, co pozostawienie atrybutu bez wartości. Całkowite pominięcie alt jest naruszeniem specyfikacji HTML i może spowodować, że niektóre czytniki ekranu odczytają nazwę pliku na głos. Tak więc: obraz dekoracyjny otrzymuje alt="" (pusta wartość obecna), nigdy brakujący atrybut i nigdy opis. Jak ująłem to w moim przewodniku po JavaScript SEO — popraw alt dla głównych obrazów treści, ale w przypadku obrazów zastępczych lub dekoracyjnych możesz pozostawić alt pusty (czyli alt="").

Test na “dekoracyjność”: czy obraz dodaje informacje, których strona nie przekazuje już gdzie indziej — w otaczającym tekście, podpisie lub strukturze strony? Jeśli nie (odstępnik, powtarzana ikona obok tekstu, który już mówi to samo, zdjęcie stockowe użyte jako czysta wizualna wypełniaczka), jest dekoracyjny i otrzymuje alt="". Jeśli dodaje informacje, których nic innego na stronie nie zapewnia, nie jest dekoracyjny, bez względu na to, jak mały czy stylistyczny się wydaje.

Obrazy funkcjonalne: opisz działanie, nie ikonę

Niektóre obrazy nie są ani czysto dekoracyjne, ani prostym obrazem informacyjnym — są kontrolkami: przycisk wyszukiwania tylko z ikoną, ikona menu hamburger, przycisk odtwarzania na miniaturze wideo. Dla nich tekst alternatywny powinien opisywać co robi aktywacja kontrolki, a nie jak wygląda ikona.

<!-- Weak: describes the icon -->
<button><img src="magnifying-glass.svg" alt="Magnifying glass icon"></button>

<!-- Better: describes the action -->
<button><img src="magnifying-glass.svg" alt="Search"></button>

Użytkownik czytnika ekranu, który słyszy “ikona lupy”, nie wie, co się stanie, jeśli aktywuje kontrolkę; “Szukaj” mówi mu to natychmiast. To ta sama zasada, co w przypadku obrazów z linkami poniżej — tekst alternatywny służy funkcji obrazu na stronie — ale ma zastosowanie nawet wtedy, gdy nie ma <a>.

Obrazy z linkami: tekst alternatywny staje się tekstem kotwicy

Gdy obraz jest linkiem — owinięty w <a> — jego tekst alternatywny działa jako tekst kotwicy dla tego linku. Google: “Alt text in images is useful as anchor text if you decide to use an image as a link.” Obraz tylko z linkiem i pustym alt jest odpowiednikiem pustego tekstu kotwicy, co jest złe zarówno dla dostępności (czytnik ekranu nie może opisać miejsca docelowego), jak i dla sygnału linku. Dla obrazu z linkiem tekst alternatywny powinien opisywać, dokąd prowadzi link, a nie tylko co pokazuje obraz.

Doprecyzujmy zakres: to, co dokumentuje Google, dotyczy konkretnie używania tekstu alternatywnego jako tekstu kotwicy dla linku do przeszukania. To węższe niż pełne obliczenie “dostępnej nazwy”, którego używają przeglądarki i technologie asystujące, a które może również czerpać z aria-label, aria-labelledby lub otaczającego tekstu linku — tekst alternatywny jest jednym z elementów tego szerszego obliczenia, a nie całością.

SVG są inne

Wbudowane elementy <svg> nie przyjmują atrybutu alt — to dotyczy <img>. Aby nadać wbudowanemu SVG dostępną nazwę, użyj elementu <title> z odniesieniem przez aria-labelledby:

<svg role="img" aria-labelledby="logo-title">
  <title id="logo-title">Acme Corp logo</title>
  <!-- paths… -->
</svg>

(SVG odwoływane przez <img src="logo.svg"> używa normalnego atrybutu alt jak każdy inny obraz — to dotyczy tylko wbudowanego znacznika SVG.)

Wzorce anty-wzorcowe, których należy unikać

• Upychanie słów kluczowych — sygnał spamu, przed którym Google wyraźnie ostrzega.
• Kopiowanie otaczającego akapitu do atrybutu alt dosłownie.
• Rozpoczynanie od “Obraz” / “Zdjęcie” — zbędne.
• Pomijanie alt na obrazach dekoracyjnych zamiast używania alt="".
• Opisy generowane przez AI typu “zdjęcie X”, które ignorują kontekst strony.
• Umieszczanie nazwy firmy w pustych atrybutach alt. Mueller był w tej sprawie bezpośredni: “It makes no sense, it seems like a waste of time to me: once wasted time to implement, and again wasted time to clean up later on.” (tłumaczenie) „To nie ma sensu; samo wdrożenie i późniejsze porządki tylko zabierają czas.”
• Mylić alt z atrybutem title. Atrybut title pojawia się jako dymek po najechaniu; to nie jest tekst alternatywny i ma niewielkie znaczenie dla SEO czy dostępności.

Znajdowanie i naprawianie brakującego tekstu alternatywnego

Brakujące atrybuty alt nie są przypadkiem brzegowym — to domyślny stan awarii w sieci. W naszym badaniu audytu stron ponad miliona domen, 80,4 % witryn miało brakujące atrybuty alt na co najmniej jednej stronie, co czyni to najczęściej występującym problemem technicznego SEO, jaki znaleźliśmy.

Aby je znaleźć:

• Ahrefs Site Audit → Raport Obrazy flaguje obrazy bez atrybutów alt w całej witrynie. (Ahrefs Webmaster Tools daje to za darmo dla zweryfikowanych witryn.)
• Ręczne kontrole punktowe — sprawdź element na kluczowych obrazach treści lub użyj rozszerzenia przeglądarki do dostępności.

Kolejność priorytetów podczas naprawy:

1. Najpierw obrazy głównej treści — te, które niosą znaczenie i mogą zdobyć ruch z wyszukiwania obrazów.
2. Obrazy z linkami — pusty alt jest tu podwójnie kosztowny (tekst kotwicy + dostępność).
3. Obrazy dekoracyjne na końcu — a poprawka to alt="", nie opis.

Uwaga o oczekiwaniach: testy dzielone SearchPilot dotyczące dodawania tekstu alt były niekonkluzywne / nieistotne statystycznie dla rankingów wyszukiwania w sieci — zgodnie z powyższym punktem, że zysk z tekstu alt dotyczy wyszukiwania obrazów i dostępności, a nie wzrostu rankingu w sieci. A zapewnienie Muellera dla witryn zaczynających od zera: “jeśli dodajesz tekst alt po raz pierwszy, to czasami nawet jakikolwiek tekst alt jest lepszy niż żaden.”

Mówiąc wprost: nic w tym artykule nie gwarantuje, że naprawa tekstu alt przesunie rankingi, ruch lub cytowania w wyszukiwarkach AI o jakąkolwiek określoną wielkość — żadne przejrzane oficjalne źródło nie składa takiej obietnicy, a powyższe dowody z testów dzielonych są niekonkluzywne. Co tekst alt niezawodnie robi, to zamyka lukę w dostępności i daje algorytmowi Google Image Search metadane, które według niego są przez niego używane.

Aby uzyskać szerszy obraz — nazwy plików, mapy witryn obrazów, leniwe ładowanie, formaty i obrazy responsywne — zobacz szerszy hub SEO obrazów, pod którym znajduje się ten artykuł.

Podsumowanie AI

Skondensowane ujęcie wersji Advanced:

• Co to jest: tekst alternatywny to wartość atrybutu alt w elemencie <img> — krótki tekstowy zamiennik wybrany ze względu na cel i kontekst obrazu, a nie dosłowny spis pikseli. Wymagany przez HTML. Często błędnie nazywany „tagiem alt” (<img> to tag; alt to atrybut).
• Dwie role SEO, jedna przeceniona: (1) dodaje tekst na stronie — prawdziwe, ale drugorzędne; (2) sygnalizuje, o czym jest obraz, dla wyszukiwania obrazów — to główna wartość. Dodanie tekstu alternatywnego nie podnosi pozycji w wynikach wyszukiwania tylko dlatego, że strona ma obrazy (Mueller, wielokrotnie), a żadne sprawdzone oficjalne źródło nie obiecuje wzrostu pozycji, ruchu ani cytowania przez AI po jego dodaniu.
• Nie jedyny sygnał: Google czyta tekst alternatywny razem z wizją komputerową i kontekstem strony. Pisz więc pod kontekst — dlaczego obraz jest na tej stronie — a nie goły podpis “photo of a beach” (tłumaczenie) „zdjęcie plaży”.
• Dostępność + prawo: WCAG 1.1.1 (poziom A) wymaga alternatywy tekstowej; brak tekstu alternatywnego to częsty powód pozwów ADA. Ale 1.1.1 to jedno z kilkudziesięciu kryteriów — sam tekst alternatywny nie zapewnia pełnej zgodności z WCAG ani ADA dla strony czy witryny. Najpierw zgodność, potem SEO.
• Zasady pisania: zaczynaj od kontekstu; nie zaczynaj od „obraz”; używaj słów kluczowych naturalnie (bez upychania, bez sztywnej formuły); nie kopiuj otaczającego akapitu; brak limitu znaków Google (155 znaków to cel pisarski z przewodnika stylu, nie limit).
• Obrazy dekoracyjne: użyj alt="" (pusta wartość obecna) — nie brakujący atrybut i nie opis. Test: czy dodaje informacje, których strona nie przekazuje już gdzie indziej? Jeśli nie, jest dekoracyjny.
• Obrazy funkcjonalne: przyciski i elementy sterujące tylko z ikoną (ikona wyszukiwania, menu hamburger) otrzymują tekst alternatywny opisujący akcję, nie wygląd ikony.
• Obrazy z linkami: tekst alternatywny działa jako tekst kotwicy dla linku do przeszukania — węższy niż pełne „dostępna nazwa” obliczana przez technologie wspomagające.
• SVG: osadzone SVG używają <title> + aria-labelledby, nie alt.
• Antywzorce: upychanie słów kluczowych, nazwa firmy w pustym alt (Mueller: „marnowanie czasu”), mylenie alt z atrybutem title (dymek).
• Skala problemu: 80,4 % witryn ma co najmniej jeden brakujący atrybut alt — najczęstszy problem techniczny w sieci. Audytuj raportem Images w Ahrefs Site Audit; najpierw popraw obrazy treściowe, dekoracyjne (alt="") na końcu.

Oficjalna dokumentacja

Dokumentacja źródłowa od wyszukiwarek.

Google

• Najlepsze praktyki Google Images — podstawowe źródło: tekst alternatywny jako „najważniejszy atrybut”, ostrzeżenie przed upychaniem słów kluczowych, tekst kotwicy dla obrazu jako linku oraz dobre/złe przykłady.
• SEO Starter Guide — opisowy tekst alternatywny — tekst alternatywny jako tekst, który „wyjaśnia związek między obrazem a treścią”.
• Developer Documentation Style Guide — tekst alternatywny — wytyczna pisania 155 znaków, alt="" dla obrazów dekoracyjnych, bez „Obraz”/„Zdjęcie” i z interpunkcją.
• Write helpful alt text (Technical Writing) — poradnik Google skoncentrowany na dostępności: krótko, wyjaśniaj w kontekście, spójny alt dla powtarzanych obrazów.
• web.dev — Tekstowe alternatywy dla obrazów — opisowy alt dla ważnych obrazów, pusty alt="" dla dekoracyjnych.

Bing / Microsoft

• Tworzenie treści pod SEO (SEM 101) — starszy wpis Binga przedstawiający obrazy jako „martwe strefy dla bota” i atrybuty alt jako sposób ich opisania (używaj odpowiednich słów kluczowych, nie na siłę).
• Udział w ekosystemie wyszukiwania obrazów Bing — nazwy plików i tekst alternatywny pomagające stronie pojawić się w karuzeli obrazów, nawet jeśli nie zajmuje ona pierwszej strony wyników wyszukiwania.

Cytaty ze źródła

Oficjalne wypowiedzi Google. Tam, gdzie strona udostępnia tekst, link jest linkiem bezpośrednim, który przeskakuje do cytowanego fragmentu.

Dokumentacja Google — do czego służy tekst alternatywny

• “The most important attribute when it comes to providing more metadata for an image is the alt text… which also improves accessibility for people who can’t see images on web pages.” (tłumaczenie) „Najważniejszym atrybutem, jeśli chodzi o dostarczanie większej ilości metadanych dla obrazu, jest tekst alternatywny… który również poprawia dostępność dla osób, które nie widzą obrazów na stronach internetowych.” Przejdź do cytatu
• “Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image.” (tłumaczenie) „Google używa tekstu alternatywnego wraz z algorytmami widzenia komputerowego i zawartością strony, aby zrozumieć tematykę obrazu.” Przejdź do cytatu
• “Avoid filling alt attributes with keywords (also known as keyword stuffing) as it results in a negative user experience and may cause your site to be seen as spam.” (tłumaczenie) „Unikaj wypełniania atrybutów alt słowami kluczowymi (znanymi również jako upychanie słów kluczowych), ponieważ prowadzi to do negatywnych doświadczeń użytkownika i może spowodować, że Twoja witryna zostanie uznana za spam.” Przejdź do cytatu
• “Alt text in images is useful as anchor text if you decide to use an image as a link.” (tłumaczenie) „Tekst alternatywny w obrazach jest przydatny jako tekst kotwicy, jeśli zdecydujesz się użyć obrazu jako linku.” Przejdź do cytatu

John Mueller, Google — tekst alternatywny jest dla wyszukiwania obrazów

• “When it comes to the alt text, we primarily use that to better understand the image. So if someone is searching in Google Images for something that kind of matches the alt text, then we can use that to understand that your image is relevant for that alt text on that specific page.” (tłumaczenie) „Jeśli chodzi o tekst alternatywny, używamy go przede wszystkim do lepszego zrozumienia obrazu. Jeśli ktoś szuka w Google Images czegoś, co w pewnym stopniu pasuje do tekstu alternatywnego, możemy dzięki temu zrozumieć, że obraz jest istotny dla tego tekstu na konkretnej stronie.” — Office Hours, 18 marca 2022. Posłuchaj · Relacja SEJ
• “It’s not the case that we would say a textual webpage has more value because it has images. It’s really just we see the alt text and we apply that to the image, and if someone searches for the image we can use that to better understand the image.” (tłumaczenie) „Nie chodzi o to, że tekstowa strona ma większą wartość, ponieważ zawiera obrazy. Po prostu widzimy tekst alternatywny i stosujemy go do obrazu, aby lepiej go zrozumieć, gdy ktoś go szuka.” — Office Hours, 18 marca 2022.
• “I think the important part here is we don’t have any guidelines with regards to how long your alt text can be.” (tłumaczenie) „Nie mamy żadnych wytycznych dotyczących długości tekstu alternatywnego.” — Office Hours, 18 marca 2022.
• “The alt-text is unique in that it’s what directly connects the image to the page with context… if you use AI to create alt texts based on the image file, and get ‘photo of a beach’ as the alt text for that image, you’re not getting the most out of the alt text, both for users & search engines.” (tłumaczenie) „Tekst alternatywny jest wyjątkowy, ponieważ bezpośrednio łączy obraz ze stroną za pomocą kontekstu… jeśli AI tworzy go z pliku obrazu i otrzymujesz „photo of a beach”, nie wykorzystujesz jego pełnego potencjału dla użytkowników i wyszukiwarek.” — Reddit r/SEO, wrzesień 2024. Wątek · Relacja SEJ
• O umieszczaniu nazwy firmy w pustych atrybutach alt: “It makes no sense, it seems like a waste of time to me: once wasted time to implement, and again wasted time to clean up later on.” (tłumaczenie) „Nie ma to sensu; wygląda na stratę czasu: raz na wdrożenie, a potem ponownie na późniejsze sprzątanie.” — Twitter, 2 czerwca 2022. Relacja

Lizzi Sassman, Google — nie mów „obrazek”

• “We already are aware that it’s an image. You don’t need to say, ‘It’s an image of’ and then the thing.” (tłumaczenie) „Wiemy już, że to obraz. Nie musisz mówić: „To jest obraz” i dopiero potem nazywać rzecz.” — Search Off the Record, „Porozmawiajmy o SEO obrazów”, październik 2022. Transkrypcja

Gary Illyes, Google — opisuj obraz, nie celuj w słowa kluczowe

• “Make sure to add alt attribute. This text shouldn’t be what you want to rank for, but what’s in the image.” (tłumaczenie) „Pamiętaj, aby dodać atrybut alt. Ten tekst nie powinien być tym, na co chcesz się pozycjonować, lecz tym, co znajduje się na obrazie.” — Przemówienie na Pubcon, 17 października 2018. Relacja

Lista kontrolna audytu tekstu alternatywnego

Przegląd, który wyłapuje problemy z tekstem alternatywnym, które naprawdę mają znaczenie — dostępność na pierwszym miejscu, SEO obrazów na drugim:

• Brakujące atrybuty alt w obrazach treści — problem nr 1 (80,4 % witryn ma co najmniej jeden). Napraw je najpierw.
• Obrazy dekoracyjne używają alt="" (obecna pusta wartość), nie brakującego atrybutu ani nie opisu.
• Brak pominiętych alt — nieobecny atrybut to naruszenie specyfikacji HTML i może spowodować, że czytniki ekranu odczytają nazwę pliku.
• Obrazy z linkami mają znaczący alt opisujący cel (alt = tekst kotwicy na obrazie z linkiem; pusty alt = pusty tekst kotwicy).
• Obrazy funkcyjne (przyciski/sterowanie tylko z ikoną) opisują działanie — alt="Search", nie alt="Magnifying glass icon".
• Brak upychania słów kluczowych — żadnych ciągów synonimów ani docelowych słów kluczowych.
• Brak otwierających fraz „Image of” / „Photo of” — przechodź od razu do opisu.
• Alt nie jest kopią otaczającego akapitu — powinien dodawać unikalny kontekst dla tego obrazu.
• Alt opisuje kontekst, nie tylko wygląd — co obraz znaczy na tej stronie, a nie ogólne “photo of a beach” (tłumaczenie) „zdjęcie plaży”.
• Brak wrzucania nazwy firmy do pustych atrybutów alt (Mueller: „a waste of time”).
• alt nie mylony z title — atrybut title to podpowiedź po najechaniu, nie tekst alt.
• Powtarzane obrazy używają spójnego tekstu alt.
• Inline SVG używają <title> + aria-labelledby zamiast atrybutu alt.
• Mobile = alt z desktopu — wersja mobilna ma ten sam tekst alt co desktop (indeksowanie mobile-first).
• Audyt na dużą skalę z raportem Images w Ahrefs Site Audit (lub Ahrefs Webmaster Tools, bezpłatnie dla zweryfikowanych witryn).

Zasoby warte Twojego czasu

Moje powiązane artykuły

• JavaScript SEO Issues & Best Practices — gdzie omawiam puste atrybuty alt pozostawione przez frameworki JS, aspekt dostępności i prawny oraz dlaczego znaczenie alt w wyszukiwarkach jest często przeceniane.
• Ahrefs Site Audit Study — badanie ponad 1 mln domen, w którym brakujące atrybuty alt okazały się najczęstszym technicznym problemem SEO (80,4 % witryn).
• The Beginner’s Guide to Technical SEO — gdzie obsługa obrazów i tekstu alt wpisuje się w szerszy obraz techniczny.

Oficjalne

• Najlepsze praktyki Google Google Images best practices — kanoniczne źródło dotyczące tekstu alt i metadanych obrazów.
• Przewodnik stylu dokumentacji deweloperskiej Google — Developer Documentation Style Guide — alt text — konkretne zasady pisania (155 znaków, alt="", bez „Image of”).
• WCAG 2.1 — Non-text Content (1.1.1) — kryterium sukcesu dostępności stojące za tekstem alt.

Od innych

• Testy dzielone SearchPilot dotyczące tekstu alternatywnego — dodawanie tekstu alternatywnego (nierozstrzygające) i opisowy tekst alternatywny na obrazach listingu (szacowany wzrost, nieistotny statystycznie) — przydatne, realistyczne złagodzenie twierdzenia, że „tekst alternatywny poprawia pozycje w wyszukiwarce”.
• Search Engine Journal — Mueller o tekście alternatywnym dla SEO (marzec 2022) — opis Office Hours, w których Mueller jasno rozróżnia wyszukiwanie obrazów od wyszukiwania w sieci.
• Search Engine Journal — porada Muellera z 2024 r. o kontekście „zdjęcia plaży” — omawia jego komentarz na Reddicie o tym, dlaczego opisy generowane przez AI nie oddają sensu tekstu alternatywnego.
• SE Roundtable — Google o nazwach firm w pustym tekście alternatywnym (czerwiec 2022) — relacja Barry’ego Schwartza o tym, jak Mueller nazwał tę praktykę „stratą czasu”.
• Search Off the Record — „Porozmawiajmy o SEO obrazów” (październik 2022, transkrypcja) — Mueller i Lizzi Sassman o tekście alternatywnym stawiającym kontekst na pierwszym miejscu, błędzie rozpoczynania od „obraz”, oraz o tym, kiedy jakikolwiek tekst alternatywny jest lepszy niż żaden.
• W3C — WCAG 2.1 Success Criterion 1.1.1 (Non-text Content) — wymóg dostępności na poziomie A, który sprawia, że brak tekstu alternatywnego jest problemem zgodności, a nie tylko SEO.
• web.dev — Tekstowe alternatywy dla obrazów — wytyczne Google dla deweloperów rozróżniające opisowy tekst alternatywny dla obrazów znaczących od pustego alt="" dla obrazów dekoracyjnych.

Błędy w tekście alternatywnym, które warto wymienić z nazwy

Wypełnianie słowami kluczowymi, rozpoczynanie od „obraz” i brak tekstu alternatywnego na obrazach dekoracyjnych to trzy błędy, które widuję najczęściej, ale to nie jedyne. Każda pozycja tutaj to błąd wraz z powodem, dla którego jest błędem, i tym, co zrobić zamiast tego.

Wypełnianie atrybutu alt słowami kluczowymi

Dlaczego to błąd: Google wyraźnie przed tym ostrzega — “Avoid filling alt attributes with keywords… as it results in a negative user experience and may cause your site to be seen as spam.” (tłumaczenie) „Unikaj wypełniania atrybutów alt słowami kluczowymi (znanymi również jako upychanie słów kluczowych), ponieważ prowadzi to do negatywnych doświadczeń użytkownika i może spowodować, że Twoja witryna będzie postrzegana jako spam.” Czytnik ekranu odczytuje tekst alternatywny na głos, więc alt="puppy dog pup pups doggies" jest nie tylko spamerskie dla robota indeksującego, ale też bezużyteczne dla prawdziwego słuchacza.

Zamiast tego: Opisz obraz prostym językiem, w kontekście. alt="Dalmatian puppy playing fetch in a park" przekazuje te same informacje bez stosu słów kluczowych.

Rozpoczynanie od „Image of” lub „Photo of”

Dlaczego to błąd: Lizzi Sassman z Google była w tej sprawie bezpośrednia: “We already are aware that it’s an image. You don’t need to say, ‘It’s an image of’ and then the thing.” (tłumaczenie) „Wiemy już, że to obraz. Nie musisz mówić: ‚To jest obraz’ i potem rzecz.” Każdy znak poświęcony na zbędny wstęp to znak, którego nie poświęcono na przydatny kontekst.

Zamiast tego: Zacznij opis natychmiast — alt="Dalmatian puppy playing fetch in a park", not alt="Image of a dalmatian puppy playing fetch in a park".

Pomijanie atrybutu alt na obrazach dekoracyjnych

Dlaczego to błąd: Całkowite pominięcie alt (zamiast ustawienia go na pusty ciąg) jest naruszeniem specyfikacji HTML i może sprawić, że niektóre czytniki ekranu ogłoszą surową nazwę pliku zamiast pozostać cicho.

Zamiast tego: Użyj alt="" — pustej wartości, z obecnym atrybutem — w przypadku naprawdę dekoracyjnych obrazów, takich jak separatory i ozdobne tła. To informuje technologie asystujące, aby czysto pominęły obraz.

Używanie generowanych przez AI opisów „photo of X”, które ignorują kontekst strony

Dlaczego to błąd: Mueller zwrócił na to uwagę wprost: narzędzia AI, które generują “photo of a beach” (tłumaczenie) „zdjęcie plaży” technicznie opisują piksele, ale nie oddają sedna, ponieważ “the alt-text is unique in that it’s what directly connects the image to the page with context.” (tłumaczenie) „tekst alternatywny jest wyjątkowy, ponieważ bezpośrednio łączy obraz ze stroną za pomocą kontekstu” Goły podpis wizualny marnuje jedyną rzecz, jaką tekst alternatywny może zrobić, a której nie potrafi komputerowe widzenie.

Zamiast tego: Napisz (lub edytuj szkic AI), aby wyjaśnić, co obraz znaczy na tej stronie — to samo zdjęcie plaży wymaga innego tekstu alternatywnego na stronie o surfingu niż na stronie z nieruchomościami.

Umieszczanie nazwy firmy w pustych atrybutach alt

Dlaczego to błąd: Mueller nazwał ten konkretny wzorzec stratą czasu: “It makes no sense, it seems like a waste of time to me: once wasted time to implement, and again wasted time to clean up later on.” (tłumaczenie) „To wygląda na stratę czasu: wdrożenie kosztuje raz, a późniejsze sprzątanie kosztuje ponownie.” Nie dodaje to żadnych informacji ani użytkownikom, ani wyszukiwarkom, a jedynie staje się długiem do posprzątania później.

Zamiast tego: Napisz prawdziwy, specyficzny dla obrazu tekst alternatywny albo użyj alt="" dla naprawdę dekoracyjnych obrazów. Nie wybieraj domyślnie szablonowej nazwy marki.

Opisywanie wyglądu kontrolki tylko z ikoną zamiast jej działania

Dlaczego to błąd: alt="Magnifying glass icon" na przycisku wyszukiwania mówi użytkownikowi czytnika ekranu, jak wygląda ikona, a nie co robi jej naciśnięcie. Dla funkcjonalnej kontrolki wygląd nie jest użyteczną informacją — działanie jest.

Zamiast tego: Nazwij działanie lub wynik: alt="Search", alt="Close menu", alt="Play video". To ta sama zasada, co w przypadku tekstu alternatywnego obrazu z linkiem, który działa jak tekst kotwicy — tekst alternatywny powinien służyć funkcji kontrolki.

Mylenie atrybutu alt z atrybutem title

Dlaczego to błąd: Atrybut title renderuje się jako dymek po najechaniu w większości przeglądarek. Nie jest odczytywany przez czytniki ekranu tak jak tekst alternatywny i ma niewielkie znaczenie SEO — traktowanie go jako zamiennika tekstu alternatywnego pozostawia zarówno dostępność, jak i wyszukiwanie obrazów bez rozwiązania.

Zamiast tego: Ustaw alt jako tekstowy zamiennik, którego potrzebuje każdy obraz; używaj title tylko w przypadku autentycznego dodatkowego tekstu dymka, jeśli w ogóle.

Przykłady tekstu alternatywnego przed i po

Cztery konkretne pary przed i po, wzięte wprost z powyższych zasad.

Wypełniony słowami kluczowymi vs. opisowy

<!-- Before: keyword stuffing -->
<img src="dalmatian-puppy.jpg" alt="puppy dog pup pups doggies dalmatian puppies for sale">

<!-- After: plain description -->
<img src="dalmatian-puppy.jpg" alt="Dalmatian puppy playing fetch in a park">

Wersja “po” opisuje, co faktycznie jest na obrazie, raz, prostym językiem, zamiast upychać każdy synonim i frazę intencji zakupowej, przed czym ostrzegał Google.

Ogólny podpis vs. tekst alternatywny uwzględniający kontekst

To samo zdjęcie plaży wymaga innego tekstu alternatywnego w zależności od strony, na której się znajduje — to rozróżnienie, które Mueller podkreślił, krytykując narzędzia AI, które generują “photo of a beach” (tłumaczenie) „zdjęcie plaży” niezależnie od kontekstu.

<!-- Generic, low-value -->
<img src="beach.jpg" alt="Photo of a beach">

<!-- On a surfing page -->
<img src="beach.jpg" alt="Surfer paddling out past the break at sunrise">

<!-- On a real-estate listing -->
<img src="beach.jpg" alt="Private beach access behind the oceanfront property">

Te same piksele, trzy różne zadania — tekst alternatywny powinien odpowiadać celowi strony, a nie tylko opisywać obraz.

Obraz dekoracyjny: pusty alt vs. brak alt

<!-- Wrong: attribute omitted entirely -->
<img src="divider.svg">

<!-- Right: empty value, attribute present -->
<img src="divider.svg" alt="">

Oba wyglądają podobnie na pierwszy rzut oka, ale zachowują się inaczej: pominięty atrybut jest naruszeniem specyfikacji HTML, które może sprawić, że niektóre czytniki ekranu ogłoszą nazwę pliku; pusty alt="" poprawnie informuje technologie wspomagające, aby pominęły obraz.

Obraz funkcjonalny: działanie vs. wygląd

<!-- Weak: describes the icon -->
<button><img src="magnifying-glass.svg" alt="Magnifying glass icon"></button>

<!-- Better: describes what the control does -->
<button><img src="magnifying-glass.svg" alt="Search"></button>

Przycisk nie jest linkiem i nie jest dekoracyjny — to kontrolka. Nazwanie ikony nie mówi użytkownikowi czytnika ekranu nic o tym, co się stanie, jeśli ją naciśnie; nazwanie działania już tak.

Obraz z linkiem: alt jako tekst kotwicy

<!-- Weak: doesn't describe the destination -->
<a href="/pricing/"><img src="cta-button.png" alt="Button"></a>

<!-- Better: alt describes where the link goes -->
<a href="/pricing/"><img src="cta-button.png" alt="View pricing plans"></a>

Ponieważ obraz jest owinięty w link, jego tekst alternatywny działa jak tekst kotwicy — “Button” nie mówi użytkownikowi czytnika ekranu nic o miejscu docelowym, podczas gdy “View pricing plans” już tak.

Jaki tekst alternatywny powinien otrzymać ten obraz?

Trzy szybkie rozgałęzienia dla decyzji, które pojawiają się przy prawie każdym obrazie: czy jest dekoracyjny, czy jest kontrolką, a nie obrazkiem, i czy jest owinięty w link.

Częste problemy z tekstem alternatywnym

Cztery wpisy objaw-przyczyna-naprawa dla problemów z tekstem alternatywnym, które faktycznie pojawiają się w audytach i przeglądach dostępności.

Czytnik ekranu ogłasza surową nazwę pliku zamiast opisu

Objaw: Czytnik ekranu czyta na głos coś w rodzaju “dalmatian-puppy-jpg” lub “IMG_4021” zamiast opisu.

Prawdopodobna przyczyna (przyczyny): Atrybut alt został całkowicie pominięty w elemencie <img>, a nie ustawiony na pusty ciąg znaków. Jest to naruszenie specyfikacji HTML i jest to domyślny stan błędu — brakujące atrybuty alt występują na 80,4 % stron według badania audytu witryn Ahrefs obejmującego ponad milion domen.

Poprawka + sprawdzenie: Dodaj opisowy alt dla obrazów treściowych lub alt="" dla tych, które są naprawdę dekoracyjne. Potwierdź za pomocą rozszerzenia dostępności przeglądarki lub inspekcji elementu — atrybut powinien być obecny w obu przypadkach.

Brakujące atrybuty alt oznaczone w całej witrynie

Objaw: Narzędzie audytowe zwraca setki lub tysiące obrazów oznaczonych jako brakujące atrybuty alt.

Prawdopodobna przyczyna (przyczyny): Brak systematycznego procesu dodawania tekstu alternatywnego podczas przesyłania obrazów, często spotęgowany przez CMS lub motyw, który nie wymaga go w momencie przesyłania.

Poprawka + sprawdzenie: Działaj według priorytetów — najpierw główne obrazy treściowe (niosą znaczenie i mogą przynieść ruch z wyszukiwania obrazów), następnie obrazy z linkami (pusty alt kosztuje Cię również tekst kotwicy), a na końcu obrazy dekoracyjne (a poprawka tam to alt="", a nie opis). Po każdym przejściu uruchom ponownie Image SEO Checker lub narzędzie do audytu witryny, aby potwierdzić, że liczba spada.

Obrazy nie pojawiają się w Google Images mimo posiadania tekstu alternatywnego

Objaw: Obrazy treściowe mają tekst alternatywny, ale nadal nie pojawiają się w odpowiednich wyszukiwaniach Google Images.

Prawdopodobna przyczyna (przyczyny): Tekst alternatywny jest ogólnym podpisem wizualnym (“photo of a beach” (tłumaczenie) „zdjęcie plaży”), a nie opisem specyficznym dla kontekstu, co obraz oznacza na tej stronie — Mueller powiedział, że tego rodzaju generyczny tekst alternatywny generowany przez AI nie spełnia oczekiwań. Warto też pamiętać, że tekst alternatywny to tylko jeden sygnał: Google łączy go z widzeniem komputerowym i kontekstem strony, więc cienka lub niezwiązana strona otaczająca może wstrzymać obraz nawet przy dobrym tekście alternatywnym.

Poprawka + sprawdzenie: Przepisz tekst alternatywny, aby odzwierciedlał rzeczywisty temat i cel strony, a nie tylko piksele. Sprawdź ponownie wydajność w Search Console → Performance → Search type: Image po tym, jak Google będzie miał czas na ponowne przeszukanie i przetworzenie.

Przycisk tylko z ikoną nie informuje użytkowników czytników ekranu, co robi

Objaw: Czytnik ekranu ogłasza coś w rodzaju “ikona lupy” lub “obraz przycisku” przed kontrolką tylko z ikoną, bez wskazania, co robi jej naciśnięcie.

Prawdopodobna przyczyna (przyczyny): Tekst alternatywny opisuje wygląd ikony zamiast działania kontrolki — częste pomylenie, ponieważ obraz wygląda jak zwykły obrazek, a nie link ani element czysto dekoracyjny.

Poprawka + sprawdzenie: Przepisz tekst alternatywny, aby nazywał działanie lub wynik (alt="Search", alt="Close menu", alt="Play video"), a nie ikonę. Potwierdź, przechodząc do kontrolki za pomocą klawiatury i słuchając, co ogłasza czytnik ekranu.

Cel linku z obrazem nie jest jasny dla użytkowników czytników ekranu

Objaw: Użytkownik nawigujący za pomocą linku (lub obrazu) przez czytnik ekranu nie słyszy niczego użytecznego przed aktywacją linku składającego się tylko z obrazu.

Prawdopodobna przyczyna (przyczyny): Obraz z linkiem ma pusty lub brakujący tekst alternatywny — odpowiednik pustego tekstu kotwicy w linku tekstowym.

Poprawka + sprawdzenie: Napisz tekst alternatywny, który opisuje, dokąd prowadzi link, a nie tylko to, co pokazuje obraz (zobacz zakładkę Przykłady, aby zobaczyć przed/po). Potwierdź, przechodząc do linku za pomocą klawiatury i sprawdzając, co ogłasza czytnik ekranu, lub inspekcją elementu.

Stałe KPI dla tekstu alternatywnego obrazów

Dwie rzeczy, które warto śledzić na bieżąco, nie tylko po jednorazowym sprzątaniu: jaka część witryny ma w ogóle tekst alternatywny i czy ten tekst alternatywny faktycznie przynosi widoczność w wyszukiwaniu obrazów.

Pokrycie tekstem alternatywnym w całej witrynie

• Metryka — Udział elementów <img> w całym serwisie, które mają niepusty, niedekoracyjny atrybut alt (tylko obrazy treściowe — obrazy dekoracyjne powinny poprawnie mieć alt="", co nie jest luką).
• Co Ci to mówi — Czy tekst alternatywny to jednorazowa poprawka, czy ciągły nawyk. Biorąc pod uwagę, że 80,4 % witryn w badaniu audytu witryn Ahrefs ma co najmniej jeden brakujący atrybut alt, pokrycie zwykle ponownie spada, gdy publikowane są nowe treści, chyba że jest regularnie sprawdzane.
• Jak to wyciągnąć — Image SEO Checker na stronie, raport Images w Ahrefs Site Audit podczas pełnego przeszukiwania lub rozszerzenie przeglądarki do sprawdzania dostępności do szybkich kontroli.
• Benchmark / realistyczny zakres — Nie ma uniwersalnego docelowego procentu — witryna z dużą ilością dekoracyjnych obrazów tła będzie zasadnie pokazywać więcej alt="" niż blog pełen zdjęć. Ustal własną bazę przy pierwszym sprawdzeniu, a potem obserwuj, czy nie spada wstecz w miarę publikowania nowych stron.
• Częstotliwość — Kwartalnie jako stała kontrola i natychmiast po każdej masowej migracji treści lub zmianie CMS/motywu, która wpływa na sposób przesyłania obrazów.

Wydajność w wyszukiwarce obrazów (wyświetlenia/kliknięcia w Google Images)

• Metryka — Wyświetlenia, kliknięcia i CTR dla Twojej witryny filtrowane do wyników wyszukiwania obrazów.
• Co Ci to mówi — Czy tekst alternatywny, który piszesz, faktycznie przekłada się na widoczność i ruch w wyszukiwarce obrazów — główne zadanie, które Mueller wielokrotnie przypisywał tekstowi alternatywnemu, w przeciwieństwie do wzmocnienia pozycji w wynikach wyszukiwania.
• Jak to wyciągnąć — Search Console → Skuteczność → Typ wyszukiwania: Obraz.
• Benchmark / realistyczny zakres — Zależy całkowicie od tego, jak bardzo witryna i jej tematyka są oparte na obrazach — nie ma obronnego uniwersalnego numeru. Ustal własną bazę przy pierwszym wyciągnięciu tego raportu, a następnie śledź trend po zmianach tekstu alternatywnego lub treści obrazów, zamiast porównywać z jakimkolwiek zewnętrznym benchmarkiem.
• Częstotliwość — Miesięcznie jako stała kontrola; obserwuj go uważniej przez kilka tygodni po każdej masowej przepisaniu tekstów alternatywnych, aby zobaczyć, czy się zmienia.

Narzędzia do audytu i naprawy tekstu alternatywnego

• Image SEO Checker — audytuje bezpośrednio sygnały surowego HTML obrazów, w tym atrybuty alt, wskazówki leniwego ładowania i formaty obrazów. To najszybszy sposób na szybkie sprawdzenie pokrycia tekstu alternatywnego pojedynczej strony przed lub po poprawce.
• On-Page SEO Checker — daje priorytetyzowaną notatkę na stronie oraz zaawansowane kontrole surowego HTML obejmujące obrazy obok nagłówków, linków i innych elementów na stronie, przydatne, gdy tekst alternatywny jest jednym z kilku elementów audytowanych na stronie jednocześnie.
• Ahrefs Site Audit — raport Images — flaguje obrazy bez atrybutów alt podczas pełnego przeszukiwania Twojej witryny (Ahrefs Webmaster Tools daje to za darmo dla zweryfikowanych witryn), co jest sposobem, w jaki zmierzono 80,4 % brakujących alt w badaniu audytu witryn Ahrefs.
• Search Console — Skuteczność, Typ wyszukiwania: Obraz — źródło prawdy, czy Twój tekst alternatywny faktycznie zdobywa wyświetlenia i kliknięcia w wyszukiwarce obrazów.
• Rozszerzenia przeglądarki do dostępności / inspekcja elementu — do ręcznych szybkich kontroli kluczowych obrazów treściowych i potwierdzenia, co czytnik ekranu faktycznie ogłosi.

Sprawdź się: tekst alternatywny

Pięć szybkich pytań o to, co faktycznie robi tekst alternatywny i jak go pisać. Wybierz odpowiedź na każde, a następnie sprawdź.

Dziennik zmian