Jak zoptymalizować obrazy dla poprawy rankingu strony w Google

Jak wiadomo Google indeksuje obrazy w internecie. Obrazy wpływają na atrakcyjność treści strony, dlatego często mają również wpływ na ranking w wyszukiwarkach. Oczywiście wszystko zależy od tego co jest na obrazie, na ile jest on zgodny przedstawianą treścią i na ile jest on zoptymalizowany pod kątem SEO. Obrazek może pomóc we właściwej klasyfikacji witryny przez roboty, które póki co, nie do końca potrafią określić co znajduje się na obrazku.

W jaki sposób wyszukiwarka ocenia co znajduje się na obrazku? (kontekst)

Robot wyszukiwarki przetwarza cały kod strony wraz z treścią. Dlatego cała zawartość strony może mu zasugerować tematykę zdjęcia zamieszczonego na naszej stronie. Na przykład może powiązać tematykę zdjęcia łącząc je z tytułem strony, tekstami na stronie w szczególności tekstami wokół obrazka, nazwą pliku, tekstami odnośników (anchor text) jeżeli zdjęcie jest linkiem, treść atrybutu ALT obrazka itp.

Optymalizacja obrazków (SEO)

Przedstawię kilka zasad, których warto się trzymać podczas optymalizacji obrazków:

  • 1) nazwy plików powinny określać zawartość obrazka; nazwa np. PIC101.jpg nic nie mówi o obrazku; należy unikać długich nazw; warto zwrócić uwagę również w jakim katalogu znajduje się obraz i tworzyć katalogi tematyczne dla galerii (nazwa katalogu, inne obrazy w tym katalogu);
    Mówi się, że również hosting na jakim znajduje się zdjęcie ma znaczenie tzn. jeżeli zdjęcie jest linkowane z innego serwera (zawierające np. zbiory darmowych zdjęć), może być gorzej postrzegane przez wyszukiwarkę niż zdjęcie na tym samym serwerze;
  • 2) opisy alternatywne obrazka tag „alt” w znaczniku IMG – wpisujemy krótki tekst, który miałby się pojawić zamiast obrazka (nie opis); nie warto w tym miejscu upychać słów kluczowych, ponieważ Google może nałożyć karę za takie działanie;

    Ogólne zalecenia Google w jaki sposób używać atrybut ALT dla obrazków są takie:

    Use the alt attribute to provide descriptive text. In addition, we recommend using a human-readable caption and descriptive text around the image.

    Przykład użycia znacznika ALT: < img src="sleeping-dog.jpg" alt="Sleeping dog" />
    W przypadku gdy zdjęcie zawiera napis, warto go powtórzyć w znaczniku ALT.

    Strona bez znaczników ALT nie przejdzie walidacji XHTML, a co za tym idzie, będzie gorzej postrzegana przez Google (ponieważ dokument zawiera błędy/ostrzeżenia i utrudnia jego parsowanie).

    Zalecenia w3schools.com (link):

    – The text should describe the image if the image contains information
    – The text should explain where the link goes if the image is inside an < a > element
    – Use alt="" if the image is only for decoration

    Warto zwrócić uwagę, że dla obrazków, które nie są istotne dla strony i stanowią jedynie ozdobnik, nie ma konieczności ustawiania tagu ALT.

  • 3) podpis pod/nad obrazkiem opisujący treść zdjęcia; jest to jeden z elementów, na który zwracamy uwagę podczas przeglądania strony zaraz po nagłówkach, dlatego warto o niego zadbać;
  • 4) optymalizacja rozmiaru obrazu – jako, że czas ładownia strony jest jednym z czynników rankingowych, zaleca się optymalizację plików graficznych np. za pomocą Photoshopa czy darmowych narzędzi np. Yahoo smush.it, imageoptimizer
    Warto zajrzeć na ten poradnik Google.

Jeżeli wyświetlamy obrazy warto stworzyć obraz o konkretnej rozdzielczości taką jaką potrzebujemy na stronę, aby przeglądarka nie musiała zmieniać rozmiaru tego obrazu. W takiej sytuacji w pierwszej kolejności będzie ładowany duży obraz, następnie przeglądarka go zmniejsza co powoduje dłuższe ładowanie strony.
Wiadomo, że szybkość ładowania strony jest jednym z oficjalnych czynników wpływających na tworzenie rankingu w Google (SERP), dlatego warto zwrócić uwagę na ten element.

Również w narzędziach dla webmasterów (Google search console) Google udostępnia aplikację
insights, skąd można pobrać zoptymalizowane obrazy oraz zasoby JavaScript i CSS dla danej strony.

5) często tworzy się dodatkową mapę obrazków (link).

Dostarczają one dodatkowych informacji na temat obrazów zamieszczonych na Twojej stronie. Informacje zawarte w mapie obrazów witryny ułatwiają nam odczytanie obrazów, których mógłby nie odczytać samodzielnie (np. obrazy powiązane z witryną przy użyciu kodu Javascript) oraz pomagają wskazać, które obrazy w witrynie mają być zaindeksowane przez roboty Google.

Warto zapoznać się z poradnikiem Google dla webmasterów dotyczący grafiki na stronie.

Wtyczki do optymalizacji obrazów (SEO)

Na koniec jak zawsze polecam wtyczki, które pomogą w automatyzacji danego zadania.

  • Ciekawą wtyczką jest Seo friendly images Vladimira Prelovaca, która dodaje automatycznie opisy dla atrybutów ALT i TITLE opublikowanych obrazków.
    seofriendlyimages
  • WP smush.it – wtyczka redukująca rozmiar obrazków
    wpsmush.it

You Might Also Like

One Comment

  1. Marceli

    Różne narzędzia pokazują mi że nie mam znacznika „alt” czyli alternatywnego opisu obrazka przy ikonach w moim szablonie.
    Chciałbym to poprawić ale nie bardzo wiem jak się za to zabrać. W opcjach Wygląd/Personalizacka/Menu nie mam niestety dostępnych wszystkich ikon…

Leave a Reply