Atrybut alt – co to jest i jak wpływa na SEO?

Atrybut alt, czyli tekst alternatywny, to jeden z fundamentalnych elementów optymalizacji strony internetowej. Łączy SEO, doświadczenie użytkownika (UX) i cyfrową dostępność w jednym, prostym atrybucie HTML. Prawidłowe stosowanie opisów alternatywnych dla obrazów to strategiczne działanie, które realnie przekłada się na widoczność witryny w wynikach wyszukiwania.

Co to jest atrybut alt i jaką pełni funkcję?

Atrybut alt to tekstowy opis obrazu umieszczony w kodzie HTML, który dostarcza informacji o jego zawartości zarówno wyszukiwarkom, jak i użytkownikom niemogącym go z różnych powodów zobaczyć. Pełni podwójną funkcję: jest sygnałem kontekstowym dla robotów Google i jednocześnie wsparciem dostępności cyfrowej.

Definicja atrybutu alt w kodzie HTML

Atrybut alt jest częścią znacznika obrazu <img> w kodzie HTML i wygląda następująco: <img src="sciezka-do-obrazu.jpg" alt="To jest tekst alternatywny">. Jego zawartość, znana jako opis alternatywny lub tekst alternatywny, powinna zwięźle i precyzyjnie opisywać to, co na grafice się znajduje.

Tekst alternatywny dla użytkowników i robotów

Głównym zadaniem tekstu alternatywnego jest dostarczenie równoważnej informacji dwóm grupom odbiorców. Dla robotów wyszukiwarek stanowi jeden z kilku sygnałów kontekstowych. Google łączy tekst alt z algorytmami computer vision oraz treścią strony, by właściwie rozpoznać zawartość grafiki. Dla użytkowników z niepełnosprawnością wzroku korzystających z czytników ekranu jest to podstawowa metoda poznania treści obrazu.

Atrybut alt a atrybut title: różnica i zastosowanie

Atrybut title to uzupełnienie, nie zamiennik atrybutu alt. Oba mają inne zadanie i działają inaczej w przeglądarkach oraz czytnikach ekranu.

MDN Web Docs stwierdza wprost: title nie jest akceptowalnym zamiennikiem alt. Nie kopiuj wartości alt do title, bo część czytników ekranu odczyta oba atrybuty po kolei, co brzmi absurdalnie. Jeśli chcesz dodać podpis do obrazu widoczny dla wszystkich użytkowników, użyj elementów <figure> i <figcaption> zamiast atrybutu title.

Jak atrybut alt wpływa na pozycjonowanie strony (SEO)?

Atrybut alt bezpośrednio wspiera SEO, umożliwiając robotom wyszukiwarek zrozumienie i zaindeksowanie treści graficznych, co zwiększa widoczność strony w wynikach wyszukiwania obrazów i wzmacnia jej kontekst tematyczny. Jest to prosty w implementacji, a skuteczny element optymalizacji on-page.

Rola alt w indeksowaniu obrazów przez Google

Google nie polega wyłącznie na atrybucie alt. Google Search Central dokumentuje, że algorytmy łączą trzy źródła informacji: treść alt, wyniki analizy wizualnej (computer vision) oraz kontekst otaczającej strony. Precyzyjny opis pomaga Google poprawnie skategoryzować grafikę i wyświetlić ją w Google Images na trafne zapytania, co może stać się znaczącym źródłem dodatkowego ruchu na stronie.

Jak stosować słowa kluczowe w opisach alt?

Słowa kluczowe w atrybutach alt powinny pojawiać się naturalnie i kontekstowo, opisując zawartość obrazu w odniesieniu do tematyki całej podstrony. Trzeba unikać tzw. upychania słów kluczowych (keyword stuffing), czyli tworzenia nienaturalnych list fraz, bo Google może uznać to za działanie spamerskie i efekt będzie odwrotny od zamierzonego.

Wpływ atrybutu alt na doświadczenie użytkownika (UX)

