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.

    Czym jest plik robots.txt? Jaki ma wpływ na SEO i jak prawidłowo go skonfigurować?
    Czym jest plik robots.txt? Jaki ma wpływ na SEO i jak prawidłowo go skonfigurować?
    Jedną z pierwszych rzeczy, którą powinieneś zrobić podczas pracy nad technicznym SEO swojej strony internetowej, jest optymalizacja pliku robots.txt. Niestety […]
    Słowa kluczowe – jak je dobrze wybrać? Narzędzia i sposoby na dobór fraz do pozycjonowania
    Słowa kluczowe – jak je dobrze wybrać? Narzędzia i sposoby na dobór fraz do pozycjonowania
    Słowa kluczowe to podstawa działań SEO. Należy wiedzieć, jak je znaleźć i jak nimi operować, aby przełożyły się na sukces Twojej strony internetowej.
    Na czym polega depozycjonowanie i jak się przed nim uchronic?
    Na czym polega depozycjonowanie i jak się przed nim uchronic?
    Depozycjonowanie to atak wymierzony w konkurencję i zajmowane przez nią pozycje w SERP. Jakie formy przybiera negatywne SEO i jak się przed nim bronić?
    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.