Tekst alternatywny, zapisywany w kodzie jako alt="...", mówi wyszukiwarce, co przedstawia obraz. Dobrze napisany opis pomaga zdjęciu trafić do Grafiki Google i ułatwia korzystanie ze strony osobom niewidomym, które słuchają treści przez czytnik ekranu. Gdy plik się nie wczyta, na przykład przy słabym łączu, przeglądarka pokaże w miejscu ilustracji właśnie ten opis.
Definicja i rola atrybutu alt w kodzie HTML
Atrybut alt to opis obrazu wpisany w znacznik <img>, na przykład <img src="szczeniak.jpg" alt="Szczeniak dalmatyńczyka bawi się w aportowanie">. Dokumentacja Google Search Central nazywa tekst alternatywny najważniejszym źródłem metadanych grafiki i podaje, że wyszukiwarka analizuje go razem z algorytmami rozpoznawania obrazów oraz z zawartością strony. Czytnik ekranu wypowiada go na głos, a gdy zdjęcie służy jako link, alt działa jak jego anchor. Google znajduje pliki podane w src elementu <img> w 7 formatach (BMP, GIF, JPEG, PNG, WebP, SVG i AVIF), natomiast grafik wstawionych jako tło w CSS nie indeksuje, więc taka ilustracja zostanie bez tekstu alternatywnego.
Zasady tworzenia wartościowych opisów obrazów
Dobry alt jest przydatny, konkretny i pasuje do treści strony, bo tak charakteryzuje go Google w zaleceniach dla Grafiki Google. W praktyce sprawdzają się trzy zasady:
- Trafność opisu: zamiast ogólnego "zdjęcie" wpisz, co widać na ilustracji, na przykład "kobieta w niebieskim garniturze przemawia na konferencji". Szczegół pomaga zarówno osobie z czytnikiem ekranu, jak i robotowi Google zrozumieć scenę.
- Słowa kluczowe w naturalnym kontekście: gdy grafika dotyczy tematu strony, możesz wpleść w opis frazę long tail, o ile pasuje do tego, co widać. Google ostrzega, że upychanie słów w atrybucie alt może skończyć się oceną jako spam.
- Zwięzłość: Google nie podaje limitu znaków, a jako wzór pokazuje opis z 7 słów. Jedno krótkie zdanie zwykle wystarcza, a dłuższa treść lepiej sprawdzi się w podpisie pod zdjęciem.
Przy okazji opisu zadbaj o nazwę pliku: według Google my-new-black-kitten.jpg mówi o zdjęciu więcej niż IMG00023.JPG, a ogólne image1.jpg czy 1.jpg lepiej pominąć.
Przykłady błędnych i poprawnych praktyk
Dokumentacja Google pokazuje 4 stopnie jakości tego samego opisu: brak atrybutu alt i lista kilkunastu słów o psach są nieprawidłowe, "szczeniak" jest lepszy, a "Szczeniak dalmatyńczyka bawi się w aportowanie" najlepszy. Podobnie wygląda to na stronie firmy:
Nieodpowiednie sformułowania:
- "Obraz"
- "Kliknij tutaj"
- "Logo"
Zalecane opisy:
- "Logo firmy XYZ w kolorach czerwonym i niebieskim"
- "Mężczyzna grający na gitarze na koncercie rockowym"
- "Widok z góry na tłum ludzi na festiwalu muzyki elektronicznej"
Pierwsza lista nie mówi nic o zawartości pliku, druga w kilku słowach nazywa osobę, miejsce albo przedmiot.
Wpływ przemyślanych opisów na widoczność w Google
Trafny alt zwiększa szansę, że Google połączy zdjęcie z właściwym zapytaniem i pokaże je w Grafice Google, w obrazach w zwykłych wynikach albo w Google Discover. Efekt sprawdzisz w Search Console, w raporcie "Wyniki wyszukiwania", który domyślnie pokazuje dane z 3 miesięcy. Po przełączeniu filtra typu na obrazy porównaj kliknięcia i wyświetlenia grafik z okresu przed poprawkami i po nich.
Opis obrazu poprawia też doświadczenia użytkowników, bo osoba niewidoma otrzymuje tę samą informację co reszta odbiorców. Google zaleca sprawdzić stronę narzędziem do ułatwień dostępu i w emulatorze wolnego połączenia, zanim uznasz opisy za gotowe.
