Atrybut alt i Title – jak prawidłowo je wykorzystać? Poznaj dobre praktyki SEO

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 Core Web Vitals przeczytasz w tym wpisie: https://www.grupa-icea.pl/czym-sa-core-web-vitals-i-w-jakis-sposob-wplywaja-na-pozycjonowanie-strony-internetowej/

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!