Teksty alternatywne i nazwy plików: praktyczny przewodnik po SEO obrazów

Tekst alternatywny, nazwa pliku i podpis mają różne zadania

Przygotowując obraz, możesz zobaczyć kilka podobnych pól. Każde służy czemuś innemu: nazwa identyfikuje plik, tekst alternatywny opisuje obraz osobie, która go nie widzi, a podpis pojawia się obok i jest widoczny dla wszystkich.

Tekst alternatywny jest zapisany na stronie, zwykle w atrybucie alt. Nie znajduje się wewnątrz JPG ani PNG. Czytnik ekranu, który odczytuje treść na głos lub przedstawia ją w brajlu, może użyć tego opisu. Zobacz wyjaśnienie MDN dotyczące atrybutu alt.

To samo zdjęcie może potrzebować innych opisów w różnych miejscach. Na karcie produktu ważne są uchwyt i wykończenie. W artykule o fotografowaniu powierzchni odbijających światło może liczyć się odbicie w szkliwie. Opisz to, co przydatne czytelnikowi konkretnej strony.

Ustal, czego czytelnik potrzebuje z obrazu

Zastanów się, czego zabrakłoby bez zdjęcia. Pokazuje szczegół produktu, krok instrukcji, ważne słowa czy jedyną etykietę linku? A może tylko upiększa stronę? W wyborze według funkcji obrazu pomaga drzewo decyzyjne W3C dla tekstów alternatywnych.

• Obraz przekazujący informacje: opisz szczegół potrzebny czytelnikowi.
• Link lub przycisk bez innej etykiety: wyjaśnij cel albo działanie.
• Dekoracja: pozostaw opis pusty, jeśli nie dodaje potrzebnych informacji i nie jest linkiem ani elementem sterującym.
• Wykres lub szczegółowy diagram: krótko opisz, co pokazuje, a szczegóły dodaj w pobliskim tekście lub tabeli.

Pomyśl o zdjęciu kubka na biurku. Na stronie sprzedażowej jego kształt i wygląd są użyteczne. Za formularzem zapisu do newslettera to samo zdjęcie może być dekoracją. Liczy się powód jego umieszczenia.

Napisz przydatny opis prostym językiem

Zacznij od obiektu i dodaj potrzebny szczegół. Boczne ujęcie plecaka może pokazywać butelkę w siatkowej kieszeni. Na karcie produktu to ważniejsze niż lista wszystkich kolorów.

Skup się na istotnych informacjach. Tło, kąt i oświetlenie opisuj tylko wtedy, gdy pomagają zrozumieć obraz. We wskazówkach W3C dotyczących obrazów informacyjnych wyjaśniono, jak opisać to, co użyteczne, bez wyliczania każdego szczegółu.

To przykładowe opisy, nie opisy ilustracji w tym artykule. We własnych obrazach sprawdź, czy każdy szczegół naprawdę widać. Nie wymyślaj materiału, modelu, miejsca ani cechy, żeby opis był pełniejszy. Zdjęcie brązowego krzesła nie dowodzi, że jest skórzane.

Przeczytaj opis razem ze zdaniami przed obrazem i po nim. Dodaje coś przydatnego czy niepotrzebnie powtarza tekst? Dopasuj go do całej strony. Jeśli podpis wyjaśnia już wszystko, co wnosi obraz, zastanów się nad osobnym opisem. W tekście alternatywnym zachowaj przydatne szczegóły nieobecne w podpisie.

Używaj pustego tekstu alternatywnego dla dekoracji

Ozdobnik przy nagłówku lub ilustracja tła może tylko poprawiać wygląd. Jeśli nie wnosi potrzebnych informacji, nadaj pusty atrybut alt: alt="". Czytnik ekranu może wtedy pominąć obraz. Nie usuwaj atrybutu całkiem: niektóre czytniki mogą odczytać nazwę pliku. Zobacz wskazówki W3C dotyczące obrazów dekoracyjnych.

<img src="/images/zolty-ozdobnik.svg" alt="">

Nie wpisuj „obraz dekoracyjny” jako opisu. Dodaje to komunikat bez przydatnej informacji. Pusty atrybut oznacza, że opis nie zostanie odczytany.

Uważaj na pozornie dekoracyjne obrazy, które jako jedyne zawierają ważne informacje. Baner z rabatem i datą końcową nie jest tylko ozdobą, jeśli tych danych nie ma w tekście. Napisz ofertę na stronie albo dodaj ją do tekstu alternatywnego. Ikona błędu również wymaga pisemnego wyjaśnienia, jeśli jest jedynym sygnałem problemu.

Opisz cel linków i przycisków złożonych tylko z obrazu

