Optymalizacja obrazów znaczników ALT może zrobić więcej niż poprawić SEO witryny WordPress … w rzeczywistości jeszcze ważniejsze jest to, że może i sprawi, że Twoje treści będą bardziej dostępne dla każdego użytkownika, który odwiedza Twoją witrynę.
Często mówi się, że “obraz jest wart tysiąca słów.”Ale jak opisujesz te obrazy w swoich tagach alt? Potrzebujesz tysiąca słów? Czy w ogóle musisz używać znaczników alt obrazu?
W tym samouczku przyjrzymy się, jak zoptymalizować tagi alt pod kątem SEO i dostępności, i pokażemy, jak napisać idealne tagi alt obrazu w WordPress … za każdym razem!
Więcej niż na pierwszy rzut oka
Kiedy myślimy o” znacznikach alt ” (myślisz o nich, prawda?), rzadko wychodzimy poza wyobrażanie sobie atrybutów alt jako czegoś, co przynosi korzyści SEO naszej witryny. Cóż … w tych szczeniaczkach jest o wiele więcej niż na pierwszy rzut oka! Tekst alternatywny odgrywa również ważną rolę w dostępności stron internetowych, co wkrótce zobaczymy.
A jeśli uważasz, że film jest wart tysiąca zdjęć, oto jeden, który podsumowuje ten samouczek (uważaj na crazy eyed puppies) …
Picture This …
Skonfigurowałeś, skonfigurowałeś i zoptymalizowałeś witrynę WordPress na własny użytek lub dla klienta.
Twoja strona potrzebuje treści. Dobrą strategią treści jest zapewnienie, że wszystkie elementy na stronie przemawiają do ludzkich czytelników i wyszukiwarek.
Dodawanie odpowiednich obrazów do treści może pomóc przyciągnąć więcej czytelników, zachęcić ich do dłuższego pozostawania na stronie i wzmocnić wiadomość. Chcemy jednak również upewnić się, że te obrazy pomogą Ci znaleźć się wyżej w wynikach wyszukiwania obrazów i poprawić dostępność Twojej witryny.
Tutaj pojawiają się znaczniki alt obrazu.
“Alt tag” lub atrybut alt to alternatywny tekst używany do opisania obrazu lub tego, co obraz reprezentuje, jeśli obraz nie może być wyświetlany z jakiegoś powodu (np. powolne połączenie lub błąd w atrybucie src), lub jeśli użytkownicy nie mogą go zobaczyć z powodu zaburzeń widzenia, surfowania po internecie z wyłączonymi obrazami itp.
Ta alternatywna informacja tekstowa jest przydatna dla ludzi korzystających z czytników ekranu podczas przeglądania Internetu, ponieważ będą one odczytywać tekst obrazu tagu alt i udostępniać obraz, a także poprawiać SEO obrazu, ponieważ tagi alt pomagają wyszukiwarkom dowiedzieć się kontekstu obrazów w treści strony i uzyskać je odpowiednio indeksowane dla wyników wyszukiwania, Gdy użytkownicy szukają obrazów online.
Podczas gdy oba atrybuty używają alternatywnego tekstu, aby poprawić sposób wykorzystywania obrazów w treści, atrybut alt powinien opisywać obraz, aby pomóc użytkownikom zrozumieć, co obraz robi na stronie (tj. jego przeznaczenie), podczas gdy atrybut title jest używany do wyświetlania podpowiedzi po najechaniu kursorem na obraz.
Oto jak wygląda pełna składnia znacznika obrazu HTML:
Możesz dodać tekst alternatywny zaraz po przesłaniu zdjęć do WordPress za pośrednictwem biblioteki multimediów …
I podczas edycji zdjęć (Możesz również dodać tag tytułowy do swojego obrazu podczas edycji) …
Jak napisać doskonały obraz Alt Tagi w WordPress
Teraz, gdy omówiliśmy podstawy znaczników alt, przyjrzyjmy się typom obrazów, które zwykle dodajemy do treści i wskazówkom korzystania z alternatywnego tekstu z różnymi typami obrazów.
Aby pomóc umieścić rzeczy w kontekście, stworzymy przykładowy post w WordPress i zastosujemy wytyczne “best practice” dotyczące używania znaczników alt z różnymi typami obrazów, aby spróbować osiągnąć najlepszy wynik dla wyników wyszukiwania i dostępności.
Oto nasz początkowy post, z tekstem i pierwszym obrazem postu …
Zanim zdecydujemy, co zrobić z obrazem w tym poście, rzućmy okiem na wskazówki dotyczące optymalizacji obrazów przy użyciu atrybutów alt.
Korzystanie z tagów Alt dla WordPress SEO
Podstawowe wytyczne dla alternatywnego atrybutu tekstowego są następujące:
- Tekst powinien opisywać obraz, jeśli obraz zawiera informacje.
- Tekst powinien wyjaśniać, dokąd prowadzi link, jeśli obraz znajduje się wewnątrz elementu.
- Użyj alt=””, jeśli obraz jest tylko do dekoracji.
W rzeczywistości oto, co były szef zespołu ds. spamu internetowego w Google, Matt Cutts, miał do powiedzenia na temat używania znaczników Alt w celu poprawy wyników wyszukiwania witryny …
=”360″, src=”https://www.youtube.com/embed/3NbuDpB_BTc?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent”>
Według Google, a następnie, Oto związek między używaniem znaczników alt i obraz poniżej …
(obraz: pixabay.com)
- Zły (Brak tekstu alt):
- Zły (słowo kluczowe farsz):
- Lepiej:
- Najlepsze:
Jeśli jednak obraz jest czysto dekoracyjny, nie należy używać znaczników alt.
Stąd,
Chociaż powyższe wydaje się dość proste, jeśli wziąć pod uwagę kwestie dostępności, rzeczy mogą stać się nieco bardziej mylące.
Co prowadzi nas do różnych rodzajów obrazów, które możemy wykorzystać w naszych treściach.
Różne Rodzaje Obrazów, Których Możesz Użyć W WordPress
Jeśli zastanawianie się, jakiego alternatywnego tekstu należy użyć, z jakim typem obrazu, zaczyna doprowadzać Cię do szału, Pobierz arkusz Cheatsheet PDF, który zebraliśmy poniżej i użyj go jako przewodnika podczas optymalizacji obrazów …
WordPress pozwala dodawać wszelkiego rodzaju obrazy do postów, stron i niestandardowych typów postów. Zgodnie z wytycznymi WCAG World Wide Web Consortium dotyczącymi dostępności treści internetowych (Web Content Accessibility Guidelines, WCAG), obrazy należą do następujących kategorii w celu ułatwienia dostępu:
Obrazy Informacyjne
Są to obrazy używane do graficznego przedstawiania pojęć i informacji, takich jak zdjęcia, zdjęcia i ilustracje.
Informacyjne obrazy mogą być wykorzystane do:
- Oznacz inne informacje (np. zdjęcie, obraz lub ikona telefonu lub e-maila w celu uzyskania danych kontaktowych)
- Uzupełnij inne informacje (np. wyjaśnij coś zawartego na obrazku)
- Przekazywać informacje (np. przekazywać instrukcje przedstawione na obrazku)
- Przekazać wrażenie, ekspresję lub emocje (np. zdjęcie szczęśliwej rodziny towarzyszące treściom lub informacje o produkcie przyjaznym rodzinie)
- Przenoszenie formatu pliku (np. ikony plików PDF lub ZIP)
Sugerowane podejście do używania znaczników alt z obrazkami informacyjnymi polega na zawarciu przynajmniej krótkiego opisu zawierającego istotne informacje przedstawione na obrazku, jak pokazano poniżej.
0123 456 7890
Obrazy Dekoracyjne
Przykładami obrazów dekoracyjnych są obrazy, które:
- Są wykorzystywane jako część projektu strony (np. obramowania, dzielniki sekcji itp.)
- Są wykorzystywane jako część linku tekstowego (np. w celu zwrócenia uwagi użytkownika na klikalny link lub powiększyć klikalny obszar).
- Mieć alternatywny tekst sąsiadujący (tzn. tekst wyświetlany obok obrazu jest wystarczający, aby wyjaśnić, dlaczego obraz tam jest).
- Służą wyłącznie do tworzenia atmosfery lub poprawy wyglądu strony (np. “eye candy”).
Wydaje się, że konsensus jest taki, że gdy obraz nie służy żadnemu celowi lub gdy jego jedynym celem jest dodanie wizualnej dekoracji do strony zamiast przekazywania ważnych informacji, które pomogłyby czytelnikom zrozumieć stronę, najlepiej jest zapewnić alternatywę dla tekstu zerowego (tj. 
).
Obraz z pustym atrybutem alt zostanie pominięty przez technologie wspomagające, takie jak czytniki ekranu.
Wiele przewodników SEO sugeruje, że jeśli obraz nie służy żadnemu celowi i jest zawarty w projekcie wyłącznie w celach dekoracyjnych (np. obraz w tle), powinieneś utworzyć obraz za pomocą CSS, a nie HTML. Jeśli naprawdę nie możesz zmienić tych obrazów, nadaj im pusty atrybut alt (alt=””).
Należy jednak pamiętać, że obraz może być interpretowany jako informacyjny, dekoracyjny lub inny w zależności od kontekstu, w którym jest używany. Decyzja zależy od oceny autora i ich powodu umieszczenia obrazu na stronie.
Na przykład, weźmy obraz Dr Sigmund Freud w naszym przykładzie poniżej …
Dr Freud jest wymieniony w treści jako ktoś, kto ” nie lekceważył siły wczesnej miłości.”Podczas gdy posępne spojrzenie Dr Freuda w kamerę nadaje artykułowi powietrza wiarygodności i autorytetu, czy jego zdjęcie ma charakter informacyjny, czy czysto dekoracyjny?
Jak świadomie (lub podświadomie) zoptymalizować ten obraz z myślą o dostępności? Czy pozostawiamy czytelnikom zgadywanie, co motywuje Freuda do bycia w naszym poście? Czy wszystko się wymyka?
Jeśli uznamy, że obraz jest dekoracyjne, wytyczne sugerują pozostawienie znacznika alt pustym. Czytniki ekranu pominęłyby wtedy obraz, a osoby niedowidzące mogą nie być świadome znaczącego wkładu Sigmunda.
- Dekoracyjne:
Jeśli uznamy, że obraz jest informacyjna, następnie musimy powiedzieć coś w znacznikach alt, aby wyjaśnić obraz.
- Informacyjna:
Alternatywnie, możemy zdecydować, że obraz jest dekoracyjny, ale sprawimy, że uznanie przez dr Freuda ważności “przysłowiowej trwałości pierwszych miłości” będzie istotne dla wszystkich użytkowników, w tym czytelników niedowidzących, łącząc tekst w atrybutach obrazu, takich jak znacznik alt IMG i pole podpisu img.
Funkcjonalne Obrazy
Funkcjonalne obrazy nie przekazują informacji … są używane do inicjowania działań.
Przykłady obrazów funkcjonalnych obejmują klikalne przyciski, łącza i inne elementy interaktywne, takie jak ikona drukarki reprezentująca funkcję drukowania lub przycisk do przesyłania formularza.
Alternatywa tekstowa dla obrazów funkcjonalnych powinna zatem przekazywać pożądane działanie, które chcesz uzyskać od czytelnika (tj. cel obrazu), zamiast dostarczać tylko opis obrazu.
Na przykład, dla obrazu przycisku pokazanego poniżej, alternatywą tekstową powinno być coś w rodzaju “kliknij przycisk, aby znaleźć miłość” zamiast “obraz klikalnego przycisku”.
Ponieważ funkcjonalne obrazy mają zasadnicze znaczenie dla funkcjonalności zawartości, brakujące lub puste wartości alt stwarzają problemy dla użytkowników czytnika ekranu. Technologie wspomagające, takie jak czytniki ekranu, Zwykle informują o nazwie pliku obrazu, adresie URL obrazu lub adresie docelowym łącza, więc jeśli brakuje znacznika alt, użytkownicy będą mieli trudności ze zrozumieniem akcji zainicjowanej przez obraz.
Obrazy tekstu
Obrazy często mogą wyświetlać tekst, który ma być odczytany. W takim przypadku znacznik alt powinien zawierać słowa użyte na obrazku.
0123 456 7890
Wytyczne dotyczące dostępności sugerują unikanie umieszczania czytelnego tekstu w obrazach, chyba że obraz jest logo. Zamiast tego można stylizować tekst za pomocą CSS3 i używać osadzonych czcionek zamiast przedstawiać tekst jako obraz.
Jeśli musisz przedstawiać wyrażenia numeryczne za pomocą obrazów z powodu trudności w przedstawianiu równań i specjalnych symboli matematycznych za pomocą HTML, upewnij się, że znacznik alt zawiera wystarczające informacje dla czytelników, aby mogli wykonać matematykę.
Na przykład poniższy zrzut ekranu wyświetla obraz, który używa powtarzających się liczb dziesiętnych …
Oto jak możesz napisać alternatywny tekst dla tego obrazu:
Złożone Obrazy
Złożone obrazy, takie jak wykresy, wykresy, mapy, diagramy i ilustracje, często zawierają więcej informacji niż można przekazać w krótkim zdaniu lub zdaniu i mogą wymagać długich i szczegółowych opisów tekstowych.
Wytyczne dostępności zapewniają różne podejścia do udostępniania długich informacji opisowych w złożonych obrazach programom, takim jak przeglądarki internetowe i wyszukiwarki (np. przy użyciu elementów HTML5, takich jak
Jedną z metod, których możesz użyć podczas dodawania złożonego obrazu do treści, jest dołączenie długiego opisu na tej samej stronie internetowej co obraz i odniesienie do jego lokalizacji w atrybucie alt.
Oto alternatywny tekst, który możemy wykorzystać na przykładowym wykresie przy użyciu tego podejścia:
Podczas korzystania z atrybutów alt dla złożonych obrazów, upewnij się, że w alternatywnym polu tekstowym podano jasne i dokładne informacje o lokalizacji, aby ułatwić użytkownikom znalezienie treści.
Grupy obrazów
Gdy wiele obrazów jest używanych do reprezentowania jednej informacji, tylko jeden z tych obrazów potrzebuje znacznika alt do opisania całej grupy. Pozostałe obrazy powinny mieć atrybut null (empty) alt, tak aby były ignorowane przez technologię wspomagającą.
Przykładem tego jest użycie grupy ikon gwiazdek do reprezentowania oceny …
Oto jak wyglądałyby znaczniki alt dla ikon gwiazd użytych w powyższym przykładzie:
Ocena:
`
Oczywiście możesz po prostu użyć wtyczki, aby dodać obrazy z oceną gwiazdek w WordPress, ale masz obraz!
Jeśli grupa obrazów jest używana do reprezentowania kolekcji lub obrazów powiązanych tematycznie, należy dodać alternatywę tekstową opisującą każdy obraz i jego związek z grupą.
Co?
Pozwólcie, że podzielę to na proste kroki.
Tutaj mamy grupę obrazów używanych do reprezentowania kolekcji powiązanych tematycznie obrazów …
Pamiętaj, że jeśli wstawisz obrazy do postów lub stron WordPress za pomocą Galerii Obrazów, nie będziesz mógł wyświetlać znaczników alt obrazów na ekranie edytora treści …
Jeśli jednak wyświetlisz kod źródłowy opublikowanego postu lub strony, (kliknij prawym przyciskiem myszy post i wybierz Ctrl + U, jeśli używasz przeglądarki Windows i Google Chrome lub opcji + Cmd + U z iOS i Safari) …
Zobaczysz, że WordPress zawiera wszystkie attributes w treści HTML za pomocą odpowiednich struktur znaczników …
Mapy Obrazów
Jeśli używane są obrazy z wieloma klikalnymi obszarami (hotspotami), należy podać ogólny kontekst zestawu łączy i alternatywny tekst dla każdego pojedynczego klikalnego obszaru obrazu opisującego cel lub miejsce docelowe łącza.
To jest wykres alt bzdurnych informacji…kliknięcie w dowolnym miejscu na tej mapie obrazkowej doprowadzi tylko do bólu serca i rozczarowania.
Typowe zastosowania map graficznych obejmują wykresy organizacyjne łączące strony z indywidualnymi informacjami o Profilu oraz interaktywne obrazy z obszarami hotspotów, podświetlonymi sekcjami, opisami,linkami itp.
Istnieją różne wtyczki, których możesz użyć do tworzenia map obrazów w WordPress. Po prostu wyszukaj “interaktywny obraz” na ekranie “Dodaj wtyczki” w obszarze administracyjnym (przejdź do “Wtyczki” > “Dodaj nowy”). Lub sprawdź nasz samouczek, Jak zbudować mapę obrazów CSS.
Alt Tag Porady dla lepszego SEO & Web Accessibility
Obrazy mogą poprawiać wyniki wyszukiwania, ułatwiać zrozumienie treści osobom z zaburzeniami poznawczymi i uczącymi się oraz dostarczać wskazówek użytkownikom niedowidzącym, ale mogą również tworzyć bariery, jeśli nie są zoptymalizowane pod kątem dostępności.
Oprócz tego, że Twoje treści są bardziej indeksowalne dla wyszukiwarek, dostępne obrazy są korzystne dla osób korzystających z czytników ekranu i witryn z obsługą mowy (alternatywa tekstowa może być odczytywana na głos lub renderowana w alfabecie Braille ‘ a), osób korzystających z oprogramowania do wprowadzania mowy i użytkowników mobilnych przeglądających witryny z wyłączonymi obrazami (szczególnie w przypadku roamingu danych).
Oto kilka przydatnych wskazówek, które poprawią Twoje SEO i sprawią, że Twoje treści będą bardziej dostępne podczas dodawania znaczników alt do obrazów:
- Jeśli nie masz pewności co do typu obrazu dodawanego do zawartości, zapoznaj się z tym drzewem decyzyjnym alt.
- Jeśli obraz nie ma żadnego celu, pozostaw znacznik alt pusty.
- Zachowaj swój tekst alternatywny tak zwięzły, jak to możliwe i umieść najważniejsze informacje na początku.
- Użyj interpunkcji w alternatywnym tekście, aby ułatwić zrozumienie informacji.
- Dodaj znaki spacji w tekście alternatywnym, gdy nie ma znaku spacji między obrazem a sąsiednim tekstem, aby uniknąć słów biegnących razem podczas czytania przez czytnik ekranu (np. alt= ” Zarząd i pracownicy powiązani:”).
- Jeśli do ukrycia ozdobnych obrazów użyjesz alternatywy tekstowej null (empty) (alt=””), usuń wszystkie znaki spacji wewnątrz cudzysłowów, ponieważ niektóre technologie wspomagające będą informować o obecności obrazu, jeśli zostaną wykryte znaki spacji między znakami cudzysłowów.
- Nie musisz dodawać słów takich jak” obraz”,” ikona “lub” obraz ” w tekście alternatywnym, ponieważ ci, którzy widzą, będą o tym wiedzieć, a czytniki ekranu ogłoszą obecność obrazu. Chyba, że ważne jest rozróżnienie między obrazami, fotografiami, ilustracjami itp., najlepsze praktyki zalecają unikanie bardziej ogólnego stosowania terminów w tekście alternatywnym.
- Przejrzyj każdy obraz na swojej stronie internetowej, aby określić, czy alternatywny tekst jest odpowiedni. Jak to zrobić, wyobraź sobie czytanie strony na głos do kogoś, kto jest niedowidzący i needs, aby zrozumieć Twoje treści. Pomoże Ci to ocenić informacje o tekście alternatywnym w kontekście i zdecydować, jaką (jeśli w ogóle) funkcję lub przeznaczenie służą obrazy.
Sprawdź Swoje Teksty Alt
Po zakończeniu dodawania treści do postów lub stron możesz sprawdzić dostępność swoich stron internetowych.
Istnieją również narzędzia, za pomocą których można przeprowadzać automatyczne testy, aby sprawdzić, czy na stronie nie brakuje tekstu alternatywnego.
Możesz na przykład użyć narzędzia Wave Web accessibility evaluation, aby sprawdzić tekst alternatywny w dowolnej przeglądarce …
Wystarczy wpisać adres strony w polu, kliknąć przycisk, a Twoja strona wyświetli się w przeglądarce z ikonami i tagami oraz sekcją raportu podsumowującego …
Jeśli zostanie wykryty znacznik alt, zostanie wyświetlona zielona ikona dla tego obrazu. Kliknij na ikony, aby zobaczyć więcej informacji…
Jeśli brakuje znacznika alt dla obrazu na twojej stronie ( nie null lub empty … brak!), pojawi się czerwona ikona…
Przejdź do sekcji raport i kliknij ikony na stronie, aby wyświetlić informacje o atrybutach alt…
Kontynuuj, dopóki nie posprzątasz całego bałaganu!
Napraw wszelkie problemy na stronie, a następnie opublikuj i odśwież narzędzie, aby upewnić się, że wszystko jest w porządku. Spłucz i powtarzaj, aż wszystkie problemy na stronie zostaną naprawione.
Jeszcze jedno. …
Optymalizacja obrazów pod kątem SEO i dostępności stron internetowych wymaga wytrwałej determinacji. Poświęć czas na stworzenie odpowiedniego tekstu alternatywnego dla każdego obrazu dodanego do posta lub strony w witrynie. Użytkownicy witryny, użytkownicy z wyzwaniami i wyszukiwarki będą ci za to wdzięczni!
Jeśli zastanawiasz się, co jest najlepszym optymalizatorem obrazu WordPress, nie szukaj dalej niż nasz własny Smush Pro. Połącz go z Koliber i SmartCrawl SEO, wszystkie trzy mogą dramatically popraw wydajność swoich obrazów. Możesz wypróbować wszystkie trzy na swojej stronie z bezpłatnym okresem próbnym bez ryzyka.
obrazy: pixabay.com
Tagi:
