Atrybut alt HTML – jak dodać tekst alternatywny do obrazków

Twoja strona ma setki obrazków, ale Google nie widzi ani jednego? Atrybut alt to niewidzialna dla użytkowników, ale kluczowa dla wyszukiwarek i osób niewidomych informacja o tym, co przedstawia każdy obraz na stronie.

Atrybut alt (alternative text) to fragment kodu HTML, który opisuje zawartość obrazka. Wyświetla się gdy obraz nie może zostać załadowany i jest odczytywany przez czytniki ekranowe dla osób z dysfunkcją wzroku. To jeden z najważniejszych elementów dostępności stron internetowych.

Alt HTML – jak działa tekst alternatywny w kodzie

W kodzie alt HTML wygląda tak:

<img src="zdjecie-produktu.jpg" alt="Czerwona sukienka letnia z krótkim rękawem">

Gdy przeglądarka nie może załadować obrazu (wolne połączenie, błąd serwera, zablokowane obrazy), użytkownik widzi tekst z atrybutu alt zamiast pustego miejsca. Czytniki ekranowe odczytują ten tekst osobom niewidomym, opisując im zawartość strony.

Z technicznego punktu widzenia atrybut alt jest obowiązkowym elementem tagu <img> według standardów W3C. Strony bez atrybutów alt nie przechodzą walidacji HTML i mogą być gorzej oceniane przez wyszukiwarki.

Dlaczego atrybut alt jest kluczowy dla SEO obrazków

Google nie potrafi „zobaczyć” obrazka jak człowiek. Algorytm analizuje nazwę pliku, otaczający tekst i przede wszystkim atrybut alt. To główne źródło informacji o tym, co przedstawia obraz.

Obrazki z dobrymi atrybutami alt:

• Pojawiają się w wynikach Google Images
• Wspierają pozycjonowanie całej strony
• Zwiększają ruch z wyszukiwania obrazów
• Poprawiają wskaźniki dostępności

W praktyce widzę, że sklepy internetowe, które systematycznie dodają atrybut alt obrazka do zdjęć produktów, otrzymują nawet 20-30% więcej ruchu z Google Images. To szczególnie ważne w branżach wizualnych – moda, wnętrza, gastronomia.

John Mueller z Google wielokrotnie podkreślał, że atrybut alt to „okno” przez które Google rozumie zawartość obrazów. Bez niego nawet najlepsze zdjęcie produktu pozostanie niewidoczne w wynikach wyszukiwania.

Jak napisać skuteczny atrybut alt – praktyczny przewodnik

Dobry tekst alternatywny to balans między opisem dla człowieka a optymalizacją dla wyszukiwarek. Oto sprawdzone zasady:

Opisuj konkretnie, nie ogólnie

Źle: alt="produkt"
Dobrze: alt="Czarna kurtka zimowa damska z kapturem, rozmiar M"

Źle: alt="wykres"
Dobrze: alt="Wykres wzrostu sprzedaży online w Polsce 2023-2026"

Unikaj zbędnych słów

Nie pisz „zdjęcie”, „obrazek”, „grafika” – to oczywiste. Czytnik ekranowy już informuje, że to obraz.

Źle: alt="Zdjęcie przedstawiające logo firmy"
Dobrze: alt="Logo firmy WebDev Solutions"

Długość ma znaczenie

Optymalny atrybut alt to 5-15 słów. Czytniki ekranowe mogą obcinać dłuższe opisy, a Google preferuje zwięzłe informacje.

Atrybut alt WordPress – jak dodać w popularnym CMS

W WordPress dodawanie atrybutu alt to kwestia kilku kliknięć:

1. Wejdź do biblioteki mediów lub dodaj nowy obraz
2. Kliknij na obrazek
3. W prawym panelu znajdź pole „Tekst alternatywny”
4. Wpisz opis obrazka
5. Zapisz zmiany

Atrybut alt obrazka WordPress możesz też edytować bezpośrednio w edytorze Gutenberg. Zaznacz blok obrazu i w prawym panelu zobaczysz opcje SEO, w tym pole na tekst alternatywny.

Dla istniejących obrazów bez alt użyj wtyczek jak SEO Optimized Images lub Auto Image Alt Text. Automatycznie dodają podstawowe opisy na bazie nazw plików, które później możesz ręcznie poprawić.

Masowe dodawanie alt w WordPress

Jeśli masz setki obrazów bez alt, nie musisz edytować każdego ręcznie:

• WP CLI: wp media regenerate --alt – generuje alt z nazw plików
• Wtyczka Bulk Image Alt Text: pozwala edytować wiele obrazów naraz
• Custom Fields Suite: umożliwia masową edycję metadanych obrazów

Różnica między atrybutem alt a title – kiedy używać którego

Często mylone są dwa atrybuty: alt i title. Mają różne funkcje:

W praktyce atrybut title używam rzadko – głównie do dodania kontekstu, który nie mieści się w alt. Na przykład:

<img src="chart.png" 
     alt="Wzrost ruchu organicznego o 150% w ciągu 6 miesięcy" 
     title="Dane z Google Analytics za okres styczeń-czerwiec 2026">

Najczęstsze błędy w atrybutach alt – czego unikać

Po audytach setek stron widzę te same błędy w atrybutach alt:

Keyword stuffing w alt

Źle: alt="buty sportowe buty do biegania buty Nike buty męskie"
Dobrze: alt="Czarne buty do biegania Nike Air Max, model męski"

Google karze za nadmierne nagromadzenie słów kluczowych. Pisz naturalnie, dla człowieka.

Identyczne alt dla różnych obrazów

Każdy obraz powinien mieć unikalny opis. Kopiowanie tego samego alt to strata potencjału SEO.

Brak alt dla ważnych obrazów

Najgorszy błąd to całkowity brak atrybutu alt przy kluczowych obrazach – zdjęciach produktów, infografikach, wykresach. To jak prowadzenie sklepu z zasłoniętymi witrynami.

Alt dla obrazów dekoracyjnych

Tła, separatory, ozdobniki powinny mieć alt="" (pusty atrybut), nie szczegółowy opis. Inaczej czytnik ekranowy będzie opisywał każdy element dekoracyjny, utrudniając nawigację.

Narzędzia do audytu i optymalizacji atrybutów alt

Regularne sprawdzanie atrybutów alt to podstawa utrzymania dobrej dostępności i SEO. Używam tych narzędzi:

Darmowe narzędzia

• WAVE Web Accessibility Evaluator: pokazuje wszystkie obrazy bez alt
• axe DevTools: rozszerzenie do Chrome z szczegółową analizą dostępności
• Screaming Frog SEO Spider: eksportuje listę wszystkich obrazów z ich atrybutami alt

Narzędzia premium

• Ahrefs Site Audit: w sekcji „Images” pokazuje obrazy bez alt i z duplikowanymi opisami
• Semrush Site Audit: raport dostępności zawiera szczegółową analizę atrybutów alt
• Sitebulb: najdokładniejsze narzędzie do audytu dostępności, w tym alt

Z doświadczenia polecam zacząć od Screaming Frog – darmowy, szybki i pokazuje wszystkie potrzebne dane. Wyeksportuj listę obrazów, posortuj według brakujących alt i systematycznie uzupełniaj.

Atrybut alt w sklepach internetowych – praktyczne zastosowania

W e-commerce atrybut alt to potężne narzędzie sprzedażowe. Dobrze napisane opisy obrazów produktów:

• Przyciągają ruch z Google Images
• Poprawiają konwersję (użytkownicy wiedzą co kupują)
• Wspierają dostępność dla osób z dysfunkcją wzroku
• Pomagają w pozycjonowaniu kategorii produktowych

Przykłady skutecznych alt dla e-commerce:

Odzież: alt="Niebieska koszula męska w kratę, 100% bawełna, rozmiar L"
Elektronika: alt="Laptop Dell XPS 13, 16GB RAM, procesor Intel i7, ekran 13.3 cala"
Kosmetyki: alt="Krem nawilżający do twarzy Nivea, skóra sucha, 50ml"

W opisach produktów włączaj: markę, model, kolor, rozmiar, materiał, kluczowe cechy. To informacje, których szukają użytkownicy w Google Images.

Automatyzacja atrybutów alt – kiedy warto, a kiedy szkodzi

Automatyczne generowanie alt może być pomocne, ale ma ograniczenia. Sprawdzone podejścia:

Kiedy automatyzacja działa

• Produkty z bazą danych: alt generowany z nazwy, marki, koloru
• Zdjęcia z opisowymi nazwami plików: „czerwona-sukienka-letnia.jpg” → „Czerwona sukienka letnia”
• Galerie z metadanymi: EXIF, IPTC zawierają opisy zdjęć

Kiedy lepiej ręcznie

• Obrazy z tekstem: infografiki, cytaty, diagramy
• Zdjęcia sytuacyjne: ludzie używający produktu, wnętrza
• Grafiki złożone: wykresy, schematy, mapy

Najlepsze rezultaty daje podejście hybrydowe: automatyczne generowanie podstawowego alt, które później ręcznie dopracowujesz dla najważniejszych obrazów.

Testowanie dostępności atrybutów alt

Aby sprawdzić jak działają Twoje atrybuty alt, przetestuj stronę z perspektywy użytkownika z dysfunkcją wzroku:

1. Wyłącz obrazy w przeglądarce – czy strona nadal ma sens?
2. Użyj czytnika ekranowego – NVDA (Windows) lub VoiceOver (Mac) są darmowe
3. Nawiguj tylko klawiaturą – Tab, Enter, strzałki
4. Sprawdź kontrast – czy alt wyświetla się czytelnie gdy obrazy się nie ładują?

Ten test pokazuje prawdziwe problemy użyteczności, których nie wychwycą automatyczne narzędzia. W praktyce 10 minut takiego testowania ujawnia więcej błędów niż godzina analizy raportów.

Atrybut alt to fundament dostępnej i dobrze pozycjonowanej strony. Nie jest widoczny dla większości użytkowników, ale jego wpływ na SEO, dostępność i doświadczenie użytkownika jest ogromny. Systematyczne dodawanie opisowych, unikalnych atrybutów alt to jedna z najskuteczniejszych i najłatwiejszych optymalizacji, jakie możesz wdrożyć.