Jak pozyskiwać więcej użytkowników z Google Grafika?

Gabriela Prymaka
18 maja, 2021
Przeczytasz w ~ 8 min.
Jak pozyskiwać więcej użytkowników z Google Grafika

Google Grafika to idealny sposób na wizualne odkrywanie sieci. W wielu branżach jest to również świetne źródło pozyskiwania użytkowników. Co należy uzupełnić na stronie, aby poprawić widoczność strony w Grafice Google? Odpowiedź na to pytanie znajdziesz w tym artykule. Opisujemy w nim, za pomocą jakich działań zwiększyliśmy widoczność serwisu naszego Klienta właśnie w wyszukiwarce obrazów.


Klient, z którym pracowaliśmy nad widocznością w Google Grafika, sprzedaje gotowe projekty domów online w ramach serwisu www.domywstylu.pl. Większość z nas, myśląc o swoim idealnym gniazdku, zapewne wizualizuje je sobie na długo przed przystąpieniem do poszukiwań. Dotyczy to również użytkowników, którzy korzystają ze strony domywstylu.pl.

Przy wyborze projektu domu zawsze myślimy o elementach wizualnych, nawet gdy towarzyszą nam pewne ograniczenia, takie jak np. wąska działka lub niski koszt budowy. Z tego powodu wielu użytkowników wyszukiwarki Google decyduje się na wyszukiwanie projektów domów w Grafice Google. Zdawaliśmy sobie z tego sprawę, dlatego współpracując z klientem w obszarze zwiększenia ruchu organicznego, postanowiliśmy to wykorzystać.

W branżach, w których apsekt wizualny ma kluczowe znaczenie przy wyborze produktu lub usługi – tak jak w przypadku projektów domów – prawdopodobnie zauważymy duży ruch pochodzący z Grafiki Google.

Branże, które pozyskują dużą liczbę użytkowników z tego źródła, to m.in.:

  • moda i obuwie
  • meble i wyposażenie wnętrz
  • odzież i sprzęt sportowy

Branże, które pozyskują zdecydowanie mniejszą liczbę użytkowników na stronie z Google Grafika, to m.in.:

  • usługi wynajmu autokarów
  • drukarnie online

Jednak od wyżej wymienionych zasad mogą zdarzyć się też odstępstwa. Dla przykładu, drukarnie online zazwyczaj nie mają (bo nie potrzebują ;)) dobrej widoczności w Grafice Google. Użytkownicy, w przypadku tego typu usług, częściej korzystają z tradycyjnej wyszukiwarki w sieci. Jednak, jeżeli taka drukarnia prowadzi bloga i zamieszcza artykuły typu „Jak przygotować pliki do druku?”, to może pozyskać ruch także z wyszukiwarki obrazów Google (sprawdź, na czym polega wyszukiwanie obrazem), ponieważ użytkowników będzie tutaj interesował wizualny przykład, np. dotyczący spadów w plikach do druku.

Chcąc zbadać potencjał widoczności w grafice Google, należy indywidualnie sprawdzić pozyskiwany ruch w serwisie za pomocą Google Search Console. Warto wziąć pod uwagę również to, czy obrazy są dostępne dla robotów Google oraz formę, w jakiej je dostarczamy.

Stan początkowy grafik na stronie

Przed wdrożeniem zmian Klient posiadał dobrze nazwane produkty zarówno w ścieżkach adresów URL, jak również uzupełnione teksty alternatywne obrazów (atrybuty alt). Zauważyliśmy jednak dużą ilość powielonych atrybutów alt obrazów, przez co niektóre z grafik mogły być nierozróżnialne dla robotów wyszukiwarek mimo innego adresu URL.

Domywstylu.pl - Grafika - Google Search Console
(źródło: Domywstylu.pl – Grafika – Google Search Console)

Serwis Domywstylu.pl to duży e-commerce, na którym dziennie odnotowujemy od kilku do kilkunastu tysięcy użytkowników. Dlatego, aby wprowadzić zmiany szybko, nie mogliśmy pozwolić sobie na ręczną optymalizację zdjęć.

Chcieliśmy do alternatywnych tekstów dodać większą ilość słów kluczowych z kategorii produktów oraz indywidualne cechy, które znajdują się w atrybutach. Zmiana miała zwiększyć różnorodność dostępnych dla robotów opisów, co w efekcie przyczyniłoby się do zwiększenia widoczności grafik. Schemat pozwolił na wprowadzenie przy pomocy skryptu zmian na stronie przez programistów.

Zastosowany schemat zawierał:

  • Nazwę kategorii produktu w liczbie pojedynczej (np. projekt domu jednorodzinnego)
  • Atrybut produktu (np. nowoczesny)
  • Indywidualną nazwę projektu (np. Ariel)
  • Dodatkowe informacje o zdjęciu (np. wizualizacja frontowa)

Pierwsze widoczne zmiany

Wytyczne w serwisie domywstylu.pl wprowadziliśmy wraz z końcem 2020 roku. Był to okres świąteczno-sylwestrowy, w którym mniej użytkowników odwiedza serwisy reprezentujące branżę naszego Klienta. Strzałka na poniższym screenie pokazuje czas przejściowy, czyli indeksacji zmian po wprowadzonym schemacie.

wtrakcie 3 miesiace
(źródło: Domywstylu.pl – Grafika – Google Search Console)

Kilka miesięcy po zmianach

optymalizacja obrazu pod Google Grafika - efekt 6 miesięcy
(źródło: Domywstylu.pl – Grafika – Google Search Console)

Liczba kliknięć – porównanie rok do roku

kliknięcia - rok do roku - efekty optymalizacji
(Google Search Console – porównanie 11.2020 – 03.2021 do 11.2019 – 03.2020)

Liczba wyświetleń – porównanie rok do roku

wyswietlenia - rok do roku - efekty optymalizacji obrazów pod Grafikę Google
(Google Search Console – porównanie 11.2020 – 03.2021 do 11.2019 – 03.2020)

Efekty okres 3 miesięcy – porównanie rok do roku

Efekty optymalizacji obrazów pod Grafikę Google - Ostatnie 3 mies - rok do roku
(Google Search Console – porównanie 12.2020 – 03.2021 z 12.2019 – 03.2020)
  • Liczba kliknięć – zwiększyła się o 47%
  • Liczba wyświetleń – zwiększyła się o 30%
  • CTR – zwiększył się o 8%
  • Średnia pozycja – zwiększyła się o 11,9

Istotne elementy dotyczące grafiki na stronie, na które warto zwrócić uwagę pod SEO:

1. Nazwy obrazów i alternatywne teksty

Atrybuty ALT (alt text) to teksty opisujące obrazy. Osoby niedowidzące właśnie dzięki nim dowiadują się, co znajduje się na grafice, ponieważ niektóre dedykowane tej grupie odbiorców przeglądarki odczytują parametr ALT. Google również z nich korzysta, by dowiedzieć się, jaka jest zawartość obrazu.

Aby nadać odpowiednie nazwy obrazom, myślmy o użytkownikach, a nie o robotach. Nazwa grafiki adekwatna do jej zawartości jest bardzo istotna. Roboty posiadają coraz bardziej rozwinięte umiejętności rozpoznawania obrazów, jednak nadal nie są one równie dobre jak ludzkie oko. Treści serwujemy dla ludzi, dlatego to z myślą o nich powinniśmy nazywać obrazy.

Źle: (brak alt)
<img src="/images/projekt-domu-z-dachem-dwuspadowym.jpg">

Źle: (sztucznie upchane frazy w alt)
<img src="/images/projekt-domu-z-dachem-dwuspadowym.jpg" alt="projekt domu nowoczesny projekt domu z dachem dwuspadowym projekt domu na wieś projekt domu na działkę projekt domu na lata projekt domu jednorodzinny">

Dobrze:
<img src="/images/projekt-domu-z-dachem-dwuspadowym.jpg" alt="Projekt domu z dachem dwuspadowym w stylu nowoczesnym">

2. Dane uporządkowane (strukturalne)

Dane uporządkowane jest to format, w którym za pomocą znaczników opisujemy zawartość strony. W ten sposób możemy poinformować Google, że na stronie znajduje się np. artykuł, produkt, wideo czy przepis kulinarny.

Jeżeli posiadamy dane strukturalne w witrynie, zadbajmy o prawidłowe oznaczenie obrazów. Dzięki temu grafiki na stronie wyświetlą się jako wyniki wyróżnione (z elementami rozszerzonymi) w Grafice Google.

Grafika Google obsługuje dane uporządkowane, takie jak:

  • Produkt
  • Wideo
  • Przepis

Wygląd strony w Google Grafika z danymi uporządkowanymi:

grafiki Google

Więcej informacji o danych uporządkowanych (strukturalnych):

3. Title i description strony

Google automatycznie dostosowuje wygląd witryny w wynikach wyszukiwania na podstawie treści na niej się znajdujących. Dba przy tym o to, aby maksymalnie je dopasować do preferencji użytkowników.

Możemy zasugerować wyszukiwarce, jak chcemy, aby wyglądała nasza strona w SERP, uzupełniając metadane – title i description. Może jednak się zdarzyć, że nie weźmie ich pod uwagę, ponieważ oceni inną treść na stronie za bardziej dopasowaną. Natomiast w większości przypadków będzie się sugerowało właśnie title i description.

Przykład title i description w sieci Google:

metadane-domywstylu - optymalizacja obrazów pod Google Grafika

 

Przykład title i description w kodzie strony:

<title>Wnętrza do projektów domów Domy w Stylu</title>

<meta name="description" content="Zobacz wizualizacje wnętrz do naszych projektów. Niezliczone pomysły na aranżacje i oryginalny design. Zainspiruj się, znajdź swój styl.">

Przykłady title i description w Grafice Google:

grafika-domywstylu-metagrafika-domywstylu-meta-product

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. Tekst na obrazach

Roboty nie czytają napisów, które znajdują się na obrazach. Dlatego stosujmy tekst na obrazach tylko w sytuacjach, gdy jest to niezbędne, np. tworząc infografiki, które tego wymagają.

5. Optymalizacja obrazów

Dopasowujmy obrazy na stronie pod różne rozdzielczości ekranu. Używanie za dużych obrazów oraz o zbyt wielkiej wadze na stronie mobilnej wpływa negatywnie na jej prędkość ładowania. W trosce o skuteczne SEO, pamiętajmy o indeksowanych w 100% witrynach w wersjach mobilnych, które powinny zawierać dopasowane do swoich rozmiarów grafiki.

6. Adresy URL obrazów

Nazywajmy obrazy zgodnie z ich zawartością przed umieszczeniem na stronie. Algorytmy wyszukiwarek biorą pod uwagę słowa znajdujące się w strukturze adresów URL. Ważne jest, aby również w ścieżce obrazu stosować nazwy opisowe zamiast tych, które zawierają jedynie numer zdjęcia, przykładowo: “DESC937826730.jpg”.

Źle: 
<img src="/images/DESC937826730.jpg" alt="Projekt domu nowoczesnego z dachem dwuspadowym">

✔️ Dobrze:
<img src="/images/projekt-domu-z-dachem-dwuspadowym.jpg" alt="Projekt domu z dachem dwuspadowym w stylu nowoczesnym">

7. Miejsce grafik na stronie

Umieszczajmy obrazy w odpowiednim miejscu na stronie. Ważne jest, aby znajdywały się obok opisu, którego dotyczą. Takie umiejscowienie jest bardziej zrozumiałe zarówno dla użytkowników, jak i robotów.

8. Mapa witryny z obrazami

Możemy dodać mapę witryny z adresami URL obrazów na stronie. Google dzięki temu wykryje grafiki, których nie udało mu się znaleźć w witrynie. W mapie z obrazami możemy dołączyć dodatkowe informacje (metadane), takie jak: tytuł obrazu, lokalizację, a także dodać do niej obrazy z adresami URL z innych domen. To umożliwi nam hostowanie obrazów w sieci dystrybucji treści (CDN).

9. Znaczniki obrazów HTML

Wyszukiwarka nie indeksuje obrazów CSS. Dlatego, aby wyświetlać je w Grafice Google, umieszczajmy je w kodzie HTML.

❌ Źle: 
<div style="background-image:url(/images/projekt-domu-z-dachem-dwuspadowym.jpg)">Projekt domu z dachem dwuspadowym w stylu nowoczesnym</div>

✔️ Dobrze:
<img src="/images/projekt-domu-z-dachem-dwuspadowym.jpg" alt="Projekt domu z dachem dwuspadowym w stylu nowoczesnym">

Jak oceniasz tekst?

Średnia ocen 5 / 5. Liczba głosów: 1

Bądź pierwszy i oceń tekst.

Komentarze