Tekst alternatywny WordPress: dobre i złe przykłady altów
Tekst alternatywny w WordPress to krótki opis zdjęcia, który czyta osoba niewidoma z czytnikiem ekranu i który pomaga Google zrozumieć obraz. Wpisujesz go w Bibliotece mediów albo w bloku Obrazek. Dobry alt opisuje to, co widać, w kilku do kilkunastu słowach. Alt zmieniony w Bibliotece nie poprawia zdjęć wstawionych wcześniej do wpisów.
Autor: Sani. Sani buduje moduł TellMyShop i na co dzień pracuje z zapleczem sklepów PrestaShop.
Aktualizacja: · 5 min czytania
Kto czyta alt i po co
Alt ma dwóch czytelników. Pierwszy to osoba, która nie widzi zdjęcia: niewidoma, słabowidząca albo z wolnym internetem, przy którym obraz się nie wczytał. Czytnik ekranu czyta jej alt na głos zamiast zdjęcia. Bez altu usłyszy często nazwę pliku, na przykład „IMG_4471”, albo nic.
Drugi czytelnik to Google. Według wskazówek Google o obrazach alt jest jednym z ważnych źródeł informacji o tym, co przedstawia zdjęcie, i pomaga pokazać je w Grafice Google przy właściwych zapytaniach. Google zaznacza też, że alt nafaszerowany słowami kluczowymi szkodzi.
Te dwie potrzeby się nie gryzą. Alt napisany dla człowieka zwykle jest też dobry dla Google.
Dobre i złe alty na przykładach
Przykłady dotyczą sklepu z oświetleniem ogrodowym. Każdy zły alt ma typowy błąd, który spotyka się na stronach WordPress.
| Zdjęcie | Zły alt | Dlaczego zły | Dobry alt |
|---|---|---|---|
| Lampion na tarasie wieczorem | IMG_4471 | nazwa pliku nic nie mówi | Lampion z kutego żelaza świecący na drewnianym tarasie wieczorem |
| To samo zdjęcie | lampiony ogrodowe lampiony tanie sklep lampiony | upychanie fraz | jak wyżej |
| Właścicielka przy stole z próbkami | zdjęcie przedstawia kobietę | „zdjęcie przedstawia” jest zbędne, brak treści | Właścicielka sklepu układa próbki kloszy na stole w pracowni |
| Produkt na białym tle | produkt | za ogólne | Kinkiet ogrodowy LED w kolorze grafitowym, widok z boku |
| Ozdobna linia między sekcjami | linia | grafika dekoracyjna | pusty alt |
| Wykres w poradniku | wykres | ukrywa informację | Wykres: zużycie prądu lamp LED i halogenowych w ciągu roku, LED zużywa mniej |
Częściej niż złe alty spotyka się ich brak. Jeśli strona ma kilkaset zdjęć bez opisu, zacznij od tych, które widać na stronach z ruchem: produktach, ofercie, najpopularniejszych wpisach.
Kiedy alt ma zostać pusty
Rada „każde zdjęcie musi mieć alt” jest uproszczeniem. Grafiki, które tylko zdobią, jak ozdobniki, tła albo ikona obok tekstu mówiącego to samo, powinny mieć pusty alt. Czytnik ekranu je wtedy pominie i nie będzie męczył słuchacza opisem ozdobnej kreski. Tak zaleca poradnik W3C o obrazach.
Pusty alt różni się od braku altu. Pusty mówi „to tylko dekoracja”. Brak altu każe czytnikowi zgadywać, często przez odczytanie nazwy pliku.
Gdzie wpisać tekst alternatywny w WordPressie
Masz trzy miejsca. Każde działa trochę inaczej.
- Biblioteka mediów. Media → Biblioteka, kliknij zdjęcie i wpisz opis w polu Tekst alternatywny. WordPress zapisuje zmianę sam. Ten alt będzie podpowiadany przy każdym nowym wstawieniu zdjęcia i zwykle użyty przy obrazku wyróżniającym (o nim więcej w poradniku o obrazku wyróżniającym w WordPress).
- Blok Obrazek w edytorze. Zaznacz zdjęcie we wpisie i w panelu ustawień bloku wpisz Tekst alternatywny. Ta zmiana dotyczy tylko tego jednego wpisu. Opis bloku znajdziesz w dokumentacji bloku Obrazek.
- Zdjęcia produktów WooCommerce. Zdjęcie główne i galeria produktu pochodzą z Biblioteki mediów, więc alt wpisujesz tam. W typowym motywie strona produktu pobiera go prosto z Biblioteki.
Pole Tytuł w Bibliotece to coś innego niż alt. Tytuł służy głównie tobie do szukania plików i nie zastępuje opisu dla czytnika ekranu.
Pułapka: stare wpisy nie widzą nowego altu
Tu wiele osób traci czas. Uzupełniasz alty w Bibliotece mediów, sprawdzasz stary wpis, a w kodzie strony nadal jest pusty alt.
Powód jest techniczny, ale prosty. Gdy wstawiasz zdjęcie do wpisu w edytorze blokowym, WordPress kopiuje alt do treści wpisu. Od tej chwili wpis ma własną kopię. Późniejsza zmiana w Bibliotece poprawia obrazki wyróżniające i nowe wstawienia, ale nie zmienia kopii w starych wpisach.
Przy kilku wpisach otwórz każdy, zaznacz zdjęcie i popraw alt w bloku. Przy wielu wpisach zacznij od tych z największym ruchem.
Jak Claude uzupełnia alty seriami
Zadanie „Teksty alternatywne zdjęć” we wtyczce TellMyShop dla WordPress i WooCommerce zaczyna od Biblioteki mediów. Claude znajduje tam obrazy bez altu i dla każdego proponuje opis na podstawie nazwy pliku, tytułu i strony, do której zdjęcie jest przypięte. Przy zdjęciach produktów bierze pod uwagę dane produktu. Gdy nie da się ustalić, co jest na zdjęciu, nie zgaduje i dopisuje plik do listy dla ciebie.
Uzupełnij brakujące alty zdjęć.
W Bibliotece mediów jest 37 zdjęć bez altu. Trzy pierwsze do akceptacji stylu:
lampion-kute-zelazo-02.jpg
było: alt: brak
będzie: alt: Lampion z kutego żelaza z otwartymi drzwiczkami, widok z przodu
lampion-szklany-taras.jpg
było: alt: brak
będzie: alt: Szklany lampion ze świecą na stoliku tarasowym
DSC_0193.jpg, przypięty do produktu Lampion wiszący Mały
było: alt: brak
będzie: alt: Lampion wiszący Mały w kolorze czarnym na łańcuchu
Dwóch plików nie umiem opisać z nazwy i kontekstu, zostawiam je dla ciebie. Styl pasuje?
Tak, rób resztę.
Podgląd paczki: 35 altów. Zapiszę po twoim „tak”, każdą zmianę cofniesz z historii zmian.
W darmowym Audycie Claude pokaże listę zdjęć bez altu i propozycje opisów. Zapis wymaga licencji. Wtedy Claude zmienia alty w Bibliotece mediów, do 50 plików w jednej paczce, po twojej akceptacji podglądu. Kopie altów w starych wpisach to osobna zmiana treści wpisu: Claude może je poprawić w wybranych wpisach, też z podglądem „jest → będzie” i możliwością cofnięcia.
Szczegóły i zapis na listę znajdziesz na stronie TellMyShop dla WordPress i WooCommerce, a ceny w cenniku. Alty to jeden z punktów szerszego przeglądu strony, który opisujemy w poradniku o audycie SEO WordPress.
Krótka ściąga
Opisz, co widać, tak jak opisałbyś zdjęcie komuś przez telefon. Pomiń „zdjęcie przedstawia”. Używaj słowa kluczowego tylko wtedy, gdy pasuje do obrazu. Grafikom dekoracyjnym daj pusty alt. Po zmianach w Bibliotece sprawdź też starsze wpisy. Więcej poradników znajdziesz na blogu.
Pytania i odpowiedzi
Gdzie w WordPressie wpisać tekst alternatywny?
W dwóch miejscach. W Bibliotece mediów, po kliknięciu zdjęcia, w polu Tekst alternatywny, i wtedy alt będzie podpowiadany przy każdym nowym wstawieniu. Albo w bloku Obrazek w edytorze, w panelu ustawień bloku, i wtedy zmieniasz alt tylko w tym jednym wpisie.
Zmieniłem alt w Bibliotece mediów, a we wpisie nadal jest stary. Dlaczego?
Bo edytor blokowy zapisuje alt w treści wpisu w chwili wstawienia zdjęcia. Zmiana w Bibliotece działa dla obrazków wyróżniających i nowych wstawień, ale nie poprawia zdjęć wstawionych wcześniej. W starych wpisach trzeba zmienić alt w bloku Obrazek albo w treści wpisu.
Czy każde zdjęcie musi mieć tekst alternatywny?
Każde zdjęcie, które coś przekazuje, tak. Grafiki czysto dekoracyjne, jak ozdobne linie czy tła, powinny mieć pusty alt, żeby czytnik ekranu je pominął. Pusty alt powinien być świadomą decyzją przy konkretnej grafice.
Czy wpisywać słowo kluczowe w alt?
Tylko wtedy, gdy naturalnie opisuje to, co widać na zdjęciu. Google ostrzega przed upychaniem słów kluczowych w altach. Alt „lampion ogrodowy z kutego żelaza na tarasie” jest lepszy niż „lampiony ogrodowe tanie lampiony sklep”.
Czy Claude sam rozpozna, co jest na zdjęciu?
Claude pisze alt na podstawie nazwy pliku, tytułu i strony, do której zdjęcie jest przypięte. Gdy z tych danych nie da się ustalić, co jest na zdjęciu, nie zgaduje. Takie pliki trafiają na listę do opisania przez ciebie.
WordPress jest znakiem towarowym WordPress Foundation. WooCommerce jest znakiem towarowym Automattic Inc. Claude jest znakiem towarowym Anthropic. TellMyShop nie jest powiązany z żadnym z tych podmiotów.