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, 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.
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
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”.
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).
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?
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/
Wiesz już, czym jest atrybut alt i title. Poniżej najważniejsze zasady tworzenia atrybutu alt:
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!
Rozpocznij
od bezpłatnej
konsultacji SEO
Zainwestuj w szczegółową konsultację SEO i dowiedz się więcej na temat wydajności Twojego sklepu internetowego. Przeprowadzimy dla Ciebie kompleksową analizę, dzięki której uzyskasz jasny obraz tego, co należy poprawić.
Dziękujemy za kontakt.
Pozycjonujemy biznesy od 2007 roku. Pozwól, że zrobimy to za Ciebie!
Wrócimy z odpowiedzią w ciągu 72 godzin. Sprawdź swoją skrzynkę e-mailową, aby uzyskać więcej informacji.