Co to jest tag Alt i jak go używać?

Obrazy sprawiają, że Twoja witryna jest atrakcyjna i atrakcyjna wizualnie. Jeśli jednak nie zoptymalizujesz obrazów z tekstem alternatywnym (określanym również jako „tekst alternatywny” lub „tagi alternatywne”), stracisz kluczową okazję do poprawy komfortu użytkownika i dostępności witryny.

Aby używać ich właściwie, ważne jest, aby najpierw zrozumieć, czym są tagi alt. W tym poście omówimy, czym są tagi alt i dlaczego są używane. Wyjaśnimy również, jak dodawać tagi alt do obrazów w WordPressie i przedstawimy kilka najlepszych praktyk, jak to zrobić.

Zacznijmy!

Subskrybuj nasz kanał YouTube

Co to jest znacznik Alt?

Tagi Alt są dodawane do obrazów w HTML, aby opisać ich zawartość i kontekst na stronie internetowej. Tag alt pojawia się również w kontenerze obrazu, gdy plik multimedialny nie może się poprawnie załadować lub wyświetlić:

Tagi Alt pomagają osobom korzystającym z czytników ekranu, na przykład osobom z wadami wzroku, zrozumieć zawartość Twojej witryny. Co więcej, boty wyszukiwarek używają ich do interpretowania obrazów podczas przeszukiwania, indeksowania i oceniania witryny.

Dodany w tagu obrazu, wysokiej jakości tag alt to krótki opis, który wyjaśnia nie tylko to, co przedstawia obraz, ale także jego przeznaczenie na stronie. W przypadku użycia w kodzie HTML, pełny tag obrazu wygląda mniej więcej tak:

<img src="motorcycle-sunset.png" alt="Man in black and red checkered shirt riding an orange motorcycle at sunset."/>

Tagi alt obrazu są czasami mylone z tytułami lub podpisami obrazów. Jednak tytuły obrazów są innym typem atrybutu. Wyświetlają się jako tekst wyskakujący, gdy osoba najedzie myszą na obraz. Z drugiej strony podpisy pojawiają się z obrazem, zwykle pod nim, i zawierają dodatkowe informacje lub szczegóły na jego temat. W normalnych okolicznościach użytkownicy nigdy nie zobaczą tagów alt Twoich obrazów.

Dlaczego warto używać tagów Alt na obrazach?

Tagi Alt służą wielu celom. Chociaż nie musisz ich używać, jest to związane z pewnymi dużymi korzyściami. Ponieważ są używane zarówno przez roboty wyszukiwarek, jak i narzędzia do czytania ekranu, są kluczowym elementem dostępności stron internetowych i optymalizacji pod kątem wyszukiwarek (SEO).

Poprawiają dostępność sieci

Tagi Alt pomagają zapewnić, że odwiedzający mogą uzyskać dostęp do zawartości Twojej witryny i cieszyć się nią, nawet jeśli korzystają z technologii wspomagających lub przeglądarek tekstowych. Gdy osoba z wadą wzroku odwiedzi Twoją witrynę, jej czytnik ekranu odczyta jej tekst na stronie. Kiedy dotrze do obrazu, użyje tagu alt, aby opisać, czym jest ten obraz.

Jeśli brakuje tagu alt, czytnik ekranu może zamiast tego odczytać nazwę pliku obrazu. Jest to zwykle nie tylko nieskuteczne w prawidłowym wyjaśnieniu obrazu, ale może również być mylące i destrukcyjne, szczególnie jeśli nazwa pliku nie była zoptymalizowana pod kątem SEO.

W niektórych przypadkach, na przykład gdy pozostawisz puste pole znacznika alt obrazu w WordPressie, czytnik ekranu całkowicie pominie ten obraz. Zakładając, że obrazy, które umieszczasz na swoich stronach internetowych, służą określonemu celowi, ta nieobecność oznacza, że ​​odwiedzający nie uzyskuje pełnej wartości lub doświadczenia, jakie zamierzyłeś podczas korzystania z Twoich treści.

Mogą zwiększyć rankingi w wyszukiwarkach

Tagi obrazów alt mogą ułatwić ustalanie pozycji słów kluczowych, na które próbujesz kierować reklamy. Boty wyszukiwarek są inteligentne, ale nie potrafią interpretować i rozumieć wizualnych aspektów obrazu w taki sam sposób, jak ludzie.

Atrybuty Alt oferują tekstową alternatywę do tłumaczenia obrazów, a dokładniej do włączania odpowiednich słów kluczowych. Opisy tekstowe zawierające docelowe słowa kluczowe mogą zwiększyć Twoje szanse na wysoką pozycję w wynikach wyszukiwania grafiki.

Aby podkreślić ważną rolę, jaką obrazy (i z kolei tagi alt) odgrywają w SEO, rozważ stronę wyników wyszukiwania (SERP) jako „łóżko king size”:

Pierwsza strona nie tylko generuje wyniki tekstowe; istnieje również wiele wyników graficznych. Poprawnie zoptymalizowane i używane tagi alt mogą pomóc w zwiększeniu SEO i generowaniu hiperlinkowych, klikalnych obrazów, które będą pojawiać się w takich wyszukiwaniach. Jest to szczególnie korzystne w przypadku witryn e-commerce i stron docelowych.

