Wyjaśnienie alternatywnego atrybutu WordPress: co to jest tekst alternatywny obrazu?

Opublikowany: 2021-01-19

Wszyscy wiemy, jak ważne jest używanie obrazów na swoich stronach i artykułach. Zwykłe bloki tekstu stają się bardziej żywe, angażujesz odwiedzających w bardziej wizualny sposób i przekazujesz swoją wiadomość. Ale dodając jeden, nie możesz nie skupić się na jednym dziwnie brzmiącym polu. „Hmm, tekst alternatywny, co by to było teraz”, zastanawiasz się. Z pewnością nie może to być jakieś pole, które programiści WordPressa dodali losowo – jeśli tam jest, to prawdopodobnie ma jakiś cel.

Teksty alternatywne to atrybuty HTML dodawane do tagów graficznych. Są to krótkie ciągi tekstu, które WordPress pokazuje, jeśli nie może wyświetlić obrazu. Teksty alternatywne poprawiają SEO obrazu. Pomagają również zarówno użytkownikom niedowidzącym, korzystającym z czytników ekranu, jak i wyszukiwarkom w zrozumieniu zawartości obrazu.

Teksty alternatywne mają również kilka nazw używanych przypadkowo, takich jak „znacznik alt”, „tekst alternatywny” lub „atrybut alt”. Aby jak najlepiej go wykorzystać, najlepiej pomyśleć o tagach alt w następujący sposób: atrybut alt jest jak „podsumowanie wykonawcze” długiego raportu. Bardzo krótko i konkretnie podsumowuje to, co zawiera obraz (tj. raport).

Niektóre istniejące platformy CMS i wiele niestandardowych witryn internetowych wymagają ręcznego dodania tej części bezpośrednio w kodzie każdej strony. Jednak ci szczęściarze, tacy jak my, znacznie łatwiej korzystają z tej funkcji w WordPressie.

SPIS TREŚCI ukryj
1 Jak działają teksty alternatywne obrazu w WordPress?
2 przykłady tekstów alternatywnych obrazu w WordPress
2.1 Przykład dobrego tekstu alternatywnego
2.2 Przykład złego tekstu alternatywnego
3 9 najlepszych praktyk dotyczących pisania świetnego tekstu alternatywnego obrazu w WordPress
3.1 1. Teksty alternatywne powinny być krótsze niż 125 znaków
3.2 2. Albo napisz dobre tagi Alt, albo wcale
3.3 3. Utrzymuj powiązane tagi Alt podobne, ale unikalne
3.4 4. Unikaj używania „obrazu”, chyba że jest to istotne
3.5 5. Nie spamuj słów kluczowych w tekstach alternatywnych
3.6 6. Dodawanie obrazów pomaga w pisaniu dobrych tekstów alternatywnych
3.7 7. Użyj nazwy obrazu jako alternatywnego tekstu
3.8 8. Wielkie tagi Alt opisują szczegółowo obrazy
3.9 9. Umieść obrazy projektu swojej witryny w CSS
4 słowa końcowe

Jak działają teksty alternatywne obrazu w WordPress?

Teksty alternatywne nie są niczym nowym. Nie są też czymś wyjątkowym, co oferuje tylko WordPress. W rzeczywistości są to bardzo stara funkcjonalność sięgająca pierwszych dni internetu pod koniec XX wieku.

Od czasu ich wprowadzenia w 1995 roku, kiedy wydano HTML 2.0, znaczniki alt służyły trzem konkretnym celom:

  • Tagi Alt pojawiają się na Twojej stronie zamiast obrazu, jeśli z jakiegoś powodu przeglądarka nie może załadować zdjęć.
  • Czytniki ekranu czytają na głos teksty alternatywne osobom korzystającym z pomocy wizualnej podczas przeglądania Internetu.
  • Boty wyszukiwarek, takie jak Google, używają ich do lepszego zrozumienia treści obrazu.

Dlatego teksty alternatywne są świetną funkcjonalnością ułatwień dostępu i nie wymagają wiele dodatkowej pracy, aby je dodać.

Przykłady tekstów alternatywnych obrazu w WordPress

Spójrzmy teraz na kilka przykładów tekstów alternatywnych. Podkreśliłem, które przykłady dobre, a które złe, abyś mógł dokładnie zrozumieć, co chcesz umieścić w tagach alt.

Przykład dobrego alternatywnego tekstu

Oto obraz, który umieściliśmy w jednym z naszych postów na blogu. Jak widać poniżej, celem obrazu jest pokazanie dokładnie, w jaki sposób czytelnik może osiągnąć efekt opisany w artykule.

Efektem końcowym utworzonego przez nas tagu alt jest „Dobry przykład NAP na stronie Skontaktuj się z nami”.

Ponieważ obraz dodaje kontekstu i pomaga użytkownikowi w rozwiązaniu jego problemu, ważne jest, abyśmy go odpowiednio oznaczyli i zwrócili na to uwagę.

