Tytuł obrazu Vs. Tekst alternatywny: co jest lepsze?

Nawet przy nowych trendach optymalizacji wyszukiwarek nadal obowiązuje stwierdzenie, że obraz jest wart milion słów. Pojedynczy obraz wysokiej jakości może potencjalnie tchnąć życie w treść witryny. Co więcej, dobrze napisany tytuł HTML img to pewny sposób na poprawę doświadczenia użytkownika.

Ale jeśli myślisz, że zdjęcia polegają na dopasowaniu treści i obrazów, czeka Cię niespodzianka. Możesz używać obrazów, aby przyciągać uwagę nie tylko odwiedzających strony internetowe, ale także wyszukiwarki. Aby jednak uwolnić pełną moc, jaką przedstawia obraz, musisz zajrzeć pod maskę i zrozumieć kod HTML, który wyświetla obrazy w Twojej witrynie.

Po zapoznaniu się ze składnikami tagu graficznego możesz przejść do optymalizacji tych, które będą miały wpływ na rankingi w wyszukiwarkach. Zwykle elementami docelowymi są tytuł img src i tytuł HTML img alt. Czy wiesz, jaką rolę odgrywają te dwie osoby w Twojej witrynie? Odpowiedź będzie tematem tego artykułu.

Zrozumienie tytułu obrazu i tekstu alternatywnego obrazu

Najłatwiejszym sposobem na poznanie różnicy między tytułem a tekstem alternatywnym jest spojrzenie na znacznik HTML obrazu. Załóżmy, że Twoja witryna jest sklepem internetowym sprzedającym meble, przykładowy tag przedstawiający zdjęcie fotela na biegunach może wyglądać tak:

img src=”bujane-fotel.jpg” alt=”brązowy fotel bujany wyprzedaż” title=”brązowy fotel bujany”

W projektowaniu stron internetowych elementy ze znakiem równości otrzymują atrybuty nazwy. Zauważ, że powyższy przykład jest tylko ilustracją. W rzeczywistych aplikacjach atrybutów jest znacznie więcej i mogą obejmować klasę, identyfikator, wysokość, szerokość itp.

Na podstawie tagu identyfikacja tekstu alternatywnego i tytułu jest prosta. Możesz zauważyć, że atrybut alt zawiera więcej informacji w porównaniu do tagu HTML tytułu obrazu. Rzut oka na zastosowania obu atrybutów pokazuje, dlaczego tak się dzieje.

Do czego służy tytuł obrazu?

Tytuł pojawia się, gdy użytkownik najedzie kursorem na obraz w Twojej witrynie. Dlatego pojawia się dopiero po załadowaniu obrazów. Zanim użytkownik zobaczy tytuł, już obejrzał obraz. Jako taki nie musi być bardzo opisowy. Na przykład:

Jednak tytuły są dość ważne, jeśli chodzi o poprawę doświadczenia użytkownika. Wierz lub nie, ale odwiedzający mogą mieć trudności ze zrozumieniem, dlaczego niektóre zdjęcia w Twojej witrynie pojawiają się w niektórych jej częściach. Tytuł przydaje się do udzielenia odpowiedzi.

Niektóre przeglądarki nie wyświetlają tytułu po najechaniu na obraz. Ale ponieważ nigdy nie wiesz, czego użytkownicy będą używać do poruszania się po Twojej witrynie, lepiej jest uwzględnić atrybut tytułu w tagu obrazu.

Do czego służy tekst alternatywny?

Tekst alternatywny służy więcej niż jednemu celowi. Możesz to rozbić w następujący sposób:

• Tekst alternatywny wyświetla się za każdym razem, gdy obraz się nie wczytuje. Prawie wszystkie przeglądarki umożliwiają alternatywne opisy do reprezentowania pustych obrazów. Może to być spowodowane nieprawidłową nazwą pliku obrazu lub uszkodzonym adresem URL. Słabe połączenia internetowe mogą również uniemożliwić prawidłowe ładowanie zdjęć. W takim przypadku pojawia się tytuł img alt i wyjaśnia odwiedzającemu wszystko o obrazie.
• Tekst alternatywny wyświetla się również, gdy użytkownicy wyłączają obrazy. O ile obrazy upiększają strony internetowe, niektórzy użytkownicy preferują wersje tekstowe. W ten sposób mogą dowiedzieć się o obrazkach, czytając tekst alternatywny.
• Niewidomi użytkownicy również korzystają z dobrze napisanych tytułów img alt. Czytniki ekranu używają ich do opisywania obrazu użytkownikom, którzy go nie widzą. Ogólnie rzecz biorąc, teksty alternatywne pomagają zwiększyć dostępność Twojej witryny. Znaczenie maksymalnej dostępności jest tak wielkie, że W3C opowiada się za tekstami alternatywnymi. Linia z ich wytycznych brzmi: „Kiedy używasz elementu img, określ krótki tekst alternatywny z atrybutem alt”.
• Wreszcie, wyszukiwarki używają tekstów alternatywnych, aby lepiej zrozumieć, o czym jest obraz. Dzięki temu teksty alternatywne można indeksować, podobnie jak inne treści w Twojej witrynie. Poniższy obrazek pokazuje przykład tekstu alternatywnego:

(Źródło zdjęcia: MDN-Mozilla)

Co jest ważniejsze: tytuł obrazu lub tekst alternatywny?

Bezpiecznie jest oznaczyć atrybut alt jako ważniejszy po zapoznaniu się z listami zastosowań tytułów i tekstów alternatywnych. Błędem byłoby jednak sądzić, że tytuły są bezużyteczne. W rzeczywistości każdy element może mieć znaczenie w zależności od twoich celów.

Jeśli Twoim głównym problemem jest poprawa doświadczenia użytkownika, głównym obszarem zainteresowania będą tytuły. Jak wspomniano, możesz podać dodatkowe szczegóły dotyczące obrazu za pomocą tytułów. Gdy użytkownik najedzie na nią kursorem, powinien pojawić się opis.

Ale dlaczego wyszukiwarki nie przywiązują dużej wagi do tytułów obrazów?

Cóż, odpowiedź ma wiele wspólnego z rozwojem wyszukiwarek. Programiści napisali większość kodu Google w 1999 roku. W następnym roku pojawiły się również znaczące dodatki. Jednak nigdy nie brali pod uwagę niepopularnych i nieodkrytych elementów HTML. Ponieważ projektanci stron internetowych nie używali często tytułów, nie było powodu, aby je udostępniać. Aktualizacje podstawowego kodu nigdy nie sprawiły, że tag HTML title image jest tak ważny jak inne atrybuty.

Jeśli myślisz o SEO, powinieneś skupić się na tekście alternatywnym. Pamiętaj, że Google traktuje informacje w atrybucie alt jako zwykłą zawartość strony internetowej. W ten sposób indeksuje go. Ponadto wyszukiwarki mogą mieć problem z indeksowaniem obrazu. Teksty alternatywne stanowią dla nich doskonały sposób, aby dowiedzieć się, o co chodzi w obrazie.

Ponadto teksty alternatywne przenoszą dostępność witryny na zupełnie nowy poziom. Pomimo technik, takich jak leniwe ładowanie, prawie niemożliwe jest zapewnienie, że wszystkie obrazy w Twojej witrynie będą ładowane przez 100% czasu. Odwiedzający może wyłączyć obrazy lub mieć połączenie tak wolne, że obrazy nigdy się nie ładują. Uzbrojony w tekst alternatywny, możesz mieć pewność, że użytkownik będzie wiedział, czym jest obrazek, niezależnie od tego, czy się ładuje, czy nie.

Podsumowując, znaczenie tekstu alternatywnego znacznie przewyższa atrybuty tytułu. Ich zastosowania są stosunkowo liczne, a ich wpływ na ranking strony internetowej jest godny uwagi. Chociaż ważne jest, aby zoptymalizować zarówno tytuł, jak i tekst alternatywny, dobrze jest położyć większy nacisk na informacje o atrybucie alt.

Optymalizacja tekstu alternatywnego pod kątem SEO

SEO pozostaje jednym z najpewniejszych sposobów organicznego generowania wysokiej jakości ruchu. Chociaż istnieje wiele sposobów optymalizacji witryny, udoskonalenie tekstu alternatywnego jest idealne do skonfigurowania obrazów witryny w celu zwiększenia ruchu. Na szczęście proces jest prosty. Niektóre z praktyk, które należy wziąć pod uwagę, to:

Przetestuj SEO i wydajność swojej witryny w 60 sekund!

Dobry projekt witryny ma kluczowe znaczenie dla zaangażowania użytkowników i konwersji, ale powolna witryna lub błędy wydajności mogą sprawić, że nawet najlepiej zaprojektowana witryna internetowa będzie działać gorzej. Diib to jedno z najlepszych na świecie narzędzi do monitorowania wydajności i SEO. Diib wykorzystuje moc big data, aby szybko i łatwo zwiększyć ruch i rankingi. Jak widać w Przedsiębiorcy!

