Co to jest Atrybut ALT?

Zobacz kurs SEO w formie e-booka, który krok po kroku pokazuje jak pozyskiwać klientów z Google. Dowiesz się z niego, jak zaplanować i wdrożyć stronę nastawioną na pozyskiwanie klientów z wyszukiwarek.

Jak roboty indeksujące używają atrybutu ALT?

Roboty indeksujące, takie jak te używane przez wyszukiwarki (np. Google), skanują i analizują zawartość stron internetowych, aby lepiej zrozumieć ich treść i poprawnie indeksować je w wynikach wyszukiwania. Atrybut „alt” odgrywa w tym procesie ważną rolę z kilku powodów:

1. Zrozumienie zawartości obrazów: Roboty indeksujące nie potrafią „patrzeć” na obrazy w taki sposób, jak ludzie. Zamiast tego polegają na tekstowych opisach dostarczonych w atrybucie „alt”, aby zrozumieć, co obraz przedstawia.
2. Wspomaganie rankingu: Jeśli obrazek na stronie jest odpowiednio opisany za pomocą atrybutu „alt”, może to pomóc stronie uzyskać wyższą pozycję w wynikach wyszukiwania, zwłaszcza gdy ktoś szuka konkretnego obrazu lub informacji związanej z tym obrazem.
3. Poprawa dostępności: Wyszukiwarki doceniają strony, które są bardziej dostępne i użytkowe dla szerokiej gamy użytkowników, w tym osób niewidomych lub niedowidzących. Poprawnie używany atrybut „alt” może przyczynić się do lepszej oceny strony pod względem dostępności.
4. Kompensacja za błędy ładowania: W przypadku, gdy obraz nie zostanie poprawnie załadowany, tekst z atrybutu „alt” jest wyświetlany w miejscu obrazka. Roboty indeksujące będą w stanie wciąż „widzieć” ten tekst, nawet jeśli obrazek jest niedostępny.

Aby uzyskać jak najlepsze rezultaty z atrybutu „alt”, warto zapewnić, że jest on krótki, ale dokładny, i że dobrze opisuje obraz, do którego jest przypisany.

Jak dodać atrybut ALT do grafiki?

Dodanie atrybutu alt do obrazka w HTML jest proste. Atrybut ten jest umieszczany wewnątrz tagu <img>.

Oto jak to zrobisz:

Podstawowa składnia:

<img src="adres-do-twojego-obrazka.jpg" alt="Krótki opis obrazka">

W miejsce „adres-do-twojego-obrazka.jpg” wstaw ścieżkę do twojego obrazka, a w miejsce „Krótki opis obrazka” dodaj opis tego, co jest na obrazku.

Przykład: Jeśli masz obrazek kota i chcesz dodać atrybut alt, to może to wyglądać tak:

<img src="kot.jpg" alt="Szary kot siedzący na kanapie">

Kilka ważnych wskazówek:

• Upewnij się, że opis w atrybucie alt jest odpowiedni i dokładny. Jeśli obrazek jest czysto dekoracyjny i nie dodaje wartości dla użytkownika, możesz zostawić atrybut alt pusty (np. alt=""), ale nadal warto go dodać, by wskazać, że pusty opis był zamierzony.
• Staraj się unikać niepotrzebnych informacji w atrybucie alt, takich jak „obrazek przedstawia…”. Zamiast tego skup się na krótkim i zwięzłym opisie.

Dodawanie atrybutu alt jest ważne nie tylko dla SEO, ale również dla dostępności, pomagając osobom korzystającym z czytników ekranu zrozumieć zawartość obrazka.

Jaka powinna być treść atrybutu ALT?

Treść atrybutu alt powinna być dokładnym i zwięzłym opisem obrazka, który pomoże użytkownikowi (szczególnie tym korzystającym z czytników ekranu) oraz robotom wyszukiwarek zrozumieć, co przedstawia obraz. Oto kilka wskazówek dotyczących tworzenia dobrego opisu w atrybucie alt:

1. Dokładny opis: Opisz to, co faktycznie przedstawia obraz, tak aby osoba, która nie widzi tego obrazka, mogła zrozumieć jego zawartość.
2. Zwięzłość: Staraj się być jak najbardziej zwięzłym, unikając niepotrzebnych słów. Atrybut alt nie powinien być długim zdaniem, chyba że jest to konieczne do prawidłowego opisania obrazka.
3. Unikaj fraz typu „obrazek z…”: Zamiast pisać „Obrazek przedstawiający psa”, po prostu napisz „Pies”.
4. Dekoracyjne obrazy: Jeśli obrazek jest czysto dekoracyjny i nie niesie żadnej wartości informacyjnej, warto użyć pustego atrybutu alt (alt=""). Dzięki temu czytniki ekranu pomijają taki obrazek, nie czytając jego opisu.
5. Elementy graficzne z tekstem: Jeśli obrazek zawiera tekst (np. przycisk z napisem lub logo z nazwą firmy), treść atrybutu alt powinna dokładnie odzwierciedlać ten tekst.
6. Złożone grafiki: Dla obrazów takich jak wykresy czy grafiki przedstawiające złożone informacje, dostarczenie pełnego opisu może być trudne w ramach atrybutu alt. W takich przypadkach warto rozważyć dodanie dłuższego opisu w innej części strony lub udostępnienie alternatywnej wersji treści.
7. Unikaj nadużywania słów kluczowych: Chociaż atrybut alt jest ważny z punktu widzenia SEO (optymalizacji pod wyszukiwarki), unikaj wstawiania do niego nadmiernej ilości słów kluczowych. Powinien on przede wszystkim służyć użytkownikom, a nie tylko robotom wyszukiwarek.

Pamiętaj, że głównym celem atrybutu alt jest zwiększenie dostępności strony. Dzięki niemu osoby korzystające z czytników ekranu oraz te, które z jakiegoś powodu nie mogą zobaczyć obrazka (np. z powodu błędów ładowania), będą wiedziały, co przedstawia dany obraz.

Jak dodawać atrybut ALT w systemach CMS?

Dodawanie atrybutu alt dla obrazów w systemach CMS (Content Management System, czyli Systemy Zarządzania Treścią) zależy od konkretnego systemu, z którego korzystasz. Niemniej jednak, większość popularnych systemów CMS umożliwia łatwe dodawanie tego atrybutu za pomocą intuicyjnych interfejsów użytkownika. Poniżej przedstawiam krótkie instrukcje dla kilku popularnych systemów CMS:

1. WordPress:
   • W Edytorze postów lub stron, kliknij na obrazek, który chcesz edytować.
   • Wybierz opcję „Edytuj” (często przedstawioną w postaci ołówka).
   • Znajdź pole „Tekst alternatywny” lub „Alt” i wpisz swój opis.
   • Kliknij „Aktualizuj” lub „Zastosuj”, aby zapisać zmiany.
2. Joomla:
   • Podczas dodawania lub edytowania artykułu, kliknij w ikonę „Wstaw/edytuj obrazek”.
   • Znajdziesz tam pole „Opis obrazka”, gdzie możesz wpisać tekst dla atrybutu alt.
   • Kliknij „Wstaw” lub „Aktualizuj”, aby zatwierdzić zmiany.
3. Drupal:
   • W edytorze treści, gdy dodajesz nowy obraz, powinno być pole o nazwie „Tekst alternatywny”. Wpisz tam opis obrazka.
   • Jeśli edytujesz istniejący obrazek, po prostu kliknij na niego i znajdź opcję edycji „Tekstu alternatywnego”.
4. Wix:
   • Kliknij na obrazek na swojej stronie, aby go zaznaczyć.
   • W prawym dolnym rogu pojawi się ikona „Ustawienia” lub „Edytuj”.
   • Znajdź pole „Tekst alternatywny” i wprowadź odpowiedni opis.
5. Squarespace:
   • Kliknij na obrazek, który chcesz edytować.
   • Kliknij ikonę „edytuj” lub podobny przycisk.
   • Znajdź sekcję „Tekst alternatywny” lub „Opis” i wprowadź swój opis.

Dla innych systemów CMS oraz niestandardowych konfiguracji proces ten może się różnić. Zawsze warto zajrzeć do dokumentacji danego systemu CMS lub poszukać wskazówek online, jeśli nie jesteś pewien, jak dodać atrybut alt w swoim konkretnym środowisku.