Jeśli obraz jest całą zawartością linku, opis powinien wskazać jego cel. Dla przycisku obrazkowego opisz działanie. „Szukaj” wyjaśnia funkcję, a „Lupa” tylko kształt. Te przypadki opisują wskazówki W3C dotyczące obrazów funkcjonalnych.

Załóżmy, że logo sklepu jest jedynym elementem linku do strony głównej. „Strona główna sklepu North Shore” daje zrozumiałą etykietę. Szczegółowy opis fali w logo nie mówi, dokąd prowadzi link.

Jeśli link zawiera już czytelny widoczny tekst, obraz często może mieć pusty opis, żeby uniknąć powtórzeń. Zależy to od dodatkowej informacji w obrazie. Sprawdź go razem z tekstem linku.

<a href="/">
  <img src="/images/north-shore-logo.svg"
       alt="Strona główna sklepu North Shore">
</a>

W galerii produktu zastanów się, co robi wybór miniatury. „Zobacz boczną kieszeń plecaka” może pomóc bardziej niż powtarzanie nazwy produktu. Galeria może mieć osobne pola dla etykiet przycisków i opisów zdjęć. Sprawdź, czy każdy element sterujący ma jasną etykietę w opublikowanej galerii.

Opisz wykresy, zrzuty ekranu i tekst w obrazach

Wykres może zawierać zbyt wiele informacji na jeden krótki opis. Wyjaśnij jego temat i dodaj wyniki oraz wartości w pobliskim tekście lub tabeli czytelnej bez wykresu. Możliwości przedstawiają wskazówki W3C dotyczące złożonych obrazów.

Wyobraź sobie wykres porównujący rozmiary trzech eksportów tego samego zdjęcia. Tekst alternatywny może nazwać porównanie, a tabela podać format i rozmiar. Wynik powinien być zrozumiały bez interpretowania wysokości słupków. Użyj rzeczywistych pomiarów i zaznacz, że dotyczą tego zdjęcia.

Dla zrzutu z poradnika opisz ustawienie lub krok, który ilustruje. Wskazanie miejsca ustawienia jakości pomaga, ale właściwą instrukcję dodaj też na stronie. Jeśli potrzeba kilku etykiet, umieść je w instrukcji zamiast ukrywać długą procedurę w tekście alternatywnym.

Jeśli obraz zawiera krótki ważny tekst nieobecny gdzie indziej, dodaj go do opisu. Długie fragmenty umieść na stronie. Nasz przewodnik po eksporcie z Canvy wyjaśnia, dlaczego ważne nagłówki i przyciski zwykle lepiej działają jako treść strony.

Wybieraj krótkie, opisowe nazwy plików

Google zaleca krótkie opisowe nazwy jako niewielką wskazówkę o temacie obrazu. Korzysta też z tekstu alternatywnego i otoczenia na stronie. Nie uzasadnia to wypełniania nazwy frazami wyszukiwania. Zobacz wskazówki Google dotyczące SEO obrazów.

Najpierw nazwij obiekt, potem przydatny szczegół lub ujęcie. W galerii produktu zielony-plecak-boczna-kieszen.webp jest czytelniejsze niż IMG_4821.webp. Dodaj kod produktu, jeśli rozróżnia podobne towary. Nie dodawaj roku, jeśli naprawdę nie identyfikuje obrazu.

Prosty system to małe litery i słowa oddzielone łącznikami. Pomaga porządkować pliki, ale nie gwarantuje lepszych pozycji. Zachowaj poprawne rozszerzenie: zmiana .png na .jpg w nazwie nie konwertuje obrazu. Użyj konwertera, gdy potrzebujesz innego formatu.

Zmieniaj nazwy przed przesłaniem, jeśli to możliwe. Jeśli nowa nazwa opublikowanego obrazu zmienia jego adres, strony ze starym adresem mogą go stracić. Zaktualizuj je i w razie potrzeby przekieruj stary adres. Nie zmieniaj nazw działającej biblioteki tylko po to, by dodać słowa kluczowe.

Dodaj opis do obrazu na stronie

W edytorze szukaj pola „tekst alternatywny” lub „alt”. Zapisz opis i sprawdź opublikowaną stronę. Zmiana tytułu, podpisu lub nazwy w bibliotece nie musi zmienić tekstu alternatywnego na stronie. Edytory i szablony różnie używają tych pól.

Nie musisz pisać HTML, jeśli edytor ma odpowiednie pole. Przy bezpośredniej edycji kodu prosty obraz informacyjny wygląda tak:

<img src="/images/zielony-plecak-boczna-kieszen.webp"
     alt="Zielony plecak z butelką wody w bocznej kieszeni z siatki">

