ALT to atrybut znacznika <img>, jest elementem języka HTML odpowiadającym na wyświetlanie opisu alternatywnego grafiki osadzonej na stronie. Zgodnie z dobrymi zasadami tworzenia witryn internetowych, powinien być stosowany przez twórców przy każdym osadzeniu elementu graficznego w kodzie HTML. Powszechnie wykorzystywany przez specjalistów SEO, w celu optymalizacji grafik. Google w swoich wytycznych uwzględnia go jako istotny element tego procesu. Jego zadaniem jest przekazanie zasadniczych i precyzyjnych informacji o tematyce dołączonej grafiki lub fotografii robotom indeksującym wyszukiwarek oraz osobom, które nie mogą zobaczyć obrazka.
Spis treści:
- Co to jest atrybut ALT?
- Atrybut ALT a osoby niewidome
- Atrybut ALT a roboty indeksujące
- Użycie ALT na stronie
- Jak poprawnie stosować atrybuty ALT?
- Jak powinien być zbudowany atrybut ALT?
- Przykłady atrybutów ALT
- Czy atrybut ALT wpływa na pozycjonowanie?
- Kiedy tekst alternatywny jest widoczny?
- Kiedy atrybut ALT nie jest potrzebny?
- Atrybut ALT w sklepie internetowym
- Atrybut ALT na Facebooku
- Podsumowanie
Co to jest atrybut ALT?
Atrybut ALT pełni funkcję opisu zdjęć na stronie internetowej i informuje o zawartości grafiki. Jest umieszczany wewnątrz znacznika obrazu i stanowi ważny element struktury witryny. Jego głównym zadaniem jest dostarczanie robotom indeksującym informacji na temat treści obrazu, co ma duże znaczenie z perspektywy optymalizacji SEO. Jeżeli z jakiegoś powodu obrazek nie może zostać wyświetlony, to użytkownikowi zostanie zaprezentowany tekst alternatywny.
Atrybut ALT a osoby niewidome
Atrybut ALT jest szczególnie pomocny dla osób z poważnymi problemami wzroku lub niewidomych. Osoby z niepełnosprawnościami często korzystają z przeglądarek internetowych z funkcją odczytu treści na głos. Dlatego ważne jest, aby dołączyć prosty i klarowny tekst alternatywny do każdej umieszczonej grafiki.
Według danych udostępnionych przez portal gov.pl, w Polsce liczba osób z niepełnosprawnością wzroku przekracza 3 miliony, które mają oficjalne potwierdzenie swoich dysfunkcji. Jednak w rzeczywistości ta liczba jest znacznie większa i szacuje się, że wynosi od 4 do 7 milionów osób. Z kolei według raportu Światowej Organizacji Zdrowia (WHO) na całym świecie ponad 2,2 miliarda ludzi cierpi na różnego rodzaju zaburzenia widzenia. Mimo przeciwności losu, każdego dnia osoby niedowidzące korzystają z zasobów Internetu. W tym miejscu może nasuwać się pytanie – jak oni to robią?
Atrybuty ALT są z zasady niewidoczne dla użytkownika, istnieją jednak pewne wyjątki. Opisy alternatywne zostaną wyświetlone, gdy grafika nie będzie mogła zostać załadowana z serwera (np. w przypadku błędu po stronie użytkownika). Wówczas atrybut ALT zastąpi obraz i pozwoli zrozumieć internaucie, co znajduje się na stronie.
Osoby z wadami wzroku korzystają z technologii wspomagających, aby móc przeglądać treści online. Programy do czytania stron internetowych na głos wykorzystują atrybuty ALT, aby odczytać opisy obrazów, co umożliwia im pełniejsze doświadczenie Internetu. Dzięki tekstom alternatywnym osoby te mogą zrozumieć, jakie informacje zawarte są na zdjęciach, które nie są dostępne dla nich wizualnie. To kolejny ważny powód, dla którego warto zadbać o właściwe wykorzystanie atrybutów ALT na stronach internetowych.
Atrybut ALT a roboty indeksujące
Atrybut ALT pomaga robotom indeksującym skutecznie odnaleźć i przeanalizować obrazy na stronach internetowych. W przypadku elementów HTML <img>, a także innych zagnieżdżonych w nich elementów, jak np. elementy <picture>, semantyczne znaczniki są wykorzystywane przez roboty, zwłaszcza te należące do wyszukiwarki Google, aby właściwie indeksować obrazy. Dzięki temu obrazy mogą być odnajdywane przez użytkowników w wynikach wyszukiwania.
Roboty indeksujące nie indeksują obrazów osadzonych w CSS, więc ważne jest, aby obrazy były zawarte w elemencie HTML <img>. Optymalizacja atrybutu ALT jest istotna, ponieważ pozwala ona lepiej zrozumieć zawartość obrazu i zapewnia dodatkową informację dla robotów. Opis obrazu w atrybucie ALT powinien być adekwatny i opisowy, aby zapewnić maksymalną wartość dla wyszukiwarki i użytkowników.
Użycie ALT na stronie
Atrybut ALT to część kodu HTML. Jego prawidłowa struktura powinna wyglądać następująco:
<img src=”adres_grafiki.jpg” alt=”Tu znajdzie się tekst opisujący obrazek”/>
Błędem jest niezamieszczanie żadnego opisu alternatywnego. Niedodanie atrybutu ALT utrudni wyszukiwarce skuteczną interpretację i indeksowanie obrazka. Poniżej znajduje się przykład pustego ALT tag:
<img src=”adres_grafiki.jpg” alt=” ”/>
Atrybut ALT powinien zawierać główne słowo kluczowe związane z treścią grafiki. Jest to istotne z perspektywy jej identyfikacji przez potencjalnych klientów w wyszukiwarce Google. Nie należy w tym miejscu dodawać po przecinku kilku fraz kluczowych, ponieważ może to wyglądać na spam, a tym samym przynieść efekt odwrotny od zamierzonego. W tekście alternatywnym można używać polskich znaków oraz dostarczyć szczegółowy opis obrazka, aby umożliwić czytelnikom zrozumienie jego treści. Natomiast w przypadku podpisywania grafik i umieszczania ich na serwerze, wymagane jest opisywanie plików graficznych bez polskich znaków. Zaleca się tworzenie unikalnych i opisowych atrybutów ALT dla każdego obrazka na stronie, które adekwatnie opisują jego zawartość.
Jak poprawnie stosować atrybuty ALT?
Tekst alternatywny jest istotny dla odpowiedniej optymalizacji, w związku z tym warto stosować się do pewnych zasad:
- Zaleca się zachowanie zwięzłości i treściwości opisu, unikanie ogólnych opisów oraz dostarczenie jak najwięcej szczegółów. Opis powinien być krótki i zawierać się w kilku słowach, bez pełnych zdań.
- Zalecany jest umiar w liczbie dodawanych do opisu słów kluczowych.
- Fraza kluczowa tekstu alternatywnego powinna być zgodna z treścią wyświetlaną na stronie z tym obrazem.
- Główną frazę kluczową należy umieszczać na początku opisu, zachowując jednak naturalność i czytelność.
- Każdy obraz zamieszczony na stronie powinien posiadać unikalny tekst alternatywny,
- Warto zwracać uwagę na tekst alternatywny w witrynach, gdzie znajduje się mało tekstu,
- W atrybutach ALT dopuszcza się korzystanie z polskich znaków diakrytycznych.
Należy pamiętać, że grafiki, do których tworzy się opis ALT, powinny być zoptymalizowane do odpowiednich rozmiarów, aby nie spowalniały witryny internetowej.
Jak powinien być zbudowany atrybut ALT?
Atrybut ALT powinien składać się ze słowa kluczowego, które nawiązuje do nagłówka artykułu i tekstu alternatywnego. Optymalna długość atrybutu powinna liczyć 80-110 znaków ze spacjami. Pisanie dłuższych tekstów może spowodować, że czytniki dla osób niepełnosprawnych będą skracać treść, dlatego warto trzymać się tej rekomendowanej długości, aby zapewnić czytelność. Jeśli treść nie będzie wnosiła nic pożytecznego, warto popracować nad jej formą i umieścić wartościowe informacje, które przyciągną uwagę czytelnika.
Przykłady atrybutów ALT
Tworząc tekst alternatywny, należy używać prostego języka i trzymać się tematyki zdjęcia, czyli opisywać tylko i wyłącznie to, co jest widoczne na grafice. Atrybut ALT powinien być nieskomplikowany, a przede wszystkim zrozumiały dla odbiorcy. Warto więc pamiętać o tym, by:
- Nie oddzielać słów dywizami ani twardymi spacjami np. „Usmiechnieta-kobieta-w-pokoju”, a lepiej użyć sformułowania, jak w zwykłym zdaniu, czyli: „Uśmiechnięta kobieta w pokoju”.
- Nie stosować kumulacji słów kluczowych oddzielonych przecinkami lub spacją, np. zamiast: „Duże miasto, zachód słońca, korki, światło lamp”, lepiej napisać: „Zakorkowane miasto na tle zachodzącego słońca”.
- Nie opisywać szczegółowo pliku zdjęciowego, pisać bez zbędnej nadinterpretacji. Na przykład, zamiast „Znajdujący się po lewej stronie czarny pies i rudy kot po prawej stronie, próbują się bawić na zielonej łące pełnej żółtych kwiatów”, lepiej sformułować tekst alternatywny w ten sposób: „Czarny pies i rudy kot bawią się na łące pełnej kwiatów”.
- Skupiać się na tym, co faktycznie jest widoczne na grafice. Np. „Nowoczesny biurowiec dla urzędników”.
- Zmieniać nazwę plików zgranych z aparatu fotograficznego lub smartfona. Nazwa w stylu „IMG_012345.jpg” nie przekazuje żadnej informacji robotom indeksującym lub czytnikom ekranów. Warto zmienić nazwę na coś bardziej opisowego, np. „prezydent-miasta-rzeszow”, a następnie sformułować odpowiedni tekst alternatywny: „Prezydent Miasta Rzeszów rozpoczyna konferencję i mówi do mikrofonu”.
Czy atrybut ALT wpływa na pozycjonowanie?
Atrybut ALT podnosi pozytywne doświadczenia użytkowników strony, dlatego można stwierdzić, że wpływa na pozycjonowanie. Nie jest to oficjalne stwierdzenie developerów z Mountain View (siedziba Google), ale jedna z wielu składowych SXO (Search Experience Optimization). W związku z tym, w poprawie optymalizacji każdy plik graficzny powinien być zaopatrzony w unikatowy tekst alternatywny, zawierający słowa kluczowe.
Kiedy tekst alternatywny jest widoczny?
Atrybut ALT zazwyczaj nie jest widoczny na stronie internetowej. W sytuacji, gdy zawartość witryny nie jest w stanie załadować się poprawnie, naszym oczom może ukazać się tekst alternatywny. W takiej sytuacji grafikę zastąpi treść i będziemy mogli przeczytać, co powinno znajdować się na niewyświetlonym obrazie. Jeśli użytkownik korzysta z programów dla osób niedowidzących, wtedy również atrybut ALT ujrzy światło dzienne. To właśnie z tych powodów warto zadbać o ciekawy i dokładny znacznik alternatywny.
Kiedy atrybut ALT nie jest potrzebny?
Istnieją sytuacje, kiedy atrybut ALT nie jest możliwy do dodania na stronie. Przykładem takiej sytuacji jest umieszczenie obrazu nie w pliku HTML, ale w pliku kaskadowych arkuszy styli CSS. Jednak istnieją także sytuacje, w których nie warto dodawać tekstu alternatywnego do obrazka. Przykładem może być grafika, która pełni jedynie rolę stricte dekoracyjną i nie jest istotna w kontekście struktury witryny oraz nie będzie wpływać na wyświetlanie się w wynikach wyszukiwania.
Jednak zgodnie ze specyfikacją HTML, zamieszczoną na stronie w3schools.com, atrybut ALT ten jest wymagany dla znacznika <img>. Dlatego atrybut ALT może znaleźć swoje zastosowanie w następujących elementach na stronie:
- we wpisach blogowych,
- logach, banerach reklamowych i ilustracjach na stronie głównej,
- grafikach w treści artykułów,
- zdjęciach produktowych w sklepie internetowym,
- linkach osadzonych w grafice,
- przyciskach CTA,
- mapach i wykresach,
- menu nawigacyjnym,
- galerii zdjęć.
Atrybut ALT w sklepie internetowym
Sklepy internetowe często zawierają dużą liczbę podstron i grafik. W tym przypadku nie można zapomnieć o dodaniu do zdjęć atrybutów ALT. Platformy, które dostarczają oprogramowanie sklepu online, są wyposażone w mechanizmy pozwalające na automatyczne uzupełnianie tekstów alternatywnych. Mowa tu o m.in. Shoplo, Shoper czy Sky-Shop. Dzięki takiemu rozwiązaniu można zoptymalizować grafiki w stosunkowo krótkim czasie. Dodanie znacznika ALT jest szczególnie ważne dla właścicieli sklepów oferujących odzież, kosmetyki czy dekoracje. Konsumenci wyszukują te produkty po ich określonych cechach. Jest to ważne również wtedy, gdy chcemy, by zdjęcia naszych produktów były prawidłowo wyświetlane w Google Grafika. Dodanie atrybutu ALT może przyczynić się do wygenerowania ruchu na stronie, a co za tym idzie – do zwiększenia konwersji.
Atrybut ALT na Facebooku
Facebook to obecnie jeden z najpopularniejszych portali społecznościowych na świecie. Już w 2016 roku wprowadził funkcję automatycznego dodawania tekstów alternatywnych do grafik. Mowa tu o Automatic Alternative Text (ATT). Dla osób, które korzystają z czytnika ekranu, jest to bardzo pomocne udogodnienie. W jaki sposób to działa? Podczas ładowania zawartości witryny, sztuczna inteligencja rozpoznaje, co znajduje się na zdjęciu. Ponadto, jeśli na pliku graficznym znajduje się napis, to zostanie on automatycznie dopisany do tekstu alternatywnego. W związku z tym można skorzystać z podpowiedzi systemu lub samemu uzupełnić pole niestandardowym atrybutem ALT. Jeśli to miejsce pozostawimy puste, to zdjęcie zamieszczone na stronie nie będzie identyfikowane. Opcja ATT działa także na Instagramie i potrafi rozpoznać ponad 1200 detali zamieszczonych na zdjęciu. Warto w tym miejscu wspomnieć, że narzędzie to stworzył niewidomy inżynier Matt King, który od urodzenia zmaga się z barwnikowym zwyrodnieniem siatkówki.
Podsumowanie
Jeśli posiadamy stronę lub sklep internetowy, powinniśmy zadbać o atrakcyjne grafiki, które pozytywnie wpłyną na odbiór biznesu. Jednocześnie powinniśmy pamiętać o poprawnym oznaczeniu nazwy pliku ze zdjęciem, optymalizacji zdjęcia, a także uzupełnieniu opisu ALT. Odpowiednio dobrane, zoptymalizowane i opisane zdjęcia pomogą w zwiększeniu widoczności oraz pozyskaniu nowych klientów. Warto o to zadbać głównie dlatego, że dużo osób wyszukuje produkty w wyszukiwarce Google Grafika. Odpowiednio zoptymalizowane zdjęcia, podnoszą więc szansę na przyciągnięcie większej liczby potencjalnych klientów.
