Co to jest alt tekst?

Alt text to dodatkowy atrybut obrazów i niektórych innych elementów multimedialnych na stronie internetowej. Zawiera krótki opis obrazu, który daje wyobrażenie o jego zawartości i znaczeniu dla funkcjonalności strony. Nazywany jest również atrybutem alternatywnym, wyjaśnieniem lub tagiem alt, chociaż ten ostatni termin jest technicznie niepoprawny. 

Tekst alternatywny jest wpisywany w kodzie HTML lub w ustawieniach systemu zarządzania treścią. Zazwyczaj jest on niewidoczny dla użytkownika. Najczęściej element ten pojawia się w interfejsie, gdy przeglądarka nie może załadować elementów multimedialnych z powodu awarii serwera lub wolnego połączenia internetowego.

Tekst alternatywny jest również używany jako narzędzie dostępności i integracji. To właśnie tekst jest odczytywany przez narzędzie zamiany tekstu na mowę w celu opisania obrazu dla użytkownika niedowidzącego. Jeśli masz jakieś doświadczenie w SEO, rozumiesz, że jest to bardzo ważny czynnik dla wyszukiwarek. 

Dlaczego alt text jest tak ważny?

Jednym z najczęstszych błędów popełnianych przez początkujących SEO jest całkowite zapominanie o tekście. Wydaje się to mało istotne, ale może powodować poważne problemy, zwłaszcza jeśli witryna zbudowana jest wokół treści multimedialnych. Przyjrzyjmy się mechanizmom wpływu tego elementu na optymalizację pod kątem wyszukiwarek.

Inkluzywność

Jednym z priorytetów nowoczesnych wersji wyszukiwarek jest zapewnienie wszystkim użytkownikom jednakowych możliwości dostępu do Internetu. Roboty automatycznie zwiększają ranking stron internetowych dostosowanych do potrzeb osób niepełnosprawnych. Tekst alternatywny jest jednym z kluczowych narzędzi służących włączeniu osób niedowidzących.

Pozwala on uzyskać wszystkie potrzebne informacje za pomocą syntezy mowy. Można więc wyciągnąć z tego pierwszy wniosek: opis alternatywny powinien być krótki, ale jak najbardziej treściwy.

Doświadczenie użytkownika (UX)

Chociaż żyjemy w erze postępu technologicznego, sporadyczne problemy wcale nie zniknęły. Atak hakera, awaria serwera, nagły spadek prędkości Internetu na linii i inne nieoczekiwane zdarzenia mogą zablokować przesyłanie obrazu. Biorąc pod uwagę powszechne wykorzystanie elementów multimedialnych w nowoczesnym Internecie, stawia to użytkownika w niezręcznej sytuacji.

Wyobraź sobie sytuację: przyciski logowania i rejestracji na stronie głównej Twojej witryny zniknęły. Jest to nieprzyjemne, ale nadal możesz uratować znaczną część konwersji. Aby to zrobić, musisz poprawnie napisać alt text do obrazów. Zadowoli to zarówno odwiedzających, jak i wyszukiwarkę, co da ci dodatkowe punkty za wrażenia użytkownika. Kolejny wniosek: opis alternatywny powinien być maksymalnie użyteczny i zrozumiały.

Ruch wynikający z wyszukiwania obrazów 

Przypomnij sobie, ile czasu musisz poświęcić na znalezienie wysokiej jakości obrazu, który dokładnie pasuje do tematu Twojego zapytania. Warto jednak przypomnieć sobie nie tylko irytację, ale także radość, gdy niektóre obrazy pojawiają się dosłownie w pierwszym wierszu wyszukiwania Google. 

Wiele zależy właśnie od alt tekstu. Na przykład, opublikowałeś bardzo piękny obraz zachodu słońca nad morzem. Można go opisać na różne sposoby:

1. Zachód słońca nad plażą — dla strony internetowej ze zdjęciami stockowymi.
2. Malowniczy zachód słońca na Florydzie — dla strony informacyjnej.
3. Widok na morze z hotelu — dla zasobu turystycznego. 

Wszystko będzie zależeć od zapytania wyszukiwania, dla którego chcesz wyświetlić obraz. Kolejnym wnioskiem jest to, że opis alternatywny powinien być zgodny z intencją użytkownika.

Jak ważny jest alt text dla SEO?

Potrzeba uczynienia Internetu dostępnym dla każdego na planecie została zapisana w protokole konferencji W3C w 1999 roku. Autorzy propozycji zalecili dodanie znaczników alt do HTML, aby przekazać istotę obrazu zarówno osobom niepełnosprawnym, jak i użytkownikom z powolnymi połączeniami internetowymi. Element ten przetrwał próbę czasu i jest obecnie uważany za obowiązkowy dla wszystkich zasobów internetowych.

Zapominając lub ignorując tekst alternatywny, wysyłasz sygnał do wyszukiwarek, że nie jesteś zainteresowany inkluzywnością lub doświadczeniem użytkownika. Spowoduje to karę — stracisz kilka punktów w rankingu strony. Mając takie same cechy SEO jak konkurent, uzyskasz niższą pozycję w wynikach wyszukiwania.

W związku z tym będzie to skutkować mniejszym ruchem, niższymi współczynnikami konwersji i zmarnowanym budżetem na optymalizację. Dlatego warto wziąć pod uwagę zalecenia World Wide Web Consortium (W3C). Aby uzyskać większą szansę na sukces w każdej branży, należy pamiętać o dołączeniu tekstu alternatywnego do wszystkich elementów multimedialnych, które tego wymagają.

Jak dodać alternatywny opis do obrazów na stronie?

Chociaż dostępnych jest wiele narzędzi do automatyzacji, niektórzy programiści i webmasterzy wykonują większość swojej pracy ręcznie. Ma to swoje zalety, zwłaszcza jeśli chodzi o szkolenia lub rozwój zawodowy. Dlatego warto wiedzieć, jak dodawać znaczniki alt w HTML.

Zgodnie z zaleceniami W3C należy używać następującej składni:

<img alt=”text”>,

gdzie text — alternatywny opis obrazu. 

Znacznik “alt” jest używany wraz z linkiem do obrazu i limitem jego rozmiaru. Przykład kompletnej linii kodu HTML wygląda następująco:

<img src=”your_image.jpg” alt=”Majestic sunset in California” width=”320″ height=”240″>.

Ważne! Jeśli chcesz stworzyć instrukcję dla interaktywnego elementu, który będzie wyświetlany po najechaniu kursorem na obraz, potrzebujesz tagu “title”. Jego składnia wygląda następująco:

<img title=”text”>. Przy czym “title” nie jest uważany za alternatywę dla “alt”. Jego obecność w żaden sposób nie wpływa na optymalizację SEO. Jedyną korzyścią, jaką zapewnia, jest pozytywne doświadczenie użytkownika.

Jeśli korzystasz z systemu CMS, istnieje wygodniejszy sposób dodawania tekstu alternatywnego do kodu witryny. Przyjrzyjmy się sekwencji działań w popularnych systemach zarządzania treścią.

Jak dodać opis alternatywny w WordPress? 

1. Kliknij obraz lewym przyciskiem myszy, po czym po prawej stronie ekranu pojawi się panel sterowania.
2. Znajdź puste pole oznaczone jako «Image Settings». 
3. Wpisz alt text.
4. Kliknij przycisk “Update” w prawym górnym rogu ekranu.

Jak dodać alternatywny opis w HubSpot?

1. Kliknij obraz lewym przyciskiem myszy. 
2. Kliknij przycisk «Edit image» w formie ołówka. 
3. Znajdź puste pole pod nagłówkiem “Alt text”.
4. Wpisz tekst alternatywny.
5. Kliknij przycisk “Apply” znajdujący się na dole menu podręcznego.

Jak dodać opis alternatywny w Joomla?

1. Kliknij obraz prawym przyciskiem myszy.
2. Naciśnij przycisk «Edit image».
3. W otwartym menu znajdź puste pole obok napisu «Image Description». 
4. Wpisz alt text.
5. Kliknij przycisk “Update” znajdujący się w prawym dolnym rogu. 

Najlepsze porady dotyczące napisania alt-tekstu do obrazów

Sama obecność tego elementu nie daje zasobowi żadnych korzyści. Aby skutecznie wykorzystać tekst alternatywny w SEO, trzeba wiedzieć, jak go poprawnie sformułować. I tutaj przydają się najlepsze rozwiązania doświadczonych optymalizatorów. 

Bądź zwięzły

Inżynierowie W3C zalecają ograniczenie podpisu do 125 znaków ze spacjami. Dłuższe podpisy w przypadku braku obrazu mogą nie renderować się poprawnie. Ponadto wyszukiwarki uznają je za spam i próbę naruszenia zasad uczciwej konkurencji. Tak więc, wydłużając opis alternatywny do obrazu, ryzykujesz pogorszenie wrażeń użytkownika i otrzymanie kary, gdy strona zostanie zindeksowana. 

Pisz na temat

Zapomnij o słowach “obraz”, “zdjęcie”, “pokazano tutaj”, “rysunek” itp. Zajmują one miejsce, ale są ignorowane zarówno przez zwykłych odwiedzających, jak i roboty wyszukiwarek. Pisząc tagi alt, przejdź od razu do rzeczy. Na przykład, zamiast “zdjęcie kota śpiącego na kocu”, użyj frazy “kot śpiący na kocu”.

Mądrze używaj słów kluczowych

Zebrana semantyka przyda się nie tylko do optymalizacji głównej części tekstowego contentu, ale także do pisania opisów alternatywnych. Pamiętaj, aby zawrzeć w nich słowa i frazy kluczowe, ale nie spamuj. Ponadto używaj krótkich fraz bez elementów komercyjnych, takich jak “cena”, “kup” i “zamów”, ponieważ mogą one być również negatywnie postrzegane przez wyszukiwarki. Na przykład “pokoje hotelowe w turystycznej części Ibizy”. Złe przykłady: “pokoje hotelowe w hotelu na Ibizie”, “zarezerwuj pokój hotelowy na Ibizie”. 

Opisz obraz z maksymalną możliwą dokładnością 

Pomyśl o podstawowych scenariuszach, w których używany jest opis alternatywny. Są to albo problemy z ładowaniem obrazu, albo praca z syntezą mowy. Wyobraź sobie, że wyjaśniasz istotę obrazu innej osobie, nie mając przed sobą żadnych środków demonstracji. Stwórz pierwszą wersję opisu, uprość ją, przeczytaj ponownie i spróbuj znaleźć potencjał dla optymalizacji.

Jeśli chodzi o obraz statycznego obiektu, wystarczy go nazwać i podać dwie lub trzy cechy. Dobry przykład tekstu alternatywnego: “czerwona krótka sukienka na cienkich ramiączkach”. Jeśli obraz ma dynamikę, najpierw należy nazwać główny obiekt, a następnie wspomnieć o akcji i miejscu, na przykład: “szary gołąb leci między domami w mieście”.

Koniecznie dodawaj kontekst

Możesz po prostu wskazać, że strona przedstawia mężczyznę w średnim wieku w białej koszuli i marynarce. Jest jednak mało prawdopodobne, że w ten sposób przyciągniesz uwagę użytkowników. Lepiej być bardziej konkretnym: “Elon Musk podczas prezentacji SpaceX”.

Jeśli obraz przedstawia znane osoby, popularne lokalizacje turystyczne, ważne wydarzenia itp., zawsze bądź konkretny i podawaj kontekst, zwłaszcza jeśli chodzi o popularne zapytania, które mogą znacznie zwiększyć ruch do Twojego zasobu. 

Nie ignoruj przycisków funkcyjnych 

Aby zapewnić pozytywne wrażenia użytkownika i dostępność, tekst alternatywny powinien towarzyszyć wszystkim interaktywnym elementom strony, na przykład:

1. Logowanie do profilu osobistego. 
2. Rejestracja.
3. Przechowywanie danych osobowych.
4. Wysyłanie zapytania. 
5. Dokonywanie zakupu. 
6. Dodawanie produktu do “koszyka”. 
7. Zamówienie konsultacji.
8. Informacje zwrotne.

Nawet jeśli pliki multimedialne nie ładują się poprawnie, użytkownik powinien mieć dostęp do wszystkich funkcji za pośrednictwem linków tekstowych ze szczegółowymi opisami.

Sprawdzaj opis kilka razy

Wiedząc, czym jest tekst alternatywny, rozumiesz jego znaczenie dla optymalizacji przez wyszukiwarki. Nie powinien on zawierać żadnych błędów. Wystarczy jedna litera w niewłaściwym miejscu, a serwis syntezy mowy odtworzy opis niepoprawnie, co pogorszy wrażenia użytkownika dla wielu odwiedzających.

Ignoruj opisy niektórych obrazów

Może się to wydawać dziwną radą, ale nie każde zdjęcie wymaga opisu. Wynika to z definicji tego, czym są tagi alt i dlaczego są potrzebne. 

Niektóre obrazy są dodawane do witryny tylko ze względów estetycznych, nie są one bezpośrednio związane z treścią i nie są używane w interfejsie. Eksperci zalecają wstawianie ich za pomocą CSS, a nie HTML — praktyka ta ma pozytywny wpływ na optymalizację pod kątem wyszukiwarek.

Czasami jednak (na przykład ze względu na ograniczenia techniczne konkretnej platformy) trzeba skorzystać z tradycyjnych metod. W takim przypadku inżynierowie W3C zalecają dodanie pustego tagu opisu:

<img alt=” “>. Nie jest to uważane za błąd. Co więcej, systemy zamiany tekstu na mowę ignorują tę uwagę, więc w żaden sposób nie przeszkadza ona użytkownikom niepełnosprawnym.

Przykłady alt tekstów: dobre i złe

Źle: Wieża Eiffla.

Lepiej: Wieża Eiffla, widok z dołu.

Optymalnie: Wieża Eiffla widok z Champ de Mars w pochmurny dzień.

W tym przykładzie alt tekstu nie wystarczy wspomnieć o głównym obiekcie. Istnieją miliony zdjęć wieży Eiffla, więc kilka słów nie wystarczy. Dobrze będzie, jeśli wskażesz kąt, z którego zdjęcie zostało zrobione. A najlepiej dodać kontekst — miejsce, porę dnia i pogodę. Zapewne zgodzisz się, że to ostatnie zdanie pozwala Twojej wyobraźni pracować na pełnych obrotach. 

Źle: laptop.

Lepiej: laptop Microsoft Surface.

Optymalnie: otwarty niebieski laptop Microsoft Surface na marmurowym stole. 

Maksimum informacji. Określ markę i kolor laptopa, jego stan i położenie w przestrzeni. Uwzględnij w opisie alternatywnym wszystko, co pomoże użytkownikowi znaleźć potrzebny produkt w katalogu lub wyszukiwarce. 

Źle: wyszukiwanie słów kluczowych.

Lepiej: wyszukiwanie słów kluczowych w Serpstat.

Optymalnie: raport ruchu, konferencji, złożoności i CPC w narzędziu wyszukiwania słów kluczowych Serpstat.

Warto wiedzieć, co powinno znaleźć się w tagu alt — wszystko, co przyda się użytkownikowi. Jeśli prezentujesz produkt komercyjny, taki jak zestaw narzędzi SEO, postaraj się opisać jego funkcjonalność w krótki, ale szczegółowy sposób. Jeśli jest to produkt fizyczny, uwzględnij wszystkie jego zewnętrzne cechy i właściwości. 

Tekst alternatywny do złożonych obrazów 

Konsorcjum W3C oferuje również zalecenia dotyczące dostępności kluczowych elementów strony internetowej. Podlegają one specjalnym zasadom i powinny być opisywane jako funkcja, a nie treść. 

Ikony 

Powtórz tekst na przycisku lub obrazie instrukcji, który pojawia się po najechaniu na niego kursorem. Na przykład “zostaw kontakty”, “zarejestruj się”, “prześlij zdjęcie” itp. Wyobraź sobie, że korzystasz ze strony internetowej z zamkniętymi oczami, a inna osoba siedząca obok Ci pomaga. Każdy interaktywny element strony powinien mieć zwięzły i jasny opis swojej funkcji.

Obrazki z linkami 

Opisz zawartość strony, na którą użytkownik zostanie przeniesiony po kliknięciu obrazu. Na przykład obrazek z wykrzyknikiem w trójkącie prowadzi do sekcji z produktami promocyjnymi. Wiedząc, czym są tagi alt, oczywistym rozwiązaniem byłoby napisanie “znak wykrzyknika”. Jednak, zamiast tego lepiej wstawić tekst “przejdź do opisu promocji na generatory benzynowe i wybierz produkty z katalogu”.  

Złożone obrazy

Infografiki, wykresy, tabele itp. Eksperci W3C zalecają stosowanie dla nich kombinacji tekstu zwykłego i alternatywnego. Opis alternatywny będzie zawierał tytuł i główną ideę materiału. Szczegóły i wnioski powinny być zawarte w zwykłym akapicie tekstowym na tej samej stronie. 

Należy również unikać obrazów z dużą ilością tekstu. Mogą one być niedostępne dla wielu użytkowników. Jeśli chcesz uzyskać stylowy wygląd strony, użyj wtyczek CMS lub nowoczesnych narzędzi do tworzenia znaczników.

Niewidzialny asystent — alt tekst do obrazów 

Zmierzając w kierunku Web3, społeczność deweloperów tworzy Internet, który jest dostępny dla każdego na planecie, niezależnie od jego cech fizjologicznych, kulturowych, terytorialnych lub innych. Pomagają w tym wyszukiwarki, które priorytetowo traktują strony internetowe spełniające standardy inkluzywności. Dlatego właśnie znaczenie tekstu alternatywnego w SEO trudno przecenić.

Właściwy opis alternatywny do obrazu wzmacnia strategię optymalizacji, zwiększa ruch i poprawia doświadczenia użytkowników. Jeśli o tym zapomnisz lub zignorujesz, ryzykujesz utratę pozycji w wynikach wyszukiwania. Aby uniknąć tego problemu, należy korzystać z wyspecjalizowanych narzędzi do audytu technicznego witryny, takich jak Moz, Serpstat, Ahrefs, Sitechecker i innych popularnych platform marketingu cyfrowego.

Często zadawane pytania 

Co to jest alt tekst? 

Jest to podpis wyświetlany na stronie zamiast obrazu, jeśli przeglądarka nie może załadować elementów multimedialnych. Jest również używany przez narzędzia zamiany tekstu na mowę.

Dlaczego alt tekst do obrazu ma duże znaczenie? 

Zapewnia dostępność dla osób niepełnosprawnych, poprawia UX w niestandardowych scenariuszach i zwiększa ruch dzięki łatwiejszemu wyszukiwaniu obrazów. 

Jak alt tekst wpływa na SEO? 

Brak tego elementu wskazuje na brak dbałości o integrację i doświadczenie użytkownika. Prowadzi to do spadku pozycji strony w wynikach wyszukiwania. 

Jak powinien wyglądać dobry tekst alternatywny?

Opis alternatywny powinien być krótki, ale konkretny. Tworząc go, zapewnij kontekst, unikaj literówek i mądrze używaj słów kluczowych. Opisując przyciski i inne interaktywne elementy, pamiętaj o uwzględnieniu ich funkcji.