• Łatwe w użyciu automatyczne narzędzie SEO
• Monitorowanie słów kluczowych i linków zwrotnych + pomysły
• Zapewnia szybkość, bezpieczeństwo, + śledzenie Core Vitals

• Inteligentnie sugeruje pomysły na poprawę SEO
• Ponad 250 000 000 członków na całym świecie
• Wbudowane testy porównawcze i analiza konkurencji

Na przykład „www.diib.com”

Zarejestruj się za darmo

Używany przez ponad 250 tys. firm i organizacji:

• 
• 
• 
• 

Synchronizuje się z

Pisz dla ludzi

Jeśli chodzi o pisanie tekstów alternatywnych, zasada kciuka brzmi: „pisz tak, jak piszesz dla osoby niewidomej”. Biorąc pod uwagę sytuacje, w których wyświetlany jest tekst alternatywny, przestrzeganie reguły przez cały czas nie zaszkodzi. Jak wspomniano, informacje zawarte w tytule img alt pojawiają się, gdy nie można wyświetlić obrazów. Dlatego chcesz, aby powiedział wszystko o ukrytym obrazie.

W związku z tym napisz oświadczenie, które człowiek może przeczytać i zrozumieć. Co ważniejsze, skomponuj zdanie opisowe. Osoba niewidoma może nawigować po Twojej witrynie, a to, co wpisałeś, będzie jedyną rzeczą, przez którą można przejść. Poniższy obrazek pokazuje dobry i zły przykład tekstu alternatywnego dla tego samego obrazu:

(Źródło zdjęcia: Web Hosting Hub)

Napisz dla wyszukiwarek

Tekst alternatywny zapewnia nie tylko opis obrazu użytkownikom, ale także wyszukiwarkom. Dlatego umieść w nim słowo kluczowe. Podobnie jak inne treści, pamiętaj, że zawiera słowo kluczowe, które rymuje się z ogólnym przepływem strony internetowej, na której znajduje się obraz.

W tym samym tonie, trzymaj się złych praktyk SEO, takich jak upychanie słów kluczowych. Wyszukiwarki oznaczą Twoje treści jako spam, co obniży Twoją pozycję w rankingu. Lepiej jest napisać tekst alternatywny kiepsko niż wpisywać go słowami kluczowymi. W ramach kontroli upewnij się, że nie używasz słowa kluczowego w więcej niż 70% obrazów.

Trzymaj to krótko

Tekst alternatywny opisuje obraz i może być kuszące umieszczenie wielu słów w cudzysłowie atrybutu alt. Ale powstrzymaj się od tego. Wyszukiwarki nie będą cię za to karać, ale ich zainteresowanie leży w pierwszych szesnastu słowach alternatywnego opisu. 125-znakowy tekst alternatywny powinien odpowiednio opisywać obraz bez pogarszania komfortu użytkownika.

Jeśli jednak uważasz, że obraz wymaga długiego opisu, dobrze jest użyć atrybutu „longdesc”. HTML4 i jego następcy dopuszczają ten atrybut w tagu obrazu.

Przykłady tekstu alternatywnego

Kiedy dopiero zaczynasz pracę z SEO, zrozumienie różnicy między dobrym i źle napisanym tekstem alternatywnym może być trochę trudne. Z tego względu przyjrzenie się przykładom jest bardzo przydatne. W celach ilustracyjnych wyobraź sobie obraz czerwonego pędzącego samochodu na swojej stronie internetowej.

Twój tag obrazu może wyglądać mniej więcej tak:

img src=”przyspieszony-samochód.jpg” alt=”czerwony samochód” title=”samochód”

W takim przypadku tekst alternatywny nie jest idealny. Dostarcza bardzo mało informacji dotyczących obrazu. Lepsza wersja może pojawić się jako:

img src=” speeding-car.jpg” alt=”czerwony samochód pędzący na autostradzie” title=”samochód”

Jeśli znasz nazwę autostrady, nie ma nic złego w wymienieniu jej w tekście alternatywnym. Za wszelką cenę unikaj narażania słów kluczowych lub upychania słów kluczowych. Na przykład, jeśli kluczową frazą Twojej strony internetowej jest „czerwony samochód”, pomiń opis taki jak:

img src=”speeding-car.jpg” alt=”To jest czerwony samochód. Czerwony samochód porusza się bardzo szybko i jest takim pięknym czerwonym samochodem” title=”samochód”