Jak dodać alternatywny tag obrazu w WordPress?

Gdy zrozumiesz korzyści płynące z używania atrybutów alt obrazu w swojej witrynie, nadszedł czas, aby dowiedzieć się, jak to zrobić. Na szczęście WordPress sprawia, że ​​to zadanie jest niezwykle proste i proste.

Aby dodać tag alt obrazu w WordPress, zaloguj się do panelu administracyjnego i przejdź do strony lub posta, do którego chcesz dodać swój obraz. W edytorze WordPress kliknij ikonę plusa i wybierz blok Obraz :

Następnie prześlij swój obraz lub wybierz jeden z Biblioteki multimediów. Po wstawieniu obrazu do bloku panel ustawień obrazu otworzy się na pasku bocznym po prawej stronie. Możesz wprowadzić swój opis w polu tekstowym Alt :

Gdy skończysz, zapisz zmiany. Możesz to również zrobić dla istniejących obrazów. Na przykład, jeśli chcesz zaktualizować obraz w poście, który jest już opublikowany w Twojej witrynie, po prostu kliknij obraz i wprowadź nowy tag alt na pasku bocznym.

Jak dodać znacznik alternatywny obrazu w HTML

Kiedy korzystasz z WordPressa lub innego CMS, który zawiera moduł do dodawania i edycji tagów alt, automatycznie doda kod HTML. Jeśli jednak chcesz samodzielnie dodać kod, możesz to łatwo zrobić.

Aby dodać alt tag HTML w WordPressie, kliknij odpowiedni blok obrazu . Na pasku narzędzi bloku wybierz przycisk z trzema pionowymi kropkami i wybierz Edytuj jako HTML :

Kod HTML wyświetli tag obrazu. Zauważysz, że atrybut alt jest pusty. Umieść tekst w cudzysłowie:

Po zakończeniu kliknij przycisk Podgląd , aby wrócić do edytora wizualnego, a następnie zapisz zmiany. Możesz użyć tej samej składni i formatu do edycji tagu obrazu HTML dowolnego pliku.

Wskazówki i najlepsze praktyki dotyczące pisania tagów alternatywnych do obrazów

Tworząc tagi alt, należy pamiętać o kilku kluczowych kwestiach. Przestrzeganie tych najlepszych praktyk pomoże zwiększyć skuteczność tagów alt:

• Bądź konkretny i opisowy. Celem tagów alt jest opisanie obrazu, więc chcesz być jak najbardziej konkretny. Jeśli nie masz pewności, czy Twój opis jest wystarczający, zastanów się, jaki obraz byś wizualizował, gdybyś zobaczył tylko ten wiersz tekstu.
• Niech to będzie krótkie. Chociaż chcesz być szczegółowy, nie musisz również tworzyć swojego znacznika alt jako długiego akapitu (lub nawet pełnego zdania). Celuj maksymalnie w około 100 do 125 znaków.
• Nie bądź zbędny. Aby jak najlepiej wykorzystać tag alt, nie chcesz dołączać zbędnych słów. Obejmuje to dodanie „Obrazu” lub „Obrazu” przed opisem. Te elementy są niepotrzebne, ponieważ są już sugerowane.
• Naturalne uwzględnienie trafnych słów kluczowych . Zastanów się nad docelowymi słowami kluczowymi i, jeśli to możliwe, uwzględnij je organicznie w kontekście strony. Jest to łatwiejsze, gdy używasz bardzo trafnych obrazów, które odpowiadają tekstowi.
• Unikaj upychania słów kluczowych. Chociaż użycie słów kluczowych w tagach alt może poprawić SEO, uważaj, aby nie przesadzić. Upychanie słów kluczowych może w rzeczywistości zaszkodzić SEO i spowodować słabe wrażenia użytkownika.
• Nie używaj obrazów zamiast tekstu. Głównym celem tagu alt jest zapewnienie kontekstu tekstowego dla maszyn, które nie mogą przetwarzać i interpretować elementów wizualnych na stronie. Dlatego nie ma sensu używać tekstu w obrazach, szczególnie w nagłówkach i tytułach stron.

Tworząc alt tagi dla swoich obrazów, zawsze pamiętaj, że celem jest opisanie obrazu tym, którzy mogą go nie widzieć. Chociaż uwzględnienie SEO i słów kluczowych jest zdecydowanie dobrym pomysłem, pisanie tagów alt z myślą o prawdziwych użytkownikach może pomóc w generowaniu bardziej pozytywnych wyników.

Wniosek

Obrazy mogą poprawić wygląd Twoich stron internetowych i uczynić je bardziej interesującymi, informacyjnymi i angażującymi. Jednak, aby zmaksymalizować ich wartość, najlepiej uzupełnić je znacznikami alt. Te krótkie, ale opisowe wyjaśnienia zapewniają kontekst zarówno użytkownikom, jak i wyszukiwarkom. Tagi obrazów alt pomagają poprawić wrażenia użytkownika, poprawić dostępność i ułatwić ranking odpowiednich słów kluczowych.

Czy masz inne pytania dotyczące tego, czym jest tag alt lub jak dodać go do WordPressa? Daj nam znać w sekcji komentarzy poniżej!

Polecane zdjęcie: Honza Hruby / shutterstock.com