Atrybut alt i Title – jak prawidłowo je wykorzystać? Poznaj dobre praktyki SEO
Atrybut alt, jak i atrybut title są pewnie znanymi Ci atrybutami podczas dodawania obrazków, ale czy wykorzystujesz je dobrze? Koniecznie przeczytaj ten wpis, a znajdziesz odpowiedzi na swoje pytania! Zacznijmy jednak od małego wprowadzenia – jak sprawdzić adres URL obrazka oraz atrybut alt i title? Wystarczy, że klikniemy na obrazek prawym przyciskiem myszy, a następnie wybierzemy „zbadaj element”.
Atrybut alt – jak go zoptymalizować i czym tak właściwie jest?
Atrybut alt, który znajduje się w znaczniku <img> służy do opisania tego, co przedstawia dany obraz.
Jest bardzo przydatny w momencie, gdy obrazek się nie załaduje. W takim przypadku w miejscu grafiki wyświetli nam się informacja zastępcza. Przedstawię Ci ten przypadek ponownie na tym samym przykładzie.
Jak już pewnie widzisz, mamy ustawiony atrybut alt „Grupa iCEA”. Jak to działa w przypadku, gdy obrazek się nie załaduje? Otóż w tym momencie wyrenderowana zostanie ikonka, która wskazuje na brak obrazka, a użytkownikowi wyświetli się atrybut alt. Jednak to była pierwsza korzyść z ustawienia alternatywnego opisu obrazka. Drugą, i zarazem dla większości osób najważniejszą, jest zwiększenie widoczności w Internecie.
Jak zoptymalizować atrybut alt?
Optymalizując atrybut alt, w pierwszej kolejności powinniśmy zwrócić uwagę na to, aby zawierał frazę kluczową. Jednak w tym wszystkim należy zachować rozsądek i nie stosować keyword stuffingu oraz atrybutów alt dla obrazków dekoracyjnych. Sam atrybut powinien być też zwięzły i szczegółowy. Przykładowo – mamy obrazek, który przedstawia samochód Mercedes-AMG A 45.
Źródło: MelikHamdi/pixabay.com
Atrybut title – jak prawidłowo go stworzyć?
Zasady opisywania atrybutu title są podobne jak tekstu alternatywnego. Z tym, że w atrybucie title nie powinniśmy opisywać go aż tak szczegółowo. Bazując na przykładzie powyższego samochodu, w tytule obrazka powinniśmy wpisać „Mercedes AMG A 45”. Pewnie zadajesz sobie pytanie dlaczego i gdzie on się wyświetla? Otóż atrybut title możemy podejrzeć najeżdżając kursorem na grafikę. W przypadku klikalnego obrazka w atrybucie title powinniśmy ustawić „Powiększ Mercedes AMG A 45”.
Jak sprawdzić zaindeksowane grafiki?
Warto wiedzieć, jak sprawdzić zaindeksowane obrazki w wyszukiwarce. Wystarczy wpisać w wyszukiwarkę “site:domena.com”, a następnie przejść do “grafika”. W tym momencie jesteśmy w stanie przejrzeć wszystkie zaindeksowane pliki graficzne.
Warto pamiętać, że Google dobrze sobie radzi z interpretacją zawartości obrazka. Zresztą możesz zobaczyć sam – Vision API (https://cloud.google.com/vision).
Kompresja obrazków
Najczęściej grafiki na stronie internetowej spowalniają jej ładowanie. Zadbaj więc, aby przed wstawieniem zdjęcia na stronę internetową zostało ono najpierw skompresowane. W tym celu możemy wykorzystać mnóstwo darmowych rozwiązań np. kompresja przez program graficzny GIMP ( https://www.gimp.org/), czy też ostatnio coraz częściej wybierane TinyJPG (https://tinyjpg.com/). Przeciętna strona usługowa rzadko kiedy przekracza rozmiar 1 MB, zatem ładowanie kilku obrazów, z których każdy ma rozmiar 2 MB będzie spowalniać stronę. Optymalizacja obrazów jest naprawdę prosta, przy tym bardzo skuteczna. Nikt z nas nie lubi czekać długo aż strona się załaduje, prawda?
Zawsze podawaj rozmiar obrazka HTML – szerokość i wysokość
Częstym błędem jest nieokreślenie rozmiaru obrazka w kodzie HTML. Przeglądarki internetowe w momencie renderowania strony muszą czekać na jej załadowanie, aby poznać rozmiar obrazu i przestrzeń zarezerwowaną na zdjęcie. Dodatkową korzyścią, oprócz szybszego załadowania strony, jest także spełnienie części wymagań Core Web Vitals, a dokładniej wskaźnika CLS. Z pewnością pozytywnie wpłynie to na pozycjonowanie.
Więcej o SEO z zakresu o Core Web Vitals przeczytasz w tym wpisie: https://www.grupa-icea.pl/blog/page-speed-insights-na-jakie-wskazniki-zwrocic-uwage/
Podsumowanie
Wiesz już, czym jest atrybut alt i title. Poniżej najważniejsze zasady tworzenia atrybutu alt:
- używaj oryginalnych opisów alternatywnych;
- unikaj keyword stuffingu;
- szczegółowo i zwięźle opisuj to, co widzisz na obrazku;
- stosuj frazę kluczową.
W przypadku atrybutu title należy pamiętać o mniejszej szczegółowości i dodatkowo, powinien on wskazać użytkownikowi ewentualną akcję, która zostanie wykonana po kliknięciu na obraz. Warto również pamiętać o innych zasadach, które wymieniłem w tym artykule. Miłej optymalizacji grafik!
