Jedno zdjęcie może przekazać więcej niż kilka akapitów, ale tylko wtedy, gdy osoba niewidząca albo wyszukiwarka potrafi zrozumieć jego sens. W tym artykule pokazuję, czym jest tekst alternatywny, jak tworzyć go dla różnych typów grafik, gdzie wpisuje się go w HTML i CMS oraz jak połączyć dostępność z rozsądnym SEO.
Dobry opis obrazu pomaga ludziom i wyszukiwarkom
- Opis alternatywny przekazuje sens grafiki osobom korzystającym z czytników ekranu.
- Dla zdjęcia informacyjnego opisuj to, co ważne w kontekście strony, a nie każdy widoczny szczegół.
- Grafika dekoracyjna powinna mieć pusty atrybut alt="", aby czytnik ekranu ją pominął.
- SEO korzysta z opisów, ale upchanie słów kluczowych nie poprawia jakości ani widoczności.
- Nie istnieje jedna obowiązkowa długość. Najlepszy opis jest krótki, konkretny i prawdziwy.
Czym właściwie jest opis alternatywny obrazu
Opis alternatywny to krótka informacja przypisana do grafiki w kodzie strony, najczęściej w atrybucie alt elementu
Na przykład fotografia laptopa stojącego na biurku może mieć opis „laptop na biurku”, ale to nie zawsze wystarczy. Jeśli artykuł dotyczy pracy zdalnej, lepsze będzie „laptop z otwartym arkuszem wyników kampanii na biurku”. Taki zapis mówi czytelnikowi, po co grafika znalazła się na stronie.
Opis nie jest tym samym co podpis pod zdjęciem, nazwa pliku ani atrybut title. Podpis widzi większość użytkowników, a tekst w alt pełni funkcję zamiennika obrazu. Google analizuje go razem z treścią strony, nazwą pliku i otoczeniem grafiki, ale nie oznacza to, że sam opis zapewni wysoką pozycję w wynikach.
Dlaczego ma znaczenie dla dostępności i SEO
W dostępnej stronie grafika nie może być jedynym nośnikiem ważnej informacji. Kryterium 1.1.1 standardu WCAG 2.2 wymaga tekstowej alternatywy dla treści nietekstowych, z wyjątkami między innymi dla elementów czysto dekoracyjnych. W praktyce oznacza to, że użytkownik korzystający z czytnika ekranu powinien otrzymać równoważną informację albo funkcję.
To szczególnie istotne w sklepach internetowych, formularzach, serwisach informacyjnych i materiałach edukacyjnych. Ikona koszyka powinna komunikować możliwość przejścia do koszyka, zdjęcie produktu powinno wskazywać jego najważniejsze cechy, a wykres wymaga przekazania kluczowego wniosku. Sam opis „wykres” nie daje użytkownikowi praktycznej wiedzy.
W SEO znaczenie jest bardziej pomocnicze niż wiele poradników sugeruje. Opisy ułatwiają wyszukiwarce zrozumienie tematu grafiki i mogą wspierać widoczność w Google Grafika, lecz nie zastępują dobrej treści, technicznej jakości strony ani trafności obrazu. Traktuję je jako jeden z elementów porządnej optymalizacji, nie jako ukrytą przestrzeń do wpisywania dodatkowych fraz.
Google Search Central zaleca opisywanie obrazów językiem użytecznym i osadzonym w kontekście, a WAI wskazuje, że sposób zapisu zależy od roli grafiki. To ważne rozróżnienie, bo zdjęcie dekoracyjne, przycisk i fotografia produktu nie powinny otrzymać takiego samego rodzaju opisu.
Jak dopasować opis do rodzaju grafiki
Zanim coś napiszę, zadaję sobie jedno pytanie: co zmieni się dla odbiorcy, jeśli obraz zniknie? Odpowiedź zwykle od razu pokazuje, jaki wariant zastosować.
| Rodzaj grafiki | Co powinien przekazać opis | Przykład |
|---|---|---|
| Informacyjna | Najważniejszą treść widoczną na obrazie | „Zespół analizuje wyniki kampanii przy wspólnym stole” |
| Dekoracyjna | Nic, ponieważ obraz nie wnosi informacji | alt="" |
| Funkcjonalna | Działanie, które uruchamia obraz | „Pobierz raport w formacie PDF” |
| Produktowa | Produkt i cechę istotną dla decyzji zakupowej | „Czarna termosublimacyjna butelka stalowa 500 ml” |
| Wykres lub diagram | Wniosek albo dane niedostępne w zwykłym tekście | „Sprzedaż rośnie z 120 do 190 zamówień między styczniem a marcem” |
| Logo będące linkiem | Nazwę marki i funkcję odnośnika | „Wmalinowymtyglu.pl, strona główna” |
Zdjęcia informacyjne
W fotografii nie opisuję wszystkiego, co potrafię dostrzec. Wybieram element, który wspiera temat akapitu lub pomaga zrozumieć ofertę. Zdanie „kobieta przy komputerze” jest wystarczające przy ogólnym artykule o pracy, ale przy tekście o analityce lepiej wskazać ekran z panelem danych, o ile rzeczywiście jest widoczny.
Grafiki dekoracyjne
Ozdobne tła, abstrakcyjne kształty i zdjęcia dodane wyłącznie dla nastroju powinny mieć alt="". Pusty atrybut nie oznacza braku dbałości. Przeciwnie, informuje technologię asystującą, że nie musi dodawać użytkownikowi kolejnego komunikatu. Wpisanie „ładne tło w kolorze malinowym” zwykle tylko zaśmieca odbiór strony.
Ikony i obrazy będące linkami
Gdy grafika jest przyciskiem lub jedyną treścią odnośnika, opis powinien mówić, dokąd prowadzi albo co robi. Ikona lupy jako element wyszukiwania potrzebuje opisu „Szukaj”, a nie „lupa”. Z kolei zdjęcie artykułu prowadzące do publikacji może mieć tytuł wpisu, jeśli to właśnie on jest najważniejszą informacją dla użytkownika.
Jak napisać dobry opis krok po kroku
Nie zaczynam od słowa kluczowego. Najpierw sprawdzam, czy obraz jest potrzebny do zrozumienia treści, a potem wybieram najkrótszy zapis, który zachowuje sens. Taka kolejność ogranicza pokusę tworzenia zdań brzmiących jak lista fraz SEO.
- Ustal rolę grafiki. Zdecyduj, czy jest informacyjna, dekoracyjna, funkcjonalna, produktowa czy przedstawia dane.
- Wybierz najważniejszy element. Nie opisuj tła, kolorów i szczegółów, które nie wpływają na odbiór treści.
- Napisz konkretnie. Użyj naturalnego języka i nazw obiektów, które rzeczywiście widać.
- Dodaj kontekst, jeśli jest potrzebny. Ta sama fotografia może wymagać innego opisu w artykule, sklepie i portfolio.
- Usuń zbędne słowa. Zwroty „zdjęcie przedstawiające” oraz „grafika pokazująca” zazwyczaj nie dodają wartości.
- Sprawdź zgodność z obrazem. Nie dopisuj emocji, marki, modelu produktu ani danych, których nie da się potwierdzić.
Nie ma uniwersalnego limitu znaków, po którego przekroczeniu opis staje się niepoprawny. Jako praktyczną wskazówkę przy prostych zdjęciach przyjmuję zwykle 5-15 słów, ale wykres, mapa czy instrukcja mogą wymagać więcej. Zwięzłość jest pomocna, lecz ważniejsza pozostaje kompletność informacji.
Przeczytaj również: Dane strukturalne Google - jak wdrożyć je poprawnie?
Przykłady, które pokazują różnicę
| Nieudany zapis | Lepszy zapis | Dlaczego |
|---|---|---|
| „SEO, marketing, obraz, zdjęcie” | „Specjalistka analizuje widoczność artykułu w narzędziu SEO” | Opisuje scenę i jej związek z tematem. |
| „buty, obuwie, sneakersy, modne buty” | „Białe sneakersy z zielonym panelem na boku” | Nie powtarza słów kluczowych i wskazuje cechę produktu. |
| „wykres wyników” | „Ruch organiczny wzrasta o 42 procent w ciągu sześciu miesięcy” | Przekazuje najważniejszy wniosek z danych. |
| „kliknij tutaj” | „Otwórz formularz kontaktowy” | Informuje o działaniu linku. |
Najczęstsze błędy, które osłabiają efekt
Pierwszym błędem jest automatyczne kopiowanie tytułu artykułu do każdego obrazu. Taki tekst bywa poprawny tematycznie, ale nie opisuje grafiki i nie pomaga osobie, która nie może jej zobaczyć. Drugi problem to pozostawianie nazw plików w rodzaju IMG_4837.jpg, które nie przekazują żadnej użytecznej informacji.
Najbardziej szkodliwe jest jednak upychanie fraz. Zapis „tekst alternatywny SEO opis alternatywny zdjęcia optymalizacja obrazu” nie brzmi jak komunikat dla człowieka i może wyglądać jak spam. W praktyce lepiej użyć jednego naturalnego określenia oraz zadbać o zgodność z treścią strony.
Często spotykam też nadmiernie szczegółowe opisy. „Zdjęcie przedstawiające młodą kobietę w białej bluzce, siedzącą na czarnym krześle, przy jasnym drewnianym biurku, obok zielonej rośliny” może być przesadą, jeśli grafika ma tylko ocieplać wpis. Szczegółowość ma sens wtedy, gdy elementy obrazu są istotne dla decyzji, instrukcji albo interpretacji treści.
Nie należy również wpisywać do alt informacji już dostępnych obok obrazu. Jeśli podpis wyjaśnia dokładnie to samo, czytnik ekranu może odczytać powtórzenie. W takim przypadku opis można skrócić, a przy grafice czysto dekoracyjnej zastosować pustą wartość.
Jak wdrożyć i sprawdzić opisy na stronie
W większości systemów CMS pole znajduje się przy dodawaniu lub edycji obrazu. W WordPressie jest to pole „Tekst alternatywny”, ale nazwy w innych narzędziach mogą się różnić. Z punktu widzenia kodu najważniejsze jest, aby obraz informacyjny miał odpowiednią wartość atrybutu alt, a dekoracyjny zapis alt="".
Przy większej stronie nie próbuję poprawiać wszystkiego naraz. Najpierw wybieram grafiki na stronach sprzedażowych, w menu, formularzach, artykułach generujących ruch oraz w kluczowych szablonach. Taki audyt daje szybszy efekt niż mechaniczne uzupełnianie setek ozdobnych obrazów.
Do kontroli można wykorzystać audyt dostępności w przeglądarce, narzędzia do analizy HTML oraz ręczny test z czytnikiem ekranu. Automatyczny skaner wykryje brak atrybutu, ale nie oceni dobrze, czy „wykres” rzeczywiście przekazuje sens wykresu. Ocena kontekstu nadal wymaga człowieka.
- Sprawdź, czy ważne obrazy mają opis, a dekoracyjne nie są odczytywane.
- Przejrzyj strony, na których grafika pełni funkcję linku lub przycisku.
- Porównaj opis z podpisem i treścią akapitu, aby uniknąć powtórzeń.
- Zweryfikuj opisy produktów, wariantów, ikon i wykresów osobno.
- Po zmianach przetestuj stronę na urządzeniu mobilnym i przy wyłączonym ładowaniu obrazów.
Warto też zadbać o nazwy plików, podpisy i sąsiedni tekst, ale nie mieszać ich funkcji. Nazwa analiza-ruchu-organicznego.webp może pomóc w porządku plików i interpretacji obrazu, jednak nie zastępuje opisu alternatywnego. Podobnie podpis nie powinien być wymówką dla pustego alt przy grafice, która niesie istotną informację.
Czy sztuczna inteligencja dobrze tworzy opisy
AI potrafi przygotować roboczą wersję opisu, zwłaszcza gdy strona ma dużą bibliotekę zdjęć. Sam traktowałbym ją jednak jako asystenta do pierwszego szkicu, nie jako automatycznego arbitra znaczenia obrazu. Model może rozpoznać przedmioty, ale nie zawsze wie, który z nich ma znaczenie dla konkretnego artykułu.
Przy generowaniu opisu warto przekazać narzędziu temat strony, rolę grafiki i odbiorcę. Potem trzeba sprawdzić, czy AI nie dopisała marki, emocji, koloru albo funkcji, których nie widać. Szczególnej kontroli wymagają twarze, wykresy, zrzuty ekranu i zdjęcia produktów, ponieważ nawet drobna pomyłka może wprowadzać w błąd.
Dobry proces wygląda prosto: automatyczny szkic, redakcja człowieka, kontrola w CMS i okresowy audyt. Przy obrazach dekoracyjnych nie ma sensu generować długich opisów tylko dlatego, że system potrafi je stworzyć. Czasem najlepszą decyzją jest świadome pozostawienie alt="".
Mała kontrola, która poprawia jakość całej strony
Przy każdym obrazie sprawdzam trzy rzeczy: czy grafika coś komunikuje, czy opis oddaje jej funkcję i czy brzmi naturalnie. Jeśli odpowiedź na którekolwiek pytanie jest przecząca, poprawiam zapis albo usuwam zbędny komunikat.
Nie traktuję opisów jako pola do dodatkowego upychania fraz. Ich największa wartość pojawia się wtedy, gdy łączą dostępność, jasną komunikację i rozsądną optymalizację. Dobrze opisane obrazy nie naprawią słabej strony, ale brak opisów potrafi odebrać część informacji użytkownikom i wyszukiwarkom.
Najlepszy opis można zwykle napisać w kilkanaście sekund, jeśli najpierw rozumie się rolę grafiki. To właśnie ta decyzja, a nie długość listy słów kluczowych, robi największą różnicę.
