Optymalizacja obrazków SEO – atrybuty ALT oraz TITLE

28 kwietnia 2017 | Po godzinach - Wszystkie wpisy, Poradnik | 5 Komentarze

Jakiś czas temu opisałem metody optymalizacji wielkości obrazków, dzięki czemu strona internetowa szybciej się wczytuje i otrzymujemy więcej punktów od Google.
Dziś czas na drugi krok optymalizacji obrazu na stronie. Tym razem jest to bardziej SEO*, ponieważ dodamy teksty do naszych zdjęć.

mokra ruda wiewiórka siedzi na słupku i je orzecha

Google pomimo swoich zaawansowanych algorytmów nie jest w stanie analizować zawartości obrazu, aby na tej podstawie różnicować wyniki szukania. W pewnym zakresie robi to, ale jest to bardzo uproszczony mechanizm.
Dlatego właśnie powinniśmy dodać do zdjęcia tekst z opisem co jest prezentowane na tym obrazie. Dzięki temu zwiększamy szanse wyszukania naszej grafiki w wyszukiwarce obrazów Google. A stamtąd ktoś może już kliknąć na naszą stronę.

Drugi powód umieszczania tekstu to ułatwienie życia internautom, którzy mają problemy ze wzrokiem. Osoby te korzystają z czytników stron, które przeczytają opis jaki jest dołączony do obrazka.

Trzy kroki optymalizacji SEO

1. Atrybut ALT
Tutaj zamieszczamy opis naszej grafiki. Powinien on być w miarę szczegółowy, ponieważ atrybut ALT odczytują czytniki ekranu dla osób niewidomym i niedowidzących. Czytnik taki zamienia tekst na dźwięk, korzystając z syntezatora mowy lub wysyła tekst do brajlowskiego urządzenia wyjściowego.
Dlatego nie bójmy się porządnie opisywać wstawiane przez nas zdjęcia.

2. Atrybut TITLE
To tekst wyświetlany w chmurce po najechaniu wskaźnikiem myszki na obrazek. Warto wykorzystać go do umieszczania zachęty do zapoznania się z grafiką, lub jeśli to jest banerek, do przejścia na wskazaną stronę.

3. Odpowiednia nazwa pliku
Warto też nazwać plik zgodnie z tym co on prezentuje. To troszkę zalatuje czarną magią, ale wrony o tym czasami kraczą to tam i tu, więc nie zaszkodzi.
Logicznie rozpatrując mamy tu dwie strony medalu, czyli za i przeciw:

  • Google ma mało danych jeśli chodzi o zawartość obrazu, może wykorzystać atrybuty ALT i TITLE, więc może i posiłkować się nazwą pliku lub też katalogów. Poza tym zapewne bierze pod uwagę otoczenie obrazu, czyli treść na stronie oraz w jakich znacznikach jest zawarta (kolejno zaczynając od sekcji meta, przechodząc dalej do nagłówków, a kończąc już na treści w najbliższym sąsiedztwie obrazka.
  • Jeśli Google brałoby pod uwagę nazwę pliku lub nazwy w ścieżkach użytych do plików, wtedy dość łatwo można by wpływać na wyniki szukania, choćby w wyszukiwarce obrazu.

Każdy obrazek powinien posiadać uzupełniony atrybut ALT. Title nie musimy wypełniać, ale ALT jest wskazany choćby ze względu na osoby mające problemy ze wzrokiem.
A co jeśli wstawiany obrazek jest tylko ozdobą? W takim wypadku należy zostawić pusty atrybut ALT, wtedy czytniki ekranu pominą ten obrazek.

Poniżej jak wygląda cały kod. Zauważ, że nazwa jest krótka i rzeczowa, następnie ALT, który jest dość szczegółowym wyjaśnieniem zawartości zdjęcia, a na końcu zachęta do kliknięcia.

<img src=”ruda-mokra-wiewiorka.jpg” alt=”mokra ruda wiewiórka siedzi na słupku i je orzecha” title=”Zobacz jak wygląda zmoknięta ruda wiewiórka” />

Celowo użyłem określenia ruda, ponieważ są też wiewiórki, którym matka natura poskąpiła uroku, mam na myśli te szare 😉

SEO – Dla tych czytelników którzy nie wiedzę co oznacza ten skrót. Z angielskiego Search Engine Optimization, czyli optymalizacja dla wyszukiwarek internetowych.

Autor tekstu:

Autor tekstu:

Tomasz Bartosiewicz - Ojciec dyrektor

Ojciec bo pełni funkcję taty dla dwójki cudownych dusz, a dyrektor, bo jest szefem w ITB Vega 😉
Co mnie kręci: świat technologii oraz jak można go użytecznie wykorzystywać, maratony w basenie, wędrówki po starych górach, robienie zdjęć.
Mieszkam i pracuję w Bydgoszczy, ale wykonuję sporo prac zdalnych. Jeśli szukasz kogoś do stworzenia strony internetowej lub do jej aktualizacji, zadzwoń, z przyjemnością porozmawiam o Twoich potrzebach
507 96 11 46

5 komentarzy

  1. Grafik Komputerowy

    Bardzo dobry artykuł, dziękuję za niego.
    Moim zdaniem warto stosować zarówno „title” oraz „alt” jednocześnie bo to dwie odmienne rzeczy:
    „title” – np dla osób korzystających z czytników stron (niedowidzących) (raczej krótki opis – 2-3 słowa zwięźle)
    „alt” – jako tekst który się wyświetli np gdy grafika się nie wczyta (może być nieco dłuższy opis – np: 1 krótkie zdanie nawet)

    Zgodzę się z autorem że warto stosować jedno i drugie rozwiązanie. Wyszukiwarki lubią te strony które mają rozsądną treść. Tak więc te opisy powinny mieć sens – opisywać to co w rzeczywistości znajduje się na grafikach.

  2. Tomasz Bartosiewicz

    Aga, ja właśnie tak bym zrobił. Dodatkowo uwzględniłbym główne elementy obrazu. Może na przykład coś istotnego znajduje się w tle? A może obiekt na którym siedzi ruda wiewiórka jest istotny? A sama wiewiórka może być zmoknięta, jak na załączonej we wpisie fotografii. Może się rozgląda, może coś zajada? Ogólna zasada: patrzysz na obraz i chcesz o nim komuś w skrócie opowiedzieć – tym się kieruj.

  3. Aga

    Krótko, zwięźle i na temat. Zastanawia mnie tylko co zrobić kiedy na stronie mamy np 20 zdjęć tej wiewiórki. Opisujemy je „ruda wiewiórka siedzi” „ruda wiewiórka skacze” itp itd?

  4. Tomasz Bartosiewicz

    Warto stosować oba rozwiązania. Ale jak reaguje na to Google, takiej wiedzy niestety nie posiadam. Tu należałoby zrobić wiele testów, aby móc ocenić przydatność. Pewne jest, że Google zwraca na to uwagę, ale w jakim stopniu, to już każdy swoją bajkę na ten temat opowiada 😉

  5. Kizi Mizi

    Nie piszesz czy do obrazka można zastosować oba rozwiązania. Np:
    title=zagraj w grę alt=gra jest fajna i jak wówczas będzie to równoważone przez wyszukiwarkę.

Wyślij komentarz

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

Po godzinach

Wielkie zmiany w pozycjonowaniu stron internetowych

Wielkie zmiany w pozycjonowaniu stron internetowych

Można to śmiało nazwać rewolucją, a zbliża się ona wielkimi krokami. Niektórzy spece od SEO zaczynają to zauważać i czasami gdzieś w sieci można spotkać ciekawe analizy. Wynika z nich, że strony www, którymi się opiekują piszący, przyciągają duży ruch, który jest niewspółmiernie wielki do środków jakie włożono w linkowanie. I to jest najbardziej zaskakujące, ten stosunek działań do efektów, zwłaszcza pod kątem linkowania.

Ghost in the Machine, IBM NorthPole, zasobożerność procesów myślowych i kreatywność sztucznej inteligencji

Ghost in the Machine, IBM NorthPole, zasobożerność procesów myślowych i kreatywność sztucznej inteligencji

Tytuł wpisu to zbiór tematów, które przy niedzieli mnie naszyły, a że pod czaszką kipi kreatywność, to pozwalam jej się wydostać przy pomocy klawiatury. A i że kocham muzykę wszelkiej maści, to dziś się też podzielę pewnym smacznym kąskiem, który idealnie pasuje do mojego pisania o sztucznej inteligencji i jej zagrożeniach wynikających z jej rozwoju, bo i o tym też wspomnę.

Przyszłość WordPress, czyli najpopularniejszego systemu CMS na planecie Ziemia

Przyszłość WordPress, czyli najpopularniejszego systemu CMS na planecie Ziemia

Zastanawiasz się może nad przyszłością WordPress’a? Pewnie nie. No chyba, że twój biznes oparty jest o tworzenie lub obsługę stron internetowych i czasami sprawdzasz czy twoje narzędzia mają potencjał w przyszłości. Albo może jesteś amatorem, który dzierga strony wieczorowo i sprawdzasz czy ten WordPress jeszcze długo pociągnie. A może ktoś Ci stawia stronę na WordPress’ie i chcesz dowiedzieć się czy długo ona podziała? Jeśli zastanawiasz się nad przyszłością WordPress’a to zapraszam do lektury.

CSS before i after dla Google są za ścianą

CSS before i after dla Google są za ścianą

Na oficjalnym profilu Google na platformie X pojawił się wpis „Zalecamy, aby nie dodawać znaczących treści ani symboli za pomocą pseudoelementów CSS ::before i ::after”. Spece z Google stwierdzają, że takie treści nie mogą być wykorzystywane do indeksowania stron. Jako ciekawostkę można dodać, że nie jest to zmiana w działaniu wyszukiwarki Google. Została ona po prostu wspomniana w dokumentacji.

Wyszukiwarka Bing + AI = Coś niespotykanego!

Wyszukiwarka Bing + AI = Coś niespotykanego!

Jest taki tort, który zwie się wyszukiwarki internetowe. Microsoft chciał chapnąć z niego większy kawałek. Zapewne firma widziała okazję na zmniejszenie dominacji Google. Na początku roku, bo to jakoś w lutym było, Microsoft ogłosił uruchomienie ChatGPT w swojej wyszukiwarce Bing. Oczywiście wszystko dostępne tylko we własnej przeglądarce Edge. Upłynęło kilka miesięcy, można ocenić skutki – co wyszło z tego połączenia?