Przykład złego tekstu alternatywnego

W międzyczasie możesz także tworzyć alternatywne teksty, które nie są pomocne. Załóżmy, że ten sam obraz ma tag alt „NAP” lub „business NAP”.

Ten tekst alternatywny jest zły, ponieważ nikomu nie służy, a tylko zabiera czas. Czy to znaczy, że żaden tekst alternatywny nie jest lepszy niż jakiś tekst alternatywny? Chociaż jest to dyskusyjne, naszym zdaniem takie tagi alt nie są pomocne z punktu widzenia ułatwień dostępu użytkownika. Nie dodają też żadnego kontekstu dla robotów Google. Nawet w najgorszym przypadku, gdy obraz nie może zostać wyświetlony, użytkownik nadal jest zdezorientowany, ponieważ widzi tylko losowe słowo na stronie – zamiast zwięzłego ciągu, który daje mu wyobrażenie o tym, co powinno tam być.

Dlatego zdecydowaliśmy, że marnowanie czasu na tworzenie złych tagów alt nie jest tego warte. Zamiast tego, kiedy zdecydujemy się sprawdzić na naszej stronie i to zrobić, uważamy, że znacznie lepszą inwestycją czasową jest stworzenie pomocnych tagów alt.

9 najlepszych praktyk dotyczących pisania świetnego tekstu alternatywnego obrazu w WordPress

Teraz wiesz, jak pracować z atrybutem alt dla obrazów w WordPress. W związku z tym przejrzyjmy kilka wskazówek i najlepszych praktyk, aby upewnić się, że używasz go prawidłowo.

1. Teksty alternatywne powinny być krótsze niż 125 znaków

Utrzymuj tagi alt krótsze niż 125 znaków. Nie ma ścisłych zasad dotyczących długości tagów alt, więc użyj tego zalecenia jako zasady kciuka. Jednak w stosownych przypadkach możesz poświęcić tę ogólną zasadę na rzecz bardziej opisowych tekstów. Niemniej jednak zwykle nie jest to potrzebne.

Co więcej, to jest przykład tego, jak wygląda 125 znaków:

„Aaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

To dużo tekstu! W większości przypadków jesteś w stanie zmieścić w nim swoje teksty alternatywne.

2. Albo napisz dobre tagi Alt, albo w ogóle nic

Ale co z niższą marżą? Technicznie nie ma (no, oczywiście, z wyjątkiem 0). Mówienie z własnego doświadczenia, lenistwo i pisanie tylko jednego lub dwóch słów również nie jest warte poświęcania czasu. Oznacza to, że jeśli nie planujesz pisać dobrych tagów alt, są one tak dobre, jakbyś ich nie miał.

3. Utrzymuj powiązane tagi Alt podobne, ale unikalne

Jest całkowicie dopuszczalne, aby Twoje tagi alt były podobne – ale upewnij się, że nadal są unikalne. Załóżmy, że masz obrazy wyjaśniające dwa kolejne kroki w poście z instrukcjami. W takim przypadku nie da się uniknąć powielania części.

Jednak tutaj możesz upewnić się, że każdy tekst alternatywny jest wystarczająco unikalny, wyjaśniając każdy krok i oznaczając go odpowiednim numerem.

Na przykład: alt=”to jest pierwszy krok mojego samouczka na temat tekstu alternatywnego WordPress” vs. alt=”drugi krok dla samouczka tagów alt WordPress”

4. Unikaj używania „obrazu”, chyba że jest to istotne

Ogólnie rzecz biorąc, nie musisz pisać „obrazu” lub „zrzutu ekranu” w tekstach alternatywnych. Wyszukiwarki i czytniki ekranu wiedzą, że mają do czynienia z obrazem, więc dodawanie tego tekstu nie jest konieczne. Zamiast tego można lepiej wykorzystać pozostałą przestrzeń.

To oczywiście prawda, chyba że chcesz pojawiać się w Google dla tych zapytań słów kluczowych. Jeśli Twoje docelowe słowo kluczowe zawiera frazę, powiedzmy „zrzut ekranu”, to dodanie tego do obrazu rzeczywiście pomoże mu pojawić się wyżej w wyszukiwarce Google.

Załóżmy na przykład, że słyszysz w wiadomościach o ujawnionych obrazach korespondencji e-mailowej polityka. Oczywiście możesz poszukać czegoś takiego jak „obrazy wyciekających e-maili [WYOBRAŻONE NAZWISKO POLITYKA]”.

W tym miejscu dodanie wyrażenia „obrazy” w tekście alternatywnym pomoże Ci wyświetlić się w tym zapytaniu – chociaż oczywiście samo to nie gwarantuje, że Twoja witryna znajdzie się na górze.

Podobnie, załóżmy, że masz posty kierowane na słowa kluczowe wokół „inspiracji” dla danego tematu. W takim przypadku dopuszczalne jest również używanie wyrażeń takich jak „inspirujące obrazy [temat]”.

5. Nie spamuj słów kluczowych w tekstach alternatywnych

Pisząc tagi alt, utrzymuj odpowiedni tekst i unikaj spamowania słów kluczowych.

Oznacza to, że jeśli Twój obraz przedstawia psa, nie pisz tekstu alternatywnego podobnego do „psów pies pies szczeniak pies psa rasy szczenię najlepszego przyjaciela człowieka”. Zamiast tego wybierz coś bardziej opisowego, co dodaje kontekst.

Potencjalnie ten tekst w naturalny sposób wyjaśnia obraz, biorąc pod uwagę treść i akapit, który go otacza. W poniższych sekcjach pokażę konkretne przykłady.

6. Dodawanie obrazów pomaga w pisaniu dobrych tekstów alternatywnych

Dodanie obrazów po pełnym przygotowaniu posta na blogu może zapewnić, że nie przegapisz żadnych tagów alt i będziesz musiał poświęcić dodatkowy czas na ich późniejsze naprawianie. Czasami możesz nawet edytować tag alt po wstawieniu obrazu tylko po to, aby stwierdzić, że nie jest on aktualizowany na stronie.

Pamiętaj, że dodawanie obrazów w WordPressie najlepiej wykonywać jako ostatni krok podczas tworzenia stron i postów.

7. Użyj nazwy obrazu jako alternatywnego tekstu

Kiedy pozyskujesz swoje obrazy, po prostu pamiętaj, aby nazwać je czymś bardzo istotnym dla tego, o czym piszesz. Zamiast używać spacji, po prostu używaj myślników do oddzielania słów. Dzięki temu po przesłaniu obrazu możesz po prostu skopiować nazwę, którą już napisano i usunąć myślniki. Dzięki temu uzyskasz doskonały tag alt bez marnowania czasu. Aby dowiedzieć się dokładnie, jak to robię, przeczytaj ten rozdział w naszym przewodniku na temat dodawania tagów alt w WordPressie.

8. Świetne tagi Alt opisują szczegółowo obrazy

Podczas pisania tagów alt ważne jest, aby były opisowe. Im lepiej opiszesz to, co jest na obrazie, tym łatwiej będzie użytkownikom niedowidzącym zrozumieć, dlaczego umieszczasz tam obraz. To samo dotyczy wyszukiwarek. Ta praktyka daje większe szanse, że Google wyświetli Twoją witrynę, gdy ktoś szuka tego typu obrazu. Dzieje się tak również w przypadku dłuższych, innych wyszukiwań niż dokładnie to, dla którego zoptymalizowałeś – znane również jako słowa kluczowe z długim ogonem.

9. Umieść obrazy projektu swojej witryny w CSS

Jeśli obraz został stworzony wyłącznie ze względów projektowych, powinieneś zaimplementować go w CSS stylu Twojej witryny. W ten sposób ustawisz odpowiednią strukturę / hierarchię kodu witryny. Umożliwia także wyszukiwarkom i czytnikom ekranu rozróżnianie między obrazami, które składają się na treść, a obrazami używanymi wyłącznie jako elementy projektu.

Kierując się tą logiką, dowiedziałeś się, że wszystkie obrazy powinny mieć znacznik alt. Zaimplementowanie obrazu w HTML oznacza, że ​​obraz dodaje kontekst do strony – i umożliwia dodanie tekstu alternatywnego. Tymczasem zaimplementowanie obrazu w CSS oznacza, że ​​obraz nie dodaje kontekstu, ale raczej pomaga renderować stronę – a zatem nie masz dostępu do funkcji dodawania tagu alt.

Słowa zamykające

W przypadku większości serwisów dodawanie tekstów alternatywnych nie wymaga ogromnej inwestycji czasowej. Tymczasem korzyści z nimi związane są ogromne. Sprawiasz, że Twoja witryna jest bardziej dostępna – i potencjalnie możesz zostać za to nagrodzony przez Google.

Najlepszym sposobem na nauczenie się pisania tagów alt jest przyjrzenie się kilku przykładom i samodzielne wypróbowanie. Aby poznać rzeczywisty proces dodawania lub zmieniania tekstu alternatywnego na obraz w WordPress, przeczytaj przewodnik, do którego łącze znajduje się tutaj.

Na koniec zawsze pamiętaj, aby zapisać zmiany w WordPressie i potwierdzić, że tagi alt są widoczne. W przeciwnym razie, ze względu na sposób wykonania, czasami WordPress nie wyświetla nowych tekstów alternatywnych. Jeśli spotkałeś się z tym wcześniej, przeczytaj ten przewodnik, jak naprawić WordPress, który nie wyświetla tagów alt.