Chociaż powyższy opis skupia się wyłącznie na obrazie, upychanie słów kluczowych go skazi. Wyszukiwarki będą marszczyć brwi na takie spamerskie frazy. Drugie zdanie nie dostarcza użytkownikowi przydatnych informacji o obrazie. W związku z tym najrozsądniejszą rzeczą do zrobienia jest wykluczenie go.

Jak dodać tekst alternatywny

Procedura umieszczania tekstu alternatywnego w tagu obrazu zależy od tego, czego użyłeś do stworzenia strony internetowej. Jeśli napisałeś twardy kod witryny, lepiej dodać alternatywny atrybut ręcznie. Na przykład:

Jednak dzisiejsze tworzenie stron internetowych prawie nie wymaga twardego kodowania. Możliwe, że korzystałeś z systemu zarządzania treścią (CMS) lub narzędzia do tworzenia witryn internetowych. Pamiętaj, aby dowiedzieć się, jakiego procesu używa Twoje narzędzie do projektowania stron internetowych podczas dodawania wszystkich tekstów. Zazwyczaj metodologia obejmuje dwa lub trzy kroki.

W najpopularniejszym na świecie systemie CMS, WordPress, dodanie tytułu HTML img alt to spacer po parku. Po zalogowaniu się na swoje konto zlokalizuj dany obraz i kliknij przycisk „Edytuj”. Wydaje się, że pole wejściowe jest gotowe do odbioru danych alternatywnego atrybutu.

Możesz dołączyć teksty alternatywne do biblioteki multimediów WordPressa. Po wybraniu obrazu znajdź alternatywne pole wprowadzania opisu wyświetlane poniżej szczegółów załącznika obrazu. Na przykład:

(Źródło zdjęcia: WPBeginner)

Kiedy zostawić pusty atrybut Alt?

Biorąc pod uwagę istotną rolę, jaką atrybuty alt odgrywają w SEO, może być trudno uwierzyć, że czasami dobrym pomysłem jest pozostawienie ich pustych. Zdjęcie obrazu umieszczonego na stronie internetowej wyłącznie w celach pozycjonowania. Obraz nie rymuje się z treścią ani nie dodaje jej wartości. Projektant stron internetowych może używać takich obrazów wyłącznie w celu dekoracji strony.

Takie obrazy przeznaczone tylko do projektowania mogą mieć pusty alternatywny atrybut. Opisywanie ich byłoby nierozważne, ponieważ nie dodają wartości do dostępnej treści. Czytniki ekranu będą pomijać obrazy, co jest w porządku, ponieważ nie pomagają użytkownikowi lepiej zrozumieć strony.

Dobrą praktyką jest również wykluczenie tekstu alternatywnego w przypadku obrazów zawierających słowa. Wszystkie informacje znajdują się na obrazku. Opis słów byłby zatem nieistotny.

Optymalizacja tytułu

Ponieważ tytuł nie wpływa na ranking wyszukiwania, nie ma z tym wiele do zrobienia. W większości przypadków jest krótszy i mniej opisowy niż tekst alternatywny. Zamiast podawać więcej informacji o obrazie, tytuł nadaje mu nazwę.

Jednak W3C otwarcie opowiada się za umieszczeniem tytułu w tagu obrazu. Twój kod HTML może być nieprawidłowy w W3C, jeśli nie zatytułujesz swoich zdjęć.

Pisząc tytuł, skomponuj tekst, który jest nie tylko krótki, ale także chwytliwy. To powiedziawszy, tytuły jednowyrazowe są nie do przyjęcia. Powinno wystarczyć fraza opisująca obraz i składająca się z nie więcej niż dziesięciu słów. Na przykład:

W przeciwieństwie do tagu alt, który czasami możesz pominąć, nie ma żadnych specjalnych zdarzeń, które uzasadniałyby wykluczenie tytułów obrazów. Obrazy bez tytułu służą jedynie do pogorszenia komfortu użytkowania. W związku z tym w najlepszym interesie każdego specjalisty SEO jest, aby nie renderować pustego tagu obrazu HTML w tytule.

Mamy nadzieję, że ten artykuł okazał się przydatny.

Jeśli chcesz dowiedzieć się więcej o kondycji swojej witryny, uzyskać osobiste rekomendacje i alerty, przeskanuj swoją witrynę przez Diib. Zajmuje to tylko 60 sekund.

Wejdź na swoją stronę internetową

Na przykład „www.diib.com”

Zarejestruj się za darmo

