Zrozumienie atrybutu tytułu obrazu

Optymalizacja obrazów Twojej witryny to niełatwe zadanie. Nie tylko musisz upewnić się, że ich rozmiary plików są możliwe do zarządzania, aby zapobiec długiemu czasowi ładowania strony, ale także oferują wiele możliwości poprawy optymalizacji pod kątem wyszukiwarek (SEO), które łatwo przeoczyć. Na przykład możesz nie znać atrybutu tytułu obrazu i roli, jaką odgrywa on w elementach wizualnych Twojej witryny.

W tym poście rzucimy trochę światła na atrybut tytułu obrazu, omówimy, czym różni się od atrybutu alt i porozmawiamy o tym, co to oznacza dla Twojej strategii SEO. Pokażemy Ci również, jak ukryć go przed odwiedzającymi Twoją witrynę.

Zanurzmy się od razu!

Subskrybuj nasz kanał YouTube

Wprowadzenie do atrybutu tytułu obrazu

Po pierwsze: atrybut tytułu obrazu nie jest taki sam jak nazwa pliku obrazu. Są to raczej informacje, które mogą być zawarte w tagu HTML zdjęcia lub grafiki. Oto przykład z atrybutem title na końcu:

<img src="filename.jpg" alt="description of your image" title="image title">

Najbardziej zauważalny wpływ atrybutu title polega na tym, że użytkownicy widzą go jako „podpowiedź” w interfejsie witryny po najechaniu kursorem na obraz:

Nie wszystkie przeglądarki obsługują tę funkcję. Jednak Firefox jest jednym z niewielu, który to robi i jest trzecią najpopularniejszą przeglądarką w sieci. Możesz dodać atrybuty tytułu obrazu w WordPress za pośrednictwem biblioteki multimediów. Wystarczy kliknąć dany obraz i wypełnić pole Tytuł :

Możesz również dodać go bezpośrednio w Edytorze bloku. Rozwiń Ustawienia zaawansowane dla bloku obrazu i wypełnij pole Atrybut tytułu :

Celem wyświetlania tytułu obrazu po najechaniu kursorem jest zapewnienie nieco dodatkowego kontekstu dla odwiedzających. Na przykład niektórzy twórcy treści będą zawierać nazwiska osób przedstawionych na obrazie lub kluczowe informacje, z których użytkownicy mogą skorzystać.

Nie chcesz jednak polegać wyłącznie na atrybucie title, zwłaszcza że nie jest on widoczny dla użytkowników we wszystkich przeglądarkach. W niektórych przypadkach podpis może być skuteczniejszy. Ponadto należy zawsze dodawać tekst alternatywny do obrazów, nawet jeśli mają one atrybuty tytułu.

Tworząc atrybuty tytułu, najlepiej skrócić je do kilku słów. Bądź selektywny i opisowy, aby tekst po najechaniu nie był zbyt długi i zapewniał wartość odwiedzającym.

Różnica między atrybutem tytułu a atrybutem Alt

Wspomnieliśmy wcześniej, że ważne jest, aby dodać tekst alternatywny do obrazów, nawet jeśli masz atrybut tytułu. Częstym błędem twórców treści jest mylenie atrybutu tytułu obrazu z atrybutem alt lub zakładanie, że używanie obu jest przesadą.

Atrybut alt określa tekst alt obrazu w jego znaczniku HTML. Jest to drugi atrybut wymieniony w naszym przykładzie z poprzedniego:

<img src="filename.jpg" alt="description of your image" title="image title">

Celem tekstu alternatywnego jest opisanie elementów wizualnych użytkownikom, którzy ich nie widzą, ponieważ obraz nie został załadowany lub korzystają z czytnika ekranu. Ten tekst będzie wyświetlany zamiast obrazu w przypadkach, gdy nie można go wyrenderować:

W WordPressie możesz dodawać tekst alternatywny do obrazów za pośrednictwem biblioteki multimediów lub ustawień dowolnego bloku obrazu w edytorze bloków. Jest to kluczem do zapewnienia, że ​​Twoja witryna spełnia standardy ułatwień dostępu, dlatego gorąco do tego zachęcamy.

Niezwykle ważne jest, aby nie próbować używać atrybutu tytułu obrazu do zastąpienia atrybutu alt. Nie wszystkie czytniki ekranu obsługują atrybut tytułu, a użytkownicy korzystający z nawigacji za pomocą klawiatury nie mogą najechać kursorem na obraz, aby go zobaczyć, co może prowadzić do poważnych problemów z ułatwieniami dostępu w Twojej witrynie.