Sprawdź stronę po zapisie. W przeglądarce na komputerze możesz zbadać element obrazu i znaleźć jego wartość alt. Narzędzie dostępności wykryje brakujące atrybuty, ale nie oceni wiarygodnie przydatności opisu. Przeczytaj go samodzielnie razem z treścią strony.

Na stronach wielojęzycznych pisz opis w języku danej strony. Tłumacz naturalnie znaczenie, nie angielską listę słów kluczowych. Ten sam plik może mieć różne opisy, bo każda strona zapisuje swój tekst alternatywny.

Przykład: przydatny opis zdjęcia produktu

Dodajesz zdjęcie bocznej kieszeni do karty zielonego plecaka. Celem jest pokazanie, jak mieści się butelka, nie powtarzanie całej specyfikacji.

1. Wybierz przydatne ujęcie. Użyj zdjęcia z wyraźną butelką i kieszenią. Nie opisuj ukrytych szczegółów.
2. Przygotuj plik. Przytnij zbędną przestrzeń i dobierz wymiary, przy których kieszeń jest widoczna. Cały proces opisuje nasz przewodnik po zdjęciach produktów.
3. Nazwij końcowy plik. Użyj na przykład zielony-plecak-boczna-kieszen.jpg z rozszerzeniem odpowiadającym zapisanemu formatowi.
4. Dodaj opis odpowiedni dla strony. Opisz butelkę w siatkowej kieszeni. Ceny, obietnice dostawy i niezwiązane frazy należą do pozostałej treści strony.
5. Sprawdź opublikowaną galerię. Zweryfikuj zapisany opis i etykiety sterowania, na telefonie i komputerze.

Ten proces oddziela przygotowanie pliku od pisania tekstu alternatywnego. Oba są ważne, ale rozwiązują inne problemy. Stosuj go do zrzutów i wykresów, dopasowując opis do przedstawianej informacji.

Unikaj tych częstych błędów

• Powtarzanie fraz wyszukiwania. „Plecak najlepszy plecak tani plecak plecak turystyczny” nie opisuje kieszeni ani nie pomaga zrozumieć zdjęcia.
• Używanie nazwy pliku jako opisu. Pomaga znaleźć plik, ale nie zawsze wyjaśnia to, co potrzebne czytelnikowi.
• Ten sam tekst dla całej galerii. Opisuj różne ujęcia, gdy pokazują różne informacje.
• Zgadywanie szczegółów. Sprawdzaj materiały, oznaczenia i cechy zamiast wymyślać je na podstawie wyglądu.
• Długie opisy dekoracji. Dodatkowe komunikaty mogą utrudniać śledzenie ważnej treści.
• Sprawdzanie tylko biblioteki mediów. Szablon może nie używać zmienionego pola. Sprawdź opublikowany obraz.

Często zadawane pytania

Jak długi powinien być tekst alternatywny?

Możliwie krótki bez pomijania przydatnych informacji. Proste zdjęcie może potrzebować jednego zdania. Nie ma jednej liczby znaków, która zapewnia użyteczność. Długie objaśnienia wykresów dodaj do zwykłej treści strony.

Czy każdy obraz potrzebuje opisu?

Nie. Opisuj obrazy przekazujące informacje, a dekoracjom pozostaw pusty tekst. Jeśli obraz jest jedyną etykietą linku lub przycisku, wyjaśnij cel albo działanie.

Czy mogę użyć AI do szkicu opisu?

Tak jako punktu wyjścia, ale porównaj go z obrazem i stroną. Usuń domysły, zbędne szczegóły i powtórzenia. Wygenerowany opis może brzmieć pewnie, choć opisuje niewidoczną cechę.

Czy kompresja usuwa tekst alternatywny?

Tekst jest na stronie, nie w obrazie. Kompresja lokalnego JPG lub PNG nie zmienia strony. Jednak zamiana obrazu w edytorze może zmienić lub wyzerować pola. Potem sprawdź opublikowany opis.

Czy lepsze nazwy gwarantują więcej ruchu z wyszukiwarki?

Nie. Czytelne nazwy i przydatne opisy wspierają dobrze przygotowaną stronę, ale nie gwarantują indeksowania, pozycji ani kliknięć. Google omawia też otaczającą treść, dostęp robotów i ładowanie. Nasz przewodnik po wydajności obrazów dotyczy tej osobnej części pracy.

Podsumuj za pomocąChatGPT (otwiera się w nowej karcie)Grok (otwiera się w nowej karcie)Google (otwiera się w nowej karcie)Perplexity (otwiera się w nowej karcie)Claude (otwiera się w nowej karcie)