Atrybut alt ma pozytywny wpływ na UX, ponieważ tekst alternatywny pojawia się w miejscu obrazu, gdy ten nie może zostać załadowany z powodu błędu serwera, wolnego łącza lub ustawień przeglądarki. Użytkownik nie traci kontekstu i wie, co miało być na grafice, co zmniejsza frustrację i może obniżyć współczynnik odrzuceń.

Tworząc opisy alt dla produktów w e-commerce, wyjdź poza samą nazwę produktu. Zamiast „Buty Nike Air Max 90", użyj bardziej opisowego tekstu, np. „Białe męskie buty sportowe Nike Air Max 90 na białym tle". Taki opis jest bardziej pomocny zarówno dla użytkowników, jak i dla wyszukiwarek, precyzyjniej odpowiadając na szczegółowe zapytania.

Nazwa pliku obrazu jako dodatkowy sygnał SEO

Tekst alt nie działa w izolacji. Nazwa pliku to drugi sygnał tekstowy, który Google bierze pod uwagę przy interpretacji obrazu. Google Search Central rekomenduje opisowe nazwy plików zamiast automatycznie generowanych ciągów znaków:

• bialy-kubek-ceramiczny-180ml.jpg (poprawnie),
• IMG_00472.JPG lub image1.jpg (nieczytelne dla Google).

Oba elementy, alt i nazwa pliku, powinny być spójne i opisywać ten sam obiekt, choć nie muszą być identyczne. Nazwę pliku nadaj raz przy imporcie. Późniejsza zmiana wymaga aktualizacji adresu URL i może generować błędy 404.

Google Vision AI: czy alt jest jeszcze potrzebny?

Skoro Google rozpoznaje obrazy przez AI, po co pisać alt? Google Search Central stwierdza wprost, że alt text jest używany równolegle z computer vision i treścią strony, a nie zamiast tych sygnałów. Computer vision nie zastąpiło tekstowego wejścia do indeksu. Alt pozostaje jedynym sposobem, by programowo przekazać Google, co chcesz, żeby zrozumiał z danego obrazu. Brak alt to pominięcie wskazówki, którą sam możesz robotowi zostawić.

Wyszukiwanie wizualne i Google Images jako kanał ruchu

Google Images to osobny kanał ruchu organicznego. Obraz może być pierwszym punktem styku użytkownika z Twoją stroną, szczególnie w kategoriach takich jak moda, wnętrza, kulinaria czy produkty fizyczne. Dobrze opisany alt zwiększa szansę na wyświetlenie grafiki przy trafnych zapytaniach w Google Images, sprowadzając nowych użytkowników na stronę. W erze wyszukiwania wizualnego (Google Lens, wyszukiwanie obrazem) opisane obrazy pomagają Google powiązać grafikę z odpowiednimi zapytaniami.

Dlaczego atrybut alt jest niezbędny dla dostępności (WCAG)?

Atrybut alt jest fundamentem dostępności cyfrowej, ponieważ umożliwia osobom z niepełnosprawnościami wzroku, korzystającym z czytników ekranowych, zrozumienie treści wizualnych na stronie. Jest to wymóg standardu Web Content Accessibility Guidelines (WCAG), bez którego strona staje się barierą dla wielu użytkowników.

Jak czytniki ekranowe wykorzystują tekst alternatywny?

Czytniki ekranowe to oprogramowanie, które konwertuje treść cyfrową na mowę lub pismo Braille'a. Gdy czytnik napotka obraz, odczytuje zawartość jego atrybutu alt. Gdy atrybut alt jest nieobecny, zachowanie czytników jest różne: JAWS i wiele innych programów całkowicie pomija taki obraz bez żadnego komunikatu, przez co użytkownik traci informację o jego istnieniu. Część czytników odczytuje nazwę pliku, głównie gdy obraz jest jednocześnie linkiem, co i tak nie przekazuje sensu grafiki.

Atrybut alt a zgodność ze standardem WCAG

Zapewnienie tekstowych alternatyw dla treści niegraficznych to jeden z podstawowych wymogów standardu. Hierarchia WCAG 2.1 wygląda tak: Zasada 1: Postrzegalność (Perceivable) zawiera Wytyczną 1.1: Alternatywy tekstowe (Text Alternatives), a jej szczegółowym wymaganiem jest Kryterium sukcesu 1.1.1: Treść niegraficzna (Non-text Content, poziom A). Brak atrybutów alt dla obrazów niosących informację uniemożliwia spełnienie tego kryterium i jest jednym z najczęstszych błędów w audytach dostępności.

Co się dzieje, gdy obraz nie może zostać wyświetlony?

Gdy obraz nie ładuje się poprawnie, przeglądarka internetowa wyświetla w jego miejscu tekst zawarty w atrybucie alt. Ta funkcja przydaje się nie tylko użytkownikom z wolnym połączeniem, ale także tym, którzy celowo blokują ładowanie grafik, by oszczędzać transfer danych. Dzięki temu informacja wizualna nie zostaje utracona.

Alt dla obrazów będących linkami i przyciskami

Gdy obraz pełni funkcję linku lub przycisku (klikalne logo, baner CTA, ikona wyszukiwania), zasada opisu się zmienia. Alt powinien opisywać akcję lub cel, nie to, co widać na grafice.

W3C WAI precyzuje: alt dla obrazu-linku powinien przekazywać funkcję, którą inicjuje kliknięcie, a nie wygląd elementu. To błąd wskazywany niemal w każdym audycie dostępności, szczególnie w nawigacji i banerach afiliacyjnych.

Atrybut alt w praktyce: Podsumowanie i kluczowe zasady

W praktyce tworzenie skutecznych atrybutów alt polega na zwięzłym i precyzyjnym opisywaniu zawartości obrazu, z uwzględnieniem kontekstu strony i naturalnym wpleceniem słów kluczowych. To działanie, które przynosi wymierne korzyści dla SEO, dostępności i ogólnego doświadczenia użytkownika.

Jak tworzyć skuteczne opisy alternatywne?

Aby tworzyć opisy alt, które naprawdę spełniają swoje zadanie, trzymaj się kilku prostych zasad:

• bądź precyzyjny i opisowy: opisz dokładnie, co na obrazie się znajduje;
• zachowaj zwięzłość: celuj w ok. 100 znaków. Nie dlatego, że czytniki ekranu technicznie obcinają dłuższe teksty (testy WebAIM tego nie potwierdzają), lecz dlatego, że krótki opis jest po prostu bardziej użyteczny;
• unikaj zbędnych fraz: nie zaczynaj od „obrazek przedstawiający" lub „zdjęcie", bo czytniki ekranu już informują użytkownika, że napotykają obraz;
• używaj słów kluczowych z umiarem: wpleć główną frazę, jeśli pasuje do kontekstu obrazu, ale unikaj jej nadużywania;
• stosuj pusty atrybut dla grafik dekoracyjnych: jeśli obraz pełni wyłącznie funkcję ozdobną, użyj alt="", aby czytniki go zignorowały.

W przypadku złożonych grafik, takich jak infografiki czy wykresy, atrybut alt powinien zawierać krótkie podsumowanie (np. „Wykres kołowy pokazujący udział rynkowy przeglądarek w 2023 roku"). Pełny opis danych i wniosków powinien znaleźć się bezpośrednio pod grafiką lub na osobnej, podlinkowanej podstronie.

Najczęstsze błędy przy stosowaniu alt

Poniższe błędy pojawiają się niemal w każdym audycie SEO i dostępności. Warto je wyeliminować raz, a porządnie:

• brak atrybutu alt: obraz bez alt ma mniej sygnałów dla algorytmu Google i jest niedostępny dla czytników ekranu;
• pusty alt dla obrazów informacyjnych: alt="" jest poprawny dla dekoracji, ale dla infografiki czy zdjęcia produktu to poważny błąd;
• zbyt ogólny opis: alt="zdjęcie", alt="image", alt="grafika" nie wnoszą żadnej wartości;
• keyword stuffing: alt="buty nike air max buty sportowe buty do biegania" to coś, co Google traktuje jako spam;
• duplikaty altów: każdy obraz powinien mieć unikalny opis. Kopiowanie identycznego tekstu alt dla dziesiątek zdjęć w galerii e-commerce to błąd często popełniany przy wariantach produktu. Google widzi zduplikowane sygnały, a czytnik ekranu odczytuje użytkownikowi identyczny opis wielokrotnie;
• opis wyglądu zamiast funkcji: gdy obraz jest linkiem, alt powinien opisywać cel lub akcję, nie wizuał;
• zbyt długi, narracyjny tekst: alt to nie podpis. Kilkaset znaków nic nie wnosi.

Najważniejsze korzyści ze stosowania atrybutu alt

Systematyczne stosowanie atrybutów alt przynosi korzyści w trzech obszarach.

Jak dodać alt w WordPress i innych CMS

Dla większości właścicieli stron najszybsza ścieżka to edycja przez interfejs CMS, bez dotykania kodu.

WordPress: Biblioteka mediów 1. Przejdź do menu Media i kliknij Biblioteka. 2. Kliknij dowolny obraz, by otworzyć panel szczegółów po prawej stronie. 3. Wypełnij pole „Tekst alternatywny" i kliknij „Aktualizuj".

WordPress: edytor Gutenberg 1. Kliknij blok obrazu w edytorze. 2. W panelu ustawień po prawej (zakładka „Blok") znajdź pole „Tekst alternatywny (alt)". 3. Wpisz opis i zapisz post.

Uwaga: alt wpisany bezpośrednio w bloku Gutenberga nie jest automatycznie zapisywany w Bibliotece mediów dla danego pliku. Jeśli chcesz ustawić alt globalnie (tak, żeby był domyślny przy każdym kolejnym wstawieniu obrazu), ustaw go w Bibliotece mediów.

Shopify i WooCommerce: pole „Alt text" dostępne bezpośrednio w edytorze zdjęcia produktu.

Webflow: opcja dostępna w panelu Asset Settings po zaznaczeniu elementu image.

Narzędzia do sprawdzania i audytu brakujących altów

Przy setkach obrazów ręczny przegląd nie wystarczy. Poniższe narzędzia automatyzują audyt:

• Screaming Frog SEO Spider: crawluje całą witrynę i generuje raport brakujących atrybutów alt oraz pustych altów dla obrazów informacyjnych. Darmowy do 500 adresów URL;
• Google Lighthouse: dostępny w Chrome DevTools (F12, zakładka Lighthouse). Audyt dostępności wykrywa obrazy bez alt i przypisuje wynik punktowy. Przydatny do szybkiej weryfikacji konkretnej podstrony;
• WAVE (wave.webaim.org): rozszerzenie przeglądarki, które wizualnie oznacza błędy dostępności na stronie, w tym brakujące alts. Szybkie do przeglądu konkretnej podstrony bez potrzeby crawlowania całej witryny;
• Yoast SEO (WordPress): przy analizie treści w edytorze wskazuje obrazki bez alt w treści wpisu. Nie skanuje całej witryny, ale pomaga na bieżąco podczas redagowania.

Żadne z tych narzędzi nie oceni, czy alt jest opisowy i merytorycznie trafny. To wymaga przeglądu manualnego.

Źródła

• Google Search Central: Image SEO Best Practices – https://developers.google.com/search/docs/appearance/google-images
• W3C WCAG 2.1 – Success Criterion 1.1.1 Non-text Content – https://www.w3.org/TR/WCAG21/#non-text-content
• W3C WAI: Images Tutorial – https://www.w3.org/WAI/tutorials/images/
• W3C WAI: Functional Images – https://www.w3.org/WAI/tutorials/images/functional/
• W3C WAI: Decorative Images – https://www.w3.org/WAI/tutorials/images/decorative/
• MDN Web Docs: <img> – The Image Embed element – https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
• Screaming Frog: How to Find Missing Image Alt Text – https://www.screamingfrog.co.uk/seo-spider/issues/images/missing-alt-text/
• WordPress Accessibility Handbook: Alternative Text for Images – https://make.wordpress.org/accessibility/handbook/content/alternative-text-for-images/