Jak atrybut tytułu obrazu wpływa na SEO

Istnieje wiele mieszanych komunikatów, jeśli chodzi o to, jak ważny jest atrybut tytułu obrazu dla SEO. Niektórzy twierdzą, że jest to doskonały sposób na włączenie dodatkowych słów kluczowych, podczas gdy inni twierdzą, że boty wyszukiwarek nawet ich nie indeksują.

Aby przejść do sedna, atrybut tytułu obrazu nie jest bezpośrednim czynnikiem rankingowym. Optymalizacja zdjęć poprzez dodanie tytułów do wszystkich z nich prawdopodobnie nie wpłynie znacząco na widoczność Twoich stron w wynikach wyszukiwania.

Jednak uwzględnienie atrybutów tytułu również nie zaszkodzi Twojej witrynie z punktu widzenia SEO. W rzeczywistości Google to zaleca. Jeśli boty wyszukiwarek je indeksują i włączysz słowa kluczowe, możesz przynajmniej poprawić swoje obrazy w wynikach wyszukiwania grafiki Google.

Ponadto tytuły obrazów mogą poprawić wrażenia użytkownika (UX) witryny, udostępniając kluczowe informacje odwiedzającym. Może to pośrednio przyczynić się do SEO, wpływając na czynniki rankingowe, takie jak wyświetlenia strony, czas trwania sesji i inne tego typu wskaźniki.

Mimo to, jak już kilkakrotnie wspominaliśmy, nie wszystkie przeglądarki i urządzenia obsługują tekst po najechaniu kursorem. Przeglądanie biblioteki multimediów i dodawanie tytułów do każdego pliku może być ogromną stratą czasu, jeśli większość użytkowników nigdy go nie zobaczy.

Jak ukryć podpowiedź tytułu obrazu w WordPress?

Możesz chcieć ukryć podpowiedź tytułu obrazu. Być może obawiasz się, że użytkownicy uznają to za irytujące lub będą chcieli używać go głównie do celów SEO, ale nie uważasz, że jest to konieczne, aby pomóc czytelnikom zrozumieć Twoje treści.

Możesz po prostu usunąć atrybut tytułu ze swoich obrazów w Edytorze bloku i Bibliotece multimediów. Jednak stracisz wtedy wszelkie potencjalne korzyści SEO, które możesz z tego wyciągnąć.

Większość osób, które chcą ukryć podpowiedź, dodaje JavaScript do swoich witryn, aby zachować atrybut w tagach graficznych, ale zapobiec wyświetlaniu go w interfejsie użytkownika. Zalecamy użycie wtyczki, takiej jak Wstaw nagłówki i stopki, aby ułatwić ten proces.

Dodaj następujący kod w sekcji <head> , opakowany w tagi skryptu:

jQuery(document).ready(function($) {
    $('img[title]').each(function() { $(this).removeAttr('title'); });
});

Jeśli używasz Divi, możesz pominąć instalowanie dodatkowej wtyczki i dodać ten kod, przechodząc do Divi> Opcje motywu> Integracja :

Pierwszy edytor kodu na tym ekranie doda kod JavaScript do sekcji <head> Twojej witryny, tak jak zrobiłby to Wstaw nagłówki i stopki.

Wniosek

Możesz tworzyć treści online przez lata i nigdy nie myśleć o atrybutach tytułów swoich obrazów. Jednak całkowite ich zignorowanie może być straconą okazją do zapewnienia użytkownikom dodatkowego kontekstu. Co ważniejsze, niewłaściwe użycie tego atrybutu może mieć negatywne konsekwencje dla dostępności witryny i SEO.

W tym poście omówiliśmy różnice między atrybutem tytułu obrazu a atrybutem alt, aby zmaksymalizować SEO. Omówiliśmy również, jak ukryć podpowiedź tytułu obrazu w interfejsie, aby odwiedzający nie mogli jej zobaczyć, gdy najadą kursorem na zdjęcie lub grafikę.

Czy masz pytania dotyczące atrybutu tytułu obrazu lub optymalizacji obrazu? Zostaw je dla nas w sekcji komentarzy poniżej!

Zdjęcie autorstwa Jane Kelly / Shutterstock.com