Blog Traffic Trends
Uwaga na nie zoptymalizowane obrazy!

Najpoważniejsze błędy w działaniach SEO: #6 Brak optymalizacji grafiki

Często pomijany element, który jednak może nam przynieść sporo ruchu organicznego z wyszukiwarki – mowa tutaj o plikach graficznych. Zazwyczaj dodając takowe na naszej stronie traktujemy je jedynie jako urozmaicenie, zapominając o niewykorzystanym potencjale. Jak temu zaradzić?

Temat optymalizacji grafiki podzielimy na dwie części: Pierwsza z nich będzie dotyczyła optymalizacji w ujęciu „wagowym”, druga natomiast optymalizacji pod kątem wyszukiwarek.

Przez bardzo długi czas Google był wyszukiwarką tekstową i kwestie wizualne stron były na drugim planie. Dlatego też większą wagę przykładaliśmy do wartościowych treści na stronie, odpowiednim nagłówkom i strukturze linków, pozostawiając pliki graficzne samopas.

1. Optymalizacja rozmiarów plików graficznych – kompresja

Do niedawna także nie przejmowaliśmy się zbytnio rozmiarem tych plików, jednak odkąd szybkość wczytywania strony ma coraz większe znaczenie rankingowe, a narzędzie PageSpeed Insights zaczęło wskazywać punkt Zoptymalizuj obrazy (w wielu sytuacjach na czerwono – Rozwiązanie tego problemu może mieć duży wpływ na szybkość wyświetlania strony.), zaczęliśmy myśleć o kompresji.

kompresja zdjęć

Algorytmy przetwarzania obrazów są coraz lepsze, a kompresja bezstratna pozwala nam na znaczne zmniejszenie wagi pliku przy niezauważalnej stracie jakości. Przykładowo, weźmy na tapet zdjęcie z darmowego stocka:

zdjęcie stock

 

Waga przed kompresją: 2,30 MB (przy rozdzielczości 4195×2796) – w porównaniu do stron, które „ważą” ~5 MB – jest to całkiem sporo.

Poniżej porównanie obrazów po kompresji przy wykorzystaniu narzędzia Optimzilla:

 

kompresja

 

Rozmiar po skompresowaniu – 514 KB (wciąż całkiem sporo), przy praktycznie niezauważalnej stracie jakości. Oczywiście nie jest to sytuacja ekstremalna, ponieważ spotykaliśmy się z plikami graficznymi o rozmiarach przekraczających 5 MB (towarzyszyło to często wynikowi 0/100 w PageSpeed Insights), jednak jak widać optymalizacja przy zachowaniu 75% jakości może już znacząco wpłynąć na rozmiar danego zdjęcia, przy trudnym do zauważenia uszczerbku na jakości. Warto monitorować te własności i regularnie sprawdzać, czy i jaki mają one wpływ na czas wczytywania naszej strony. Ten aspekt ma znaczenie nie tylko dla robotów wyszukiwarek, ale również dla użytkowników, którzy czekając dłuższy czas mogą zwyczajnie zrezygnować z przeglądania naszej strony.

 

2. Optymalizacja pod kątem wyszukiwarek

Kolejne elementy często pomijane, czyli: nazwa pliku, jego tytuł oraz atrybut alt.

Zazwyczaj wszystko wygląda podobnie: pobieramy zdjęcie z Internetu (11325406_7796691088_n_39272.jpg), robimy zrzut ekranu (Zrzut-ekranu-2016-02-20-10:29:36.png), lub wykorzystujemy zrobione samodzielnie (DSC_5240.jpg), wstawiamy na stronę i na tym poprzestajemy. Wygląda to wtedy następująco:

<img src=„/folder/11325406_7796691088_n_39272.jpg” />

Wiedząc, że algorytmy i roboty Google mają problemy z odczytywaniem zdjęć (choć w ostatnim czasie bardzo się to poprawiło), powyżej mamy przykład niewykorzystanego potencjału. Dodając kilka elementów możemy dodatkowo nasycić naszą stronę konkretnym słowem kluczowym, wspomóc odczytywanie zdjęć przez roboty wyszukiwarek, czy dać pogląd użytkownikom, którzy mają wyłączoną/zablokowaną obsługę obrazków.

W przypadku, gdy plik graficzny pełni rolę odnośnika, tracisz również możliwość dodania tekstu kotwicy, który w takim wypadku pełni atrybut alt. Kolejny ważny aspekt to także możliwość pojawienia się naszych dobrze opisanych grafik w wynikach Google Grafika, co może być źródłem wartościowego ruchu. Jak zatem zrobić to dobrze?

  1. Nazwa pliku: powinna opisywać zawartość danego obrazka, gdyż Google zwraca uwagę na słowa zawarte w tym elemencie. Nazwy takie jak przykladowe.jpg lub 123456789.jpg niewiele mówią robotom wyszukiwarek. W nazewnictwie plików warto stosować małe litery, natomiast do rozdzielania obrazów wykorzystywać „-”.

  2. Atrybut alt: tak jak nazwa pliku, powinien on opisywać daną grafikę, jednak w tym przypadku nie musisz stosować jakichkolwiek znaków do rozdzielenia wyrazów. Warto dobrze opisywać zdjęcia, jednak nie należy spamować tego atrybutu, ponieważ może zostać to negatywnie odebrane. Podczas tworzenia go, warto również mieć na uwadze programy czytające strony dla osób niewidzących lub niedowidzących, dzięki czemu będą one poprawnie zinterpretowane. Jak zostało zaznaczone powyżej, w przypadku gdy obrazek pełni rolę odnośnika, atrybut alt jest traktowany również jako tekst kotwicy (anchor text).

  3. Tytuł (title): jest to element, który pokaże się po najechaniu na daną grafikę (tzw. dymki), służący do wyświetlania tekstu pomocniczego. Tak jak w przypadku atrybutu alt treść nie musi posiadać znaków rozdzielających słowa; powinna być logiczną treścią, która może okazać się pomocna dla użytkowników.

  4. Umieszczenie w mapie witryny: przesłanie dodatkowych informacji o dodanych przez nas plikach graficznych w sitemapie może korzystnie wpłynąć na ich lepsze indeksowanie, a co za tym idzie – szybsze pojawienie się w graficznych wynikach wyszukiwania. Warto tutaj zapoznać się z informacjami dotyczącymi przygotowywania mapy witryny na stronie pomocy Google, a szczególnie znacznikom odpowiedzialnym za oznaczanie zdjęć:

    <image:image>
    <image:loc>http://domena.pl/nazwa-pliku-graficznego.jpg</image:loc>
    <image:caption>Opis przesyłanej grafiki</image:caption>
    <
    /image:image>

W przypadku optymalizacji zdjęć pod kątem powyższych czterech elementów warto mieć na uwadze, że nie są to kolejne miejsca na tzw. keyword stuffing, czyli nienaturalne umieszczanie słów kluczowych po przecinku. Stosowanie takich działań może zaszkodzić naszym dotychczasowym działaniom, więc w tym przypadku należy mieć na uwadze przede wszystkim naturalność.

Skoro wiesz już jak powinno to wyglądać w teorii, zobacz porównanie początkowo umieszczonej grafiki:

<img src=„/folder/11325406_7796691088_n_39272.jpg” />

z poprawnie zoptymalizowaną:

<img src=„/folder/nazwa-pliku-graficznego.jpg” alt=„tekst alternatywny” title=„tytuł pomocniczny” />

Zanim dodamy zdjęcie na naszą stronę internetową, warto zastanowić się jaki nadać tytuł oraz zmniejszyć wagę zdjęcia, co polepszy funkcjonowanie strony. Jeśli jednak nie wiesz jak do tej pory wyglądały wstawiane przez Ciebie grafiki polecamy skorzystanie z darmowego audytu SEO lub z konsultacji z naszymi specjalistami. Pomogą w optymalizacji grafik, a także całej strony internetowej.


Dowiedz się więcej: audyt sklepu internetowego

Damian Hliwa

Od 2014 roku dzielnie próbuje sprostać wyzwaniom rzucanym przez Traffic Trends. Obecnie na stanowisku Team Leadera w dziale SEO. Prywatnie wielbiciel Polskiej części Tatr i kolarstwa górskiego.

ZROBIMY COŚ RAZEM?


Napisz do nas, a przedstawimy szczegóły współpracy