Image SEO, czyli jak zoptymalizować grafikę na stronie internetowej - Blog Artefakt

Image SEO, czyli jak zoptymalizować grafikę na stronie internetowej

08.08.2017 / SEO
optymalizacja grafiki

Grafika na stronie internetowej jest elementem przyciągającym uwagę użytkownika. Ubarwia długą treść, pomagając przekazać najważniejsze informacje. Pozwala także na przyciągnięcie ruchu z wyszukiwarki grafiki. Jednak aby tak się stało, obrazy i zdjęcia należy zoptymalizować pod SEO.

Skąd brać grafikę na stronę internetową?

Grafika tak jak tekst powinna być oryginalna, ciekawa i interesująca. Jeśli masz tylko taką możliwość, przygotowuj obrazy we własnym zakresie. Rób autorskie zdjęcia produktów, poświęć czas na wykonanie infografiki, uzupełnij stronę główną o unikalną grafikę wykonaną na zamówienie. To rozwiązanie idealne, ale gdy nie masz zasobów na inwestowanie w obrazy, skorzystaj z banków zdjęć. Znajdziesz tam wiele, darmowych i płatnych obrazków, które ubarwią Twoją stronę internetową.

Przejrzyj takie banki zdjęć jak:

  • Pixabay,
  • Fotolia,
  • Freepic.

Jeśli zamierzasz skorzystać z googlowskiej wyszukiwarki grafiki do pobierania zdjęć na swoją stronę, najpierw sprawdź prawa autorskie obrazów. W tym celu kliknij w sekcję Narzędzia, a następnie przejdź do zakładki Prawa do użytkowania. Wybierz jedną z opcji. Wyszukiwarka wyświetli tylko taką grafikę, którą będziesz mógł wykorzystać w swoim serwisie.

wyszukiwarka grafiki

Optymalizacja grafiki pod SEO

Wyszukiwarka Google wciąż nie radzi sobie z rozpoznawaniem treści obrazków na stronie internetowej. Roboty widzą, że grafika znajduje się na stronie, ale nie potrafią odczytać, czy prezentuje buty, czy słodkiego kotka. Jeśli zdjęcie nie zostanie zoptymalizowane pod SEO, istnieją małe szanse na pojawienie się w Google Image, a serwis nie pozyska użytkowników wyszukujących produktów lub usług za pomocą zdjęć. Należy zadbać o takie elementy jak:

optymalizacja grafiki pod SEO

Nazwa pliku graficznego

Unikaj przypadkowo wygenerowanych nazw plików typu: 2651a0hd.jpg. Nazwa grafiki, którą wgrywasz na serwer, ma znaczenie dla robotów wyszukiwarki i dla użytkowników. Warto przemycić słowa kluczowe, jednoznacznie wskazując, co prezentuje zamieszczony na stronie obraz, np. buty-na-koturnie.jpg. Unikaj długich sformułowań oraz spamowania. Opisz krótko treść grafiki.

Nazwa nie powinna zawierać polskich liter ani znaków specjalnych. W roli separatora polecamy zastosować zwykłą pauzę „-”.

Wielkość i waga grafiki

Jakość obrazów ma znaczenie, ale duże pliki graficzne niestety wydłużają czas ładowania strony. Przed przesłaniem obrazka na serwer należy dokonać jego konwersji, zmniejszając jego rozmiar. Korzystając z takich programów jak tinyjpg.com można zoptymalizować grafikę bez utraty jej jakości.

Jaką wielkość powinna mieć skonwertowana grafika? Najlepiej jak najmniejszą, ale musimy pamiętać również o użytkownikach – za mały obraz będzie nieczytelny. Zaleca się, aby waga przesyłanych obrazów nie przekraczała 200 KB. Przy dużych obrazach warto także wybrać plik z rozszerzeniem .png zamiast .jpg. Dzięki temu zoptymalizujemy czas ładowania strony.

Skalowanie grafiki

Przed przesłaniem obrazków należy dokonać ich skalowania do rozmiarów, w których zostaną zaprezentowane na stronie. Co prawda większość systemów CMS dokonuje automatycznego dopasowania grafiki do dostępnej powierzchni, ale nie ma sensu przesyłać zdjęcia 3000 x 3000 px, jeśli w konsekwencji zostanie ono zmniejszone do rozmiaru 300 x 300 px.

Atrybut alt, czyli opis alternatywny

Atrybut alt to jeden z najważniejszych elementów Image SEO, dzięki któremu roboty wyszukiwarki dowiadują się, co znajduje się na obrazie. Jest niewidoczny dla użytkowników (o ile zdjęcie wczytuje się prawidłowo na stronie) i powinien zostać uzupełniony w każdej grafice. W opisie alternatywnym krótko i zwięźle przedstawiamy treść obrazka, używając kilku słów kluczowych w naturalnej formie. W alcie nie wolno upychać fraz na siłę.

Prawidło uzupełniony atrybut alt w kodzie strony wygląda następująco:

<img src=”http://domena/buty-na-koturnie.jpg” alt=”Czarne buty na koturnie” />.

Większość popularnych CMS-ów pozwala na uzupełnienie opisu alternatywnego za pomocą kreatora dodawania grafiki.

Tytuł grafiki

W większości przypadków po najechaniu kursorem na zdjęcie pokazuje się tzw. title, czyli tytuł grafiki. Uzupełniając go w kodzie strony lub kreatorze, pamiętajmy, aby nie był identyczny z atrybutem alt. Może zawierać słowa kluczowe i powinien nawiązywać do tego, co znajduje się na grafice.

Kod strony obrazu uzupełniony o titile i atrybut alt:

<img src=”http://domena/buty-na-koturnie.jpg” alt=”Czarne buty na koturnie” title=”Modne buty na koturnie” />.

Przyjazny adres URL

Dbajmy o porządek w katalogach strony i jeśli tylko mamy taką możliwość, zwróćmy uwagę, aby adres URL obrazka był przyjazny dla użytkowników i robotów wyszukiwarek. Jeśli zdjęcie trafi do wyszukiwarki grafiki, przejrzysty link zdecydowanie lepiej zaprezentuje się w pasku przeglądarki.

Dane strukturalne dla grafiki

Od niedawna wybrane kategorie grafiki  (zdjęcia produktowe, obrazy dołączane do przepisów) mogą zostać oznaczone mikrodanymi. Wdrożenie danych strukturalnych pozwala na wyświetlenie dodatkowych informacji bezpośrednio w mobilnej wyszukiwarce grafiki. W przypadku produktów użytkownik zobaczy cenę, opinie klientów, przycisk przejścia na stronę sprzedawcy. Aby poprawnie zaimplementować mikrodane, polecamy skorzystać ze wskazówek Google Developers i narzędzia do testowania danych strukturalnych.

Sitemapa XML dla grafiki

Serwisom posiadającym wiele zdjęć polecamy przygotowanie osobnej sitemapy z adresami URL plików graficznych. Taka praktyka wspomoże proces indeksowania witryny i zwiększy dostępność obrazów dla robotów wyszukiwarki.

Optymalizacja grafiki pod wyszukiwarkę – podsumowanie

Zamieszczanie zdjęć na stronie internetowej przynosi wiele korzyści. Dobrej jakości obrazy zatrzymują użytkowników. Na samym przesłaniu grafiki nasza praca nie powinna się kończyć. Ważna jest optymalizacja zdjęć, która zwiększa szansę pojawienia się w Google Image i pozyskania wartościowego ruchu. Pamiętaj o rozmiarze pików, ich tytułach, a przede wszystkim uzupełnianiu atrybutów alt!

  • Marcin

    Dzięki za cenne porady. Jedno pytanie: Dlaczego nazwy plików powinny być pozbawione polskich znaków?

    • Polskie znaki powodują czasami problem z kodowaniem, niektóre narzędzia nie odczytują ich poprawnie. Google w supporcie – https://support.google.com/webmasters/answer/114016 podaje przykład nazwy pliku graficznego niezawierający polskich znaków – moj-czarny-kot.jpg, więc przyjmujemy, że lepiej unikać ą, ę, ś, ć itd. 🙂

      • Marcin

        Dziękuję za odpowiedź. Moje pytanie wzięło się stąd, że Google jednak traktuje nieco inaczej hasła z polskimi znakami i bez nich (wyniki wyszukiwania są nieco zmienione, duże różnice w Google Trends), więc zastanawiałem się, czy nie lepiej jednak nazywać pliki z polskimi znakami, żeby lepiej się wypozycjonować. Ale zdaje się, że problemy z kodowaniem mogą narobić więcej bałaganu, więc pewnie jednak lepiej trzymać się alfabetu międzynarodowego 🙂

        • Google większą uwagę zwraca na atrybut alt, czyli opis obrazka – a tam mogą być już polskie znaki 🙂 nazwa pliku .jpg czy .png nie jest za bardzo analizowana, to raczej ukłon w stronę użytkownika – jeśli pobierze ze strony obrazek, po samej nazwie będzie wiedział, co się na nim znajduje 🙂

Również na naszym blogu
Google Chrome blokuje nachalny przekaz reklamowy na urządzeniach desktopowych i mobilnych. Sprawdź,...
Platformy ClickShop oraz Shoper, czyli jedne z popularniejszych systemów CMS dla sklepów...
Pozycjonowanie witryny uwidoczni Twój lokal gastronomiczny w wynikach wyszukiwania. Czy to jednak...
Komunikat o plikach cookies powinien pojawiać się w każdym serwisie internetowym, który korzysta z...
Polityka prywatności to dokument, który pomaga realizować obowiązek informacyjny narzucony na...