Kamil Rybicki · Opublikowano: · Zaktualizowano:
Alt tag to potoczna nazwa atrybutu alt w znaczniku HTML <img> – krótkiego opisu tekstowego, który wyświetla się w miejscu obrazka, gdy ten się nie załaduje, i który czytają roboty wyszukiwarki oraz czytniki ekranu. Sam atrybut alt nie podnosi pozycji strony w klasycznych wynikach wyszukiwania, ale decyduje o tym, czy zdjęcie w ogóle trafi do wyszukiwarki Google Grafika i czy osoba korzystająca z czytnika ekranu zrozumie, co przedstawia fotografia. To dwie osobne korzyści, a nie jedna, i warto je od siebie odróżniać już na starcie.
Czym jest alt tag i jak go zapisać w kodzie strony?
Alt to atrybut, nie osobny znacznik – technicznie poprawny zapis to "atrybut alt znacznika img", choć w branży przyjęła się skrócona nazwa "alt tag". W kodzie wygląda tak:
„`
<img src="URL-obrazka" alt="opis obrazka">
„`
Tekst w cudzysłowie powinien odzwierciedlać zawartość zdjęcia i, jeśli to zasadne, zawierać frazę, pod którą grafika ma się pokazywać w wynikach obrazów. Z tego opisu korzystają trzy grupy odbiorców: roboty indeksujące, które dzięki niemu rozumieją kontekst fotografii, osoby niedowidzące korzystające z czytników ekranu oraz każdy, komu zdjęcie z jakiegoś powodu się nie wczytało.
Warto odróżnić alt od atrybutu title, który czasem trafia do tego samego znacznika <img>. Title bywa wyświetlany jako dymek po najechaniu kursorem, ale nie ma znaczenia dla SEO ani dla czytników ekranu – to alt jest tu podstawowym nośnikiem informacji. Obrazek, który jest jednocześnie linkiem, bo owinięty w znacznik <a>, nadal potrzebuje własnego atrybutu alt: opisuje wtedy i zawartość zdjęcia, i miejsce, do którego prowadzi kliknięcie.
Jak napisać dobry opis alt: zasady, przykłady i limit znaków
Dobry opis alt nazywa dokładnie to, co widać na zdjęciu, i unika ogólników w stylu "zdjęcie produktu". Dla zdjęcia butów zimowych sensowny opis wygląda tak: "Zimowe buty trekkingowe Nike Hoodland Suede, rozmiar 44, kolor czarny". W jednym zdaniu mieszczą się fraza ogólna, model i parametr, który realnie odróżnia ten produkt od setek podobnych w katalogu.
Sztywny limit techniczny dziś nie obowiązuje – to ustalenie sprzed kilku lat, gdy starsze czytniki ekranu ucinały dłuższy tekst. Współczesne czytniki odczytują opis w całości, niezależnie od długości. Mimo to jedno, zwięzłe zdanie pozostaje dobrą praktyką: osoba słuchająca opisu usłyszy go od początku do końca, więc lepiej podać konkret niż wymieniać wszystko naraz.
Nie każde zdjęcie potrzebuje rozbudowanego opisu, a część w ogóle nie powinna go mieć wypełnionego treścią:
| Typ grafiki | Co wpisać w alt |
|---|---|
| Zdjęcie produktu | Opisowy tekst z nazwą, cechą wyróżniającą i parametrem (rozmiar, kolor, model) |
| Infografika lub wykres | Krótkie streszczenie danych, które przedstawia grafika |
| Logo firmy | Nazwa firmy, ewentualnie ze słowem "logo" |
| Zdjęcie z tekstem, np. baner promocyjny | Treść, która widnieje na grafice |
| Tło, separator, element czysto dekoracyjny | Pusty atrybut: alt="" |
Ostatni wiersz tej tabeli to zmiana względem starszych zaleceń: dekoracyjnego obrazka nie należy pozbawiać atrybutu alt w ogóle, tylko zostawić go pustym. Pusty alt to sygnał dla czytnika ekranu, żeby pominąć element, zamiast odczytywać nazwę pliku, co brzmi jak przypadkowy ciąg znaków i psuje doświadczenie osoby, która ze strony korzysta głosowo. Ten sam kierunek wyznacza dokumentacja Google o tworzeniu treści przydatnych dla ludzi: opis ma służyć odbiorcy, nie kolekcjonować słowa kluczowe na siłę.
Czym różni się alt tag od anchora, czyli tagu <a>?
Alt i tag <a> to dwa różne mechanizmy HTML, mylone głównie przez podobieństwo nazw. Alt opisuje obrazek. Znacznik <a> tworzy link i ma zupełnie inny komplet atrybutów: href wskazuje adres docelowy, widoczny tekst wewnątrz znacznika to tzw. anchor text, a atrybut rel określa relację z linkowaną stroną.
Anchor text ma realne znaczenie dla SEO, bo mówi wyszukiwarce i użytkownikowi, czego dotyczy strona pod linkiem. Sformułowanie "buty zimowe męskie" w linku niesie więcej informacji niż "kliknij tutaj" i pomaga w nawigacji po serwisie. Atrybut rel przyjmuje wartości takie jak nofollow (link, któremu wykonawca nie chce przekazywać zaufania), sponsored (linki reklamowe) czy ugc (treści dodane przez użytkowników) – bez podania wartości link jest domyślnie w pełni zaufany i przekazuje moc do strony docelowej. Atrybut title przy <a>, podobnie jak przy obrazku, praktycznie nie ma znaczenia dla pozycji.
Jedna rzecz łączy oba mechanizmy: przesada szkodzi w obu przypadkach. Anchor text upchany słowem kluczowym w każdym linku na stronie mieści się w tym, co polityka spamu Google opisuje jako nienaturalne linkowanie, a wypełnienie każdego alt tego samego zwrotu wygląda podobnie podejrzanie po stronie obrazków. W obu przypadkach lepiej opisać rzeczywistość różnymi słowami niż powtarzać jedną frazę.
Czy uzupełnienie alt tagów podniesie pozycję strony w Google?
Nie w klasycznych wynikach wyszukiwania – Google od lat nie liczy alt jako czynnika rankingowego strony jako całości. Ma za to bezpośrednie przełożenie na to, czy dane zdjęcie pojawi się w Google Grafika, a pośrednio na dostępność serwisu dla osób korzystających z czytników ekranu.
Dla firmy to pytanie o koszt i o miejsce, gdzie ten koszt się zwraca. Uzupełnienie atrybutu alt przy każdym zdjęciu w sklepie to kilkanaście-kilkadziesiąt sekund pracy, więc koszt wdrożenia jest bliski zeru. W zamian otwiera dodatkowy kanał ruchu bez dodatkowego wydatku na reklamę: zakładkę Grafika w wynikach Google. W branżach mocno wizualnych, takich jak moda, wnętrza czy gastronomia, ten ruch bywa realnym, choć drugorzędnym źródłem zapytań, bo ścieżka zakupowa rzadko jest liniowa – klienci porównują zdjęcia z wielu źródeł, zanim trafią na stronę produktu, co pokazuje badanie Google nad tzw. messy middle w Think with Google. Dla firmy usługowej bez katalogu zdjęć produktowych efekt tego samego zabiegu będzie znikomy, bo tam po prostu nie ma czego szukać w wyszukiwarce obrazów. Warto więc kierować ten czas tam, gdzie zdjęcia realnie sprzedają, a nie rozliczać się z pustego wypełnienia pola w narzędziu do audytu.
Alt tag a wyszukiwanie wspierane przez AI
Odpowiedzi generowane przez AI w wyszukiwarce potrafią częściowo rozpoznawać zawartość obrazu, ale nadal korzystają też z sygnałów tekstowych, takich jak alt, nazwa pliku czy kontekst strony, zwłaszcza gdy zdjęcie jest niejednoznaczne albo model nie ma powodu analizować go dokładnie. Mechanizm opisuje dokumentacja Google o funkcjach AI w wyszukiwarce: treść strony, w tym opisy grafik, wciąż jest materiałem, na którym te funkcje się opierają.
Narzędzia w popularnych systemach zarządzania treścią (np. wtyczki WordPress) potrafią dziś automatycznie proponować opis alt na podstawie rozpoznawania obrazu. To wygodne przy dużym katalogu, ale wymaga kontroli – model rozpoznający obraz czasem generuje opis poprawny technicznie, lecz zbyt ogólny albo niedopasowany do konkretnego wariantu produktu. Automatycznie wygenerowany alt warto traktować jako szkic do sprawdzenia, nie gotowy tekst do wklejenia bez czytania.
Najczęstsze pytania o alt tag
Czym jest alt tag i gdzie się go wpisuje?
Alt tag to potoczna nazwa atrybutu alt, wpisywanego w kodzie HTML wewnątrz znacznika obrazka, w formacie <img src="adres" alt="opis">. Nie widać go na stronie, dopóki zdjęcie się nie wczyta, ale czytają go roboty wyszukiwarek i czytniki ekranu.
Ile znaków powinien mieć dobry opis alt?
Dziś nie obowiązuje sztywny limit techniczny, ale dobrą praktyką pozostaje jedno, zwięzłe zdanie. Zbyt długi opis nie zaszkodzi technicznie, lecz traci sens – lepiej podać konkretną informację niż wymieniać wszystkie cechy naraz.
Czy obrazki dekoracyjne też potrzebują atrybutu alt?
Tak, ale pusty: alt="". Sam atrybut powinien zostać w kodzie, żeby czytnik ekranu wiedział, że to element czysto dekoracyjny, i pominął go, zamiast odczytywać nazwę pliku.
Czy uzupełnienie alt tagów podniesie pozycję strony w Google?
W klasycznych wynikach wyszukiwania nie – alt nie jest tam czynnikiem rankingowym. Ma za to znaczenie dla widoczności w Google Grafika oraz dla dostępności strony dla osób korzystających z czytników ekranu.
Czym różni się alt tag od anchora w linku, czyli tagu <a>?
Alt opisuje obrazek, a widoczny tekst wewnątrz znacznika <a> opisuje stronę, do której prowadzi link. To dwa różne mechanizmy: jeden dotyczy grafiki i dostępności, drugi kontekstu i mocy linku przekazywanej między stronami.
