Alt tekst obrazów: co to jest i jak go pisać

Ułatw dostęp do swojej treści zarówno robotom wyszukiwarek, jak i osobom korzystającym z programów czytających z ekranu, używając atrybutu Alt.

W tym artykule dowiesz się o tekście alternatywnym (alt text): co to jest, dlaczego jest ważny dla SEO, jak go prawidłowo używać i wiele więcej!

Jest to bardzo praktyczny i precyzyjny przewodnik, zawierający porady i zalecenia, które możesz od razu zastosować, aby poprawić optymalizację SEO i dostępność swojej witryny.

Co to jest Alt tekst?

Alt tekst (lub w pełnej wersji – tekst alternatywny), znany również jako atrybut alt lub tag alt (co technicznie jest nieprawidłowe, ponieważ nie jest to tag), to po prostu fragment tekstu opisującego obraz w kodzie HTML.

Jakie jest zastosowanie tekstu alternatywnego?

Pierwotną funkcją tekstu alternatywnego było po prostu opisanie obrazu, który nie mógł zostać załadowany.

Wiele lat temu, gdy Internet był znacznie wolniejszy, tekst alternatywny pomagał dowiedzieć się, co zawiera obraz, który był zbyt „ciężki” do załadowania w przeglądarce.

Tekst alt dla obrazów:

Dziś obrazy rzadko się nie ładują, ale jeśli tak się stanie, zobaczysz tekst alternatywny zamiast obrazu.

Obecnie tekst alternatywny zaczął również odgrywać rolę zarówno dla botów wyszukiwarek, jak i dla osób korzystających z programów czytających z ekranu:

• Tekst alternatywny pomaga osobom niepełnosprawnym (np. korzystającym z programów czytających z ekranu) dowiedzieć się, co zawiera obraz.
• Tekst alternatywny pomaga również robotom wyszukiwarek zrozumieć zawartość i kontekst obrazu.
• Oczywiście, jak każdy element SEO, często jest on zaniedbywany, a w niektórych przypadkach nawet nadużywany.

Przyjrzyjmy się teraz bliżej, dlaczego tekst alternatywny jest tak ważny.

Dlaczego Alt tekst jest taki ważny

Internet i strony internetowe to bardzo wizualne doświadczenie. Trudno znaleźć stronę bez obrazów lub elementów graficznych.

Oto dlaczego tekst alternatywny jest tak ważny.

Tekst alternatywny pomaga przetłumaczyć zawartość obrazu na słowa, czyniąc go dostępnym dla szerszej publiczności, w tym osób niepełnosprawnych i robotów wyszukiwarek, które jeszcze nie są wystarczająco inteligentne, aby w pełni zrozumieć każdy obraz, jego kontekst i znaczenie.

Dlaczego tekst Alt jest ważny dla SEO

Tekst alternatywny jest ważnym elementem optymalizacji SEO na stronie.

Prawidłowa optymalizacja tekstu alternatywnego zwiększa szanse Twojej strony na pozycjonowanie w wyszukiwarce obrazów Google.

Tak, tekst alternatywny jest czynnikiem rankingowym w wyszukiwarce obrazów Google.

W zależności od branży i specyfiki Twojej strony, ruch z wyszukiwarki obrazów Google może odegrać ogromną rolę w ogólnym sukcesie Twojej witryny.

Na przykład w przypadku sklepów internetowych, użytkownicy bardzo często zaczynają wyszukiwanie produktów od wyszukiwarki obrazów Google, zamiast wpisywać nazwę produktu w standardowej wyszukiwarce Google.

Google i inne wyszukiwarki mogą wyświetlać mniej obrazów produktów (lub nie wyświetlać ich wcale), jeśli nie zadbasz o optymalizację ich tekstu alternatywnego.

Bez właściwej optymalizacji obrazów możesz stracić wiele potencjalnego ruchu i klientów.

Dlaczego tekst Alt jest ważny dla dostępności

Widoczność w wyszukiwarce obrazów Google jest bardzo ważna, ale jest jeszcze ważniejsza kwestia: dostępność.

Na szczęście w ostatnich latach poświęcono więcej uwagi dostępności (tj. dostępności Internetu dla wszystkich, w tym osób niepełnosprawnych i/lub korzystających z programów czytających z ekranu).

Załóżmy, że Twój tekst alternatywny obrazów rzeczywiście opisuje ich zawartość, a nie na przykład słowa kluczowe. W takim przypadku pomagasz osobom, które nie mogą zobaczyć tego obrazu, lepiej zrozumieć jego zawartość oraz cały kontekst strony.

Wyobraź sobie, że jedna z Twoich stron jest przewodnikiem po audycie SEO, zawierającym zrzuty ekranu z różnych narzędzi skanujących.

Czy nie byłoby lepiej opisać zawartość każdego zrzutu ekranu zamiast umieszczać ten sam tekst „audyt SEO” w każdym obrazie?

Przyjrzyjmy się kilku przykładom.

Przykłady tekstu Alt

Nie jest trudno znaleźć wiele dobrych i złych przykładów tekstu alternatywnego. Pozwól mi pokazać Ci kilka z nich, nawiązując do powyższego przykładu przewodnika po audycie SEO.

Dobre przykłady tekstu Alt

Nasz przykładowy przewodnik SEO zawiera zrzuty ekranu z takich narzędzi jak Google Search Console.

Niektóre dobre przykłady tekstu alternatywnego mogą obejmować:

<img src="google-search-console-coverage-report.jpg" alt="Raport zasięgu w Google Search Console, który pokazuje liczbę zindeksowanych i wykluczonych stron">

<img src="google-search-console.jpg" alt="Narzędzie Google Search Console od Google">

Porada: Warto również zadbać o nazwę pliku. Używanie nazw opisowych nie jest czynnikiem rankingowym, ale polecam to jako dobrą praktykę SEO.

Przykłady złego i/lub spamującego tekstu alternatywnego

Istnieje wiele przykładów niewłaściwego użycia tekstu alternatywnego, w tym wykorzystywania słów kluczowych lub spamu.

Oto jak możesz zamienić powyższe dobre przykłady w złe:

<img src="google-search-console-coverage-report.jpg" alt="darmowy audyt pozycjonowania, tani audyt pozycjonowania, specjalista ds. audytu pozycjonowania, audyt pozycjonowania, darmowa optymalizacja seo">

<img src="google-search-console.jpg" alt="google seo, google, google, seo, google search console seo">

Jak widzisz, powyższe przykłady nie wnoszą żadnych informacji na temat tego, co tak naprawdę pokazują te obrazy.

Więcej przykładów i porad dotyczących optymalizacji obrazów możesz znaleźć w Google Search Central.

Częste błędy w tekstach alternatywnych

Dodawanie słów kluczowych do tekstu alternatywnego nie jest jedynym błędem, którego możesz się dopuścić.

Oto kilka przykładów częstych błędów w tekstach alternatywnych:

• Nieużywanie tekstu alternatywnego lub używanie pustego tekstu alternatywnego.
• Używanie tego samego tekstu alternatywnego dla różnych obrazów.
• Używanie bardzo ogólnego tekstu alternatywnego, który tak naprawdę nie opisuje obrazu. Na przykład użycie tekstu alternatywnego „pies” na zdjęciu psa zamiast bardziej szczegółowego opisu psa, jego umaszczenia, co robi, jakiej jest rasy itp.
• Automatyczne używanie nazwy pliku jako tekstu alternatywnego, co może prowadzić do bardzo nieczytelnego tekstu alternatywnego, takiego jak „googleseachconsole”, „google-search-console” lub „photo123”, w zależności od nazwy pliku.

Porady dotyczące pisania tekstu alternatywnego

Na koniec oto wskazówki, jak napisać właściwy tekst alternatywny, aby rzeczywiście wypełniał swoje zadanie:

• Nie dodawaj słów kluczowych do tekstu alternatywnego. Nie pomoże to w pozycjonowaniu Twojej strony na te pozycje.
• Szczegółowo opisz obraz, ale niech będzie relatywnie zwięzły. Unikaj dodawania kilku zdań do tekstu alternatywnego.
• Używaj docelowych słów kluczowych, ale w naturalny sposób, jako część opisu obrazu. Jeśli Twoje docelowe słowo kluczowe nie pasuje do opisu obrazu, nie używaj go.
• Nie używaj tekstu na obrazach. Cały tekst powinien być dodany w formie kodu HTML.
• Nie pisz „to jest obraz”. Google i użytkownicy wiedzą, że to obraz. Po prostu opisz jego zawartość.
• Upewnij się, że możesz zwizualizować zawartość obrazu, po prostu czytając jego tekst alternatywny. To najlepsze ćwiczenie, aby upewnić się, że Twój tekst alternatywny jest w porządku.

Jak sprawdzić, czy strona używa tekstu alternatywnego

Teraz znasz już wszystkie najlepsze praktyki i częste błędy tekstu alternatywnego. Ale jak tak naprawdę sprawdzić, co znajduje się w tekście alternatywnym obrazów na stronie?

Tekst alternatywny można analizować w następujący sposób:

Inspekcja elementu (kliknij prawym przyciskiem i wybierz „Zbadaj”. Jeśli nie widzisz wybranego elementu w konsoli, możesz zrobić następującą rzecz, nie zamykając konsoli, naciśnij Ctrl+Shift+C i najedź kursorem na obraz) – dobry sposób, aby sprawdzić, czy dany obraz ma tekst alternatywny.

Jeśli jednak chcesz to zrobić masowo, polecam wypróbowane narzędzie!

Zainstaluj wtyczkę Web Developer dla przeglądarki Chrome (jeśli z niej korzystasz).

Następnie otwórz stronę, której obrazy chcesz sprawdzić.

Naciśnij „Web Developer„, a następnie przejdź do „Obrazy” > „Pokaż atrybuty alt„. W ten sposób możesz zobaczyć zawartość tekstu alternatywnego wszystkich obrazów na tej stronie.

Lub użyj alternatywnej wersji wtyczki Web Developer dla Mozzila Firefox.

Wnioski

Tekst alternatywny (alt text) dla obrazów odgrywa kluczową rolę zarówno w optymalizacji SEO, jak i zapewnianiu dostępności strony internetowej. Jako obowiązkowy atrybut w kodzie HTML służy on do opisywania zawartości obrazów słowami. Ma to dwa główne cele – umożliwia botom wyszukiwarek zrozumienie kontekstu obrazu, a także ułatwia percepcję osobom niewidomym lub niedowidzącym korzystającym z czytników ekranu.

Odpowiednio zoptymalizowany alt tekst może zwiększyć szanse na wyższe pozycje w wyszukiwarce obrazów Google, co jest szczególnie istotne dla branży e-commerce. Z drugiej strony, niedopracowane lub spamujące opisy obrazów mogą przynieść więcej szkody niż pożytku.

FAQ