Zapytaj o ofertę
Atrybut alt i Title – jak prawidłowo je wykorzystać? Poznaj dobre praktyki SEO
  • ICEA
  • /
  • Blog
  • /
  • Atrybut alt i Title – jak prawidłowo je wykorzystać? Poznaj dobre praktyki SEO

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

4 min. czytania

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”.

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.

Jak zobaczyć atrybut alt poprzez zbadaj element

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.

Przykład niezaładowanego obrazka - wyświetlanie atrybutu alt

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.

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.

Sprawdzanie indeksacji obrazków

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!

Zamów bezpłatny audyt SEO.
Dowiedz się, co w pozycjonowaniu Twojej strony możemy zrobić lepiej. Umów się na niezobowiązujące spotkanie z naszym specjalistą.

    Dziękujemy za wiadomość!

    Oddzwonimy na wskazany numer telefonu, aby umówić się na dogodny dla Ciebie termin niezobowiązującej konsultacji z naszym specjalistą.

    Do usłyszenia!

    Oceń tekst
    Średnia ocen 5/5 . Liczba ocen: 7
    Dodaj komentarz

    Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

    *

    *

    Blog

    Dzielimy się tym, co wiemy i co umiemy.

    Sposoby na weryfikację i przejęcie wizytówki Google
    Sposoby na weryfikację i przejęcie wizytówki Google
    Przedsiębiorcy działający głównie na lokalnych rynkach szukają sposobów zwiększania widoczności w odmętach sieci. W tym celu zakładają wizytówki Google.
    Czy tworzenie opisów kategorii jest konieczne?
    Czy tworzenie opisów kategorii jest konieczne?
    Hasło “Content is King!” nie straciło na ważności. Jak jednak tworzyć treści w sklepie internetowym, aby sprzedawać? Odpowiedź stanowią opisy kategorii.
    Co to jest landing page i jak go stworzyć? Jakie ma znaczenie w procesie pozycjonowania?
    Co to jest landing page i jak go stworzyć? Jakie ma znaczenie w procesie pozycjonowania?
    Dlaczego mało popularne strony mogą osiągać wysokie wyniki sprzedażowe? Od czego to zależy? Warto dowiedzieć się, czym jest landing page!
    Przeprowadzimy dla Ciebie darmowy audyt e-commerce.

    W trakcie konsultacji wideo z analitykiem wzrostu:

    • Otrzymasz raport widoczności Twojej strony internetowej.
    • Omówimy efektywność Twoich obecnych kampanii reklamowych.
    • Skoncentrujemy się na analizie doświadczenia użytkownika na Twojej stronie e-commerce.
    Umów się na spotkanie
    Paweł Borowik Head of Sales
    Paweł Borowik
    Head of Sales
    Paweł Borowik
    Head of Sales
    Paweł Borowik Head of Sales
    Dowiedz się, jak możemy zwiększyć efektywność rozwoju Twojej platformy e-commerce.
    Zamów bezpłatny audyt e-commerce. Skontaktujemy się z Tobą, aby umówić Cię na niezobowiązującą konsultację z naszym analitykiem.

      Twoja rola w firmie
      Twoja rola w firmie
      Dziękujemy za wiadomość!

      Oddzwonimy na wskazany numer telefonu, aby umówić się na dogodny dla Ciebie termin niezobowiązującej konsultacji z naszym specjalistą.

      Do usłyszenia!

      Dołącz do newslettera
      Solidna dawka wiedzy co dwa tygodnie na Twoim mailu.