Nie mogę się nacieszyć DIIB!! Najlepsze narzędzie i jestem bardzo wdzięczna za jego znalezienie. Absolutnie to uwielbiam!! Trzymamy kciuki, żebyście nie podnosili cen, bo to jest idealne.

Katarina Gage
Dyrektor Operacyjny w ahoymatey.com.au

Inne uwagi dotyczące obrazu

Niewątpliwie obrazy to coś więcej niż teksty alternatywne i tytuły. Optymalizacja pierwszego i doskonalenie drugiego to tylko część równania. Aby w pełni wykorzystać wpływ obrazów na SEO, rozważ następujące sprawdzone metody dotyczące obrazów internetowych:

Zachowaj kluczowe dane tekstowe poza obrazami

Lepiej pisać słowa niż malować je na obrazie. Pamiętaj, że wyszukiwarki nie indeksują obrazu dogłębnie i nie mają dostępu do słów na obrazie. O ile HTML nie wyświetla danych tekstowych tak, jak chcesz, na przykład podczas pisania złożonych równań chemicznych, unikaj obrazów wypełnionych słowami.

Jednak używanie zdjęć do wyświetlania wykresów nie jest szkodliwe. HTML może zapewnić funkcjonalność, ale obrazy są lepszym rozwiązaniem.

Uważaj na kontekst

Wyświetlany obraz powinien łączyć się z informacjami zawartymi w sekcji. Umieszczenie zdjęcia samochodu na stronie poświęconej odzieży outdoorowej byłoby złym pomysłem. Jednocześnie pozwól, aby Twoje obrazy były jak najbardziej oryginalne. Wyszukiwarki cenią oryginalne zdjęcia, ponieważ cenią autentyczne treści.

Napisz dobrą nazwę pliku obrazu

Nazwy plików pojawiają się w atrybucie tytułu img src znacznika obrazu. Wyszukiwarki używają go, aby dowiedzieć się więcej o obrazach w Twojej witrynie.

Domyślnie obrazy mają alfanumeryczne nazwy plików, takie jak:

A00002.jpg

Pamiętaj, aby zmienić nazwy tak, aby odzwierciedlały zawartość obrazu. Przy tym pamiętaj o dzieleniu wyrazów w nazwach plików, które przekraczają jedno słowo. Nazwa taka jak red-car-on-highyway.jpg byłaby trudna do odczytania przez wyszukiwarki, gdyby brakowało łączników. Nie zmieniaj jednak formatu obrazu, czyli liter po kropce. Przeglądarki mogą się pomylić, jeśli format różni się od podanego w nazwie pliku.

Niech Twoje obrazy tworzą różnicę w SEO

Jeśli chodzi o SEO, nie ma argumentu, że content jest królem. Ale obrazy są tak samo częścią zawartości Twojej witryny, jak słowa. Ucząc się sztuki doskonalenia tytułu HTML img i optymalizacji tytułu HTML img alt, możesz zacząć używać obrazów, aby poprawić ranking swojej witryny.

Diib: Zoptymalizuj swoje tytuły obrazów już dziś!

Jeśli utkniesz w używaniu obrazów do SEO, pamiętaj, aby sprawdzić setki narzędzi przeznaczonych do optymalizacji zdjęć. Możesz również zaangażować specjalistę ds. SEO, aby pomógł w Twojej witrynie, gdy skoncentrujesz się na swojej działalności. Ale zanim pomyślisz tak daleko, weź pierwszy i zacznij samodzielnie używać obrazów, aby zwiększyć ruch. Następnie nawiąż współpracę z Diib Digital, aby jak najlepiej wykorzystać swoje tytuły obrazów. Nasz panel użytkownika zapewnia alerty i cele mające na celu optymalizację między innymi tytułów obrazów.

Oto kilka cech, które wyróżniają nas z tłumu:

• Indywidualne cele zaprojektowane w celu zwiększenia wydajności witryny
• Alerty informujące o innych technicznych problemach związanych z SEO w witrynie Domain Authority
• Zepsute strony, na których masz linki zwrotne (kontroler 404)
• Narzędzia do monitorowania i śledzenia słów kluczowych, linków zwrotnych i indeksowania
• Doświadczenie użytkownika i optymalizacja prędkości mobilnej
• Optymalizacja tytułu obrazu
• Specyficzna wydajność postu na platformie

Kliknij tutaj, aby uzyskać bezpłatny skan lub po prostu zadzwoń pod numer 800-303-3510, aby porozmawiać z jednym z naszych ekspertów ds. rozwoju.