Tekst alternatywny (alt text, atrybut alt) to kluczowy element HTML, który opisuje obraz, zwiększa dostępność, wspiera SEO i zastępuje grafikę w razie błędu ładowania. W dobie marketingu cyfrowego – na stronach e‑commerce, landing page’ach i w social media – prawidłowy alt text to zarówno wymóg dostępności, jak i realna przewaga w wyszukiwarce.
Definicja i podstawowe funkcje tekstu alternatywnego
Alt text to opisowy tekst dodawany do znacznika <img>, który przekazuje istotną informację o obrazie osobom, które go nie widzą. Działa na kilku poziomach:
- dostępność (accessibility) – czytniki ekranowe (np. NVDA, VoiceOver) odczytują alt osobom niewidomym i niedowidzącym; obrazy informacyjne muszą mieć precyzyjny alt zgodnie z WCAG 2.1, a dekoracyjne oznaczamy pustym
alt=""; - obsługa błędów technicznych – gdy obraz nie ładuje się (np. słabe łącze), alt text zastępuje grafikę i zachowuje kontekst;
- optymalizacja SEO – Google indeksuje alt jako opis treści obrazu; dobrze dobrane słowa kluczowe zwiększają widoczność w Google Images i ruch organiczny.
Brak lub słaby alt text to realne ryzyko biznesowe – od utraty użytkowników korzystających z technologii asystujących, po niezgodność z przepisami (np. Ustawa o dostępności cyfrowej).
Dlaczego alt text jest kluczowy dla Google i dostępności?
Dla Google alt text to sygnał rankingowy, który pomaga zrozumieć treść obrazu i dopasować ją do zapytań użytkowników. To bezpośrednio przekłada się na widoczność w wynikach wyszukiwania wizualnego – ważnych dla e‑commerce i reklam. Dobrze zoptymalizowany alt może podnieść pozycję produktu w Google Shopping.
Dla osób niedowidzących alt text zastępuje opis wizualny, przekazując sens obrazu w słowach. Odpowiada na pytanie: „Co odbiorca musi wiedzieć, by zrozumieć treść?”. Ważne są emocje, kontekst i kluczowe detale, nie tylko nazwy obiektów.
Różnica między alt a title – alt jest odczytywany przez czytniki ekranowe i uwzględniany przez wyszukiwarki, a title to podpowiedź (tooltip) po najechaniu myszką i nie zastępuje alt.
Jak tworzyć skuteczny tekst alternatywny – zasady i najlepsze praktyki
Dobry alt text jest zwięzły (do ~125 znaków), konkretny, kontekstowy i naturalnie zawiera słowa kluczowe – bez powtórzeń i upychania fraz. Oto krok po kroku:
- Identyfikuj cel obrazu – określ, czy obraz niesie informację (opisz), jest dekoracyjny (
alt=""), czy pełni rolę linku (opisz funkcję, np. „Przejdź do koszyka”). - Bądź precyzyjny i rzeczowy – wskaż najważniejsze elementy, działania, kolory lub emocje; unikaj fraz typu „obrazek” czy „zdjęcie”.
- Uwzględnij kontekst marketingowy – przy produktach podkreśl cechy sprzedażowe (model, wariant, rozmiary), przy kreacjach reklamowych akcentuj korzyści.
- Włącz słowa kluczowe naturalnie – dbaj o brzmienie dla ludzi i algorytmów (bez „keyword stuffing”).
- Testuj poprawność – sprawdź alt w kodzie i z użyciem czytnika ekranu; nie polegaj na tooltipie, bo wyświetla się on z atrybutu
title, a nie zalt.
Unikaj błędów – ogólników („zdjęcie”), przydługich opisów i braku atrybutu alt tam, gdzie jest wymagany.
Porównanie skutecznych i nieskutecznych przykładów
Poniżej znajdziesz zestawienie przykładów wraz z uzasadnieniem ich efektywności:
| Rodzaj opisu | Przykład | Dlaczego skuteczny/nieskuteczny? |
|---|---|---|
| Skuteczny (informatywny) | „Czarna puchowa kurtka zimowa z kapturem, zapinana na suwak, rozmiary S-XL” | Podaje kluczowe detale sprzedażowe, kontekst i słowa kluczowe dla SEO oraz dostępności. |
| Nieskuteczny (zbyt ogólny) | „Kurtka” | Nie przekazuje wartości; ani użytkownik z czytnikiem, ani Google nie zyskają kontekstu. |
| Skuteczny (emocjonalny/kontekstowy) | „Uśmiechnięta kobieta w wieku 30 lat pisząca na laptopie przy biurku w nowoczesnym biurze” | Buduje wyobrażenie, akcentuje emocje i kontekst biznesowy. |
| Nieskuteczny (dekoracyjny bez alt) | Brak | Czytnik pominie lub ogłosi „obraz”, co dezorientuje użytkownika. |
| Skuteczny (SEO/marketingowy) | „Czerwony samochód sportowy na tle gór, model 2025, oferta specjalna” | Wspiera widoczność w Google Images i konwersję. |
| Nieskuteczny (keyword stuffing) | „Samochód sportowy czerwony tani szybki nowa oferta promocja” | Nienaturalny język może obniżyć ocenę w algorytmach. |
Jak dodać alt text w praktyce – narzędzia i platformy
Aby ułatwić implementację, skorzystaj z poniższych wskazówek:
- w kodzie HTML – użyj atrybutu alt w znaczniku obrazu, np.
<img src="kurtka.jpg" alt="Czarna puchowa kurtka zimowa z kapturem">; - WordPress/CMS – w edytorze bloków lub Bibliotece mediów wypełnij pole „Tekst alternatywny” dla każdego obrazu;
- platformy e‑commerce (Allegro, Shopify) – w edycji produktu uzupełnij sekcję „Alt text”/„Tekst alternatywny” przy zdjęciach;
- social media – Facebook, Instagram, LinkedIn i X (Twitter) oferują dedykowane pole „Alt” podczas publikacji grafiki; Pinterest także wspiera opisy obrazów;
- YouTube – miniatury nie mają alt; używaj precyzyjnych tytułów, opisów i napisów (captions) dla dostępności, ale pamiętaj, że nie zastępują one atrybutu alt;
- narzędzia weryfikacyjne – WAVE, Lighthouse (Chrome DevTools) i axe DevTools audytują zgodność z WCAG 2.1 i wykrywają brakujące alty;
- automatyzacja – wtyczki SEO (np. Yoast SEO) przypominają o dodaniu altów i pomagają w standaryzacji zespołowej.
Korzyści biznesowe i marketingowe
Wdrażając alt text, marki notują 2–5% wyższy ruch z Google Images i budują inkluzywny wizerunek. Serwisy dbające o dostępność często lepiej konwertują u starszych odbiorców i osób z niepełnosprawnościami.
Case study: sklep odzieżowy po optymalizacji altów zwiększył widoczność fraz produktowych o 30%. W B2B, kontekstowe alty do infografik wzmacniają autorytet i zrozumiałość treści.
Inwestycja w alt text to przewaga w SEO, dostępności i UX – realny must‑have dla każdego biznesu online.