Czym jest atrybut alt obrazka? Jak go poprawnie ustawiać?

Atrybuty alt obrazków są ważnym elementem skutecznego pozycjonowania stron internetowych. Właściwe korzystanie z atrybutu alt w kontekście grafik nie tylko pozytywnie wpływa na doświadczenia użytkowników, ale także poprawia widoczność naszej strony w wynikach wyszukiwania. W artykule omówimy, czym jest atrybut alt, dlaczego jest ważny i jak go skonfigurować zarówno w podstawowym kodzie HTML, jak i za pomocą popularnych narzędzi, takich jak WordPress czy Elementor.

Czym jest atrybut alt obrazka?

Atrybut alt (alternatywny) to część kodu HTML obrazka, który jest używany do opisu zawartości obrazka. Tekst ten jest wyświetlany w miejscu obrazka, gdy obrazek nie może być wyświetlony — na przykład, kiedy użytkownik korzysta z czytnika ekranu z powodu problemów ze wzrokiem lub gdy wystąpiły problemy z ładowaniem obrazka.

Dlaczego atrybuty alt obrazków są ważne?

Atrybut alt przy grafikach pełni kilka kluczowych funkcji, które wpływają na optymalizację strony pod kątem wyszukiwarek (SEO), dostępności i doświadczenia użytkownika:

1. Dostępność: Jak wcześniej wspomniano, atrybuty alt są niezwykle ważne dla osób niedowidzących, które korzystają z czytników ekranu. Czytniki te czytają tekst alternatywny, pomagając użytkownikom zrozumieć kontekst i zawartość obrazka.
2. SEO: Wyszukiwarki, takie jak Google, wykorzystują atrybuty alt do lepszego zrozumienia, co jest przedstawione na obrazkach. Dzięki temu mogą one lepiej indeksować obrazki i strony, na których się znajdują, co może wpływać na ich rankingi.
3. Problemy z ładowaniem: Jeżeli z jakiegoś powodu obrazek nie załaduje się poprawnie, tekst alt będzie wyświetlany na stronie, zamiast pustego miejsca. Dzięki temu użytkownicy nadal będą mieli pewne pojęcie o tym, co miało być na obrazku.

Jak ustawić atrybut alt w kodzie HTML?

Dodawanie atrybutu alt do obrazka w HTML jest stosunkowo proste. Wystarczy dodać alt="Twój opis" w tagu img. Poniżej przedstawiamy przykład:

<img src="sciezka-do-obrazka.jpg" alt="Opis obrazka">

Jak ustawić atrybut alt w WordPressie?

Atrybut alt można łatwo dodać do obrazka w WordPressie podczas jego wstawiania na stronę lub post.

1. Po przeciągnięciu i upuszczeniu obrazka lub wybraniu go z biblioteki mediów kliknij na obrazek, aby otworzyć panel z opcjami.
2. W panelu z opcjami zobaczysz pole „Tekst alternatywny”. Wpisz tam swój opis obrazka.
3. Kliknij „Zaktualizuj” lub „Wstaw na stronę”, aby zapisać zmiany.

Ustawienie atrybutu alt z poziomu grafiki umieszczonej we wpisie

Wiele motywów WordPressa umożliwia ustawienie atrybutu Alt z poziomu wpisu/strony. W tym celu wystarczy:

1. Dodać grafikę (np. wkleić lub przesłać wpisująć w nowy paragraf „/obrazek”)
2. Kliknąć grafikę
3. Poszukać opcji „TEKST ALTERNATYWNY” po prawej stronie w ustawieniach bloku.

W motywie Kadence wygląda to tak jak na screenie.

Jak ustawić atrybut alt z pomocą Elementora?

Elementor to popularny konstruktor stron dla WordPressa, który również umożliwia łatwe dodawanie atrybutów alt.

1. Po dodaniu obrazka do strony kliknij na niego, aby otworzyć panel edycji z prawej strony.
2. W sekcji „Zawartość” znajdziesz pole „Tekst alt”. Wpisz tam swój opis obrazka.
3. Kliknij „Zaktualizuj”, aby zapisać zmiany.

Podsumowując, atrybuty alt obrazków pełnią kluczową rolę w SEO, dostępności i doświadczeniu użytkowników. Dlatego tak ważne jest, aby pamiętać o ich prawidłowym ustawieniu zarówno podczas tworzenia strony w kodzie HTML, jak i korzystania z narzędzi takich jak WordPress czy Elementor.