Grafika a zachowanie użytkowników

Dopasowanie plików graficznych do treści strony wpływa na zachowanie klientów. Im bardziej atrakcyjne zdjęcie i przydatne dla użytkownika, tym lepszy odbiór e-sklepu lub konkretnego produktu. Ważne, aby grafiki pokazywały oferowany produkt z wielu perspektyw i w różnych okolicznościach oraz zachęcały do dokonania konwersji. Dzięki odpowiedniemu dopasowaniu zdjęć zwiększamy prawdopodobieństwo zakupu. Brak zdjęć lub ich słaba jakość negatywnie wpłyną na odbiór e-sklepu przez potencjalnego klienta. Istotne jest dodawanie zoptymalizowanych i dopasowanych grafik do Państwa strony.

Optymalizacja grafiki dla robotów Google

Google wciąż nie jest w stanie dokładnie rozpoznać co znajduje się na zdjęciu, a roboty widzą grafikę w postaci kodu na stronie. Dlatego głównymi wskazówkami dla robotów są dodatkowe elementy zawarte w kodzie. Jeśli grafika nie została poddana optymalizacji SEO, robot nie będzie w stanie rozpoznać zawartości. Taka grafika będzie miała niskie szanse na pojawienie się w Google Image, co uniemożliwi pozyskanie potencjalnych klientów z graficznych wyników wyszukiwania. W związku z powyższym przedstawimy kilka dobrych praktyk podczas dodawania zdjęć i grafik do Państwa e-sklepu.

Grafika w Państwa sklepach odgrywa bardzo ważną rolę. Zdjęcia produktów dopasowane do zawartości przyciągną uwagę klientów, wyróżnią Państwa zdjęcia spośród konkurencji, a odpowiednio zoptymalizowane grafiki sprawią, że roboty Google będą w stanie zrozumieć zawartość wgranych zdjęć.

1. Dodanie nazwy pliku

Roboty Google odczytują nazwę pliku graficznego. Warto unikać automatycznie generowanych nazw plików, takich jak DSC102201.JPG. Nazwa pliku graficznego powinna być przyjazna zarówno dla użytkowników jak i robotów. Przed wgraniem na serwer powinni Państwo zmienić nazwę pliku na taką, która będzie zawierała słowa kluczowe oraz krótko opisywała zawartość grafiki, przykładowo: biala-ceramiczna-umywalka.JPG. Można zainspirować się nazwą produktu i powtórzyć ją w nazwie grafik. Najlepiej, aby każda grafika miała inną nazwę. Podczas tworzenia nowych nazw plików należy unikać polskich liter, znaków specjalnych, a kolejne wyrazy powinny zostać oddzielone myślnikiem “-”.

2. Wielkość pliku graficznego

Ważnym czynnikiem wpływającym na pozycję Państwa sklepu jest prędkość wczytywania się strony. Wpływ na wagę całej strony oraz prędkość ładowania mają właśnie grafiki. Im wyższy rozmiar pliku tym czas wczytywania strony jest dłuższy. Dlatego należy znaleźć kompromis między jakością, a wielkością grafiki. Rekomendujemy by waga pojedynczej grafiki nie przekraczała 200KB. W celu optymalizacji wagi grafiki można wykorzystać kompresję. Umożliwiają to darmowe narzędzia takie jak tinyjpg.com

3. Skala obrazu

W celu ograniczenia wagi grafik należy dostosować ich fizyczne wymiary do rozmiarów, jakie zostaną wygenerowanie na stronie. W przypadku zdjęć produktów systemy często generują automatyczne miniatury. Dla pozostałych grafik muszą Państwo zadbać o to ręcznie. W przypadku grafik bez miniatur, o rozmiarach np. 4000 x 3000 px, użytkownik będzie musiał pobrać grafikę często ważącą nawet kilka MB. Ma to negatywny wpływ na prędkość ładowania strony. Zalecane wymiary grafik są uzależnione od konkretnych szablonów, poniżej przedstawiamy średnie maksymalne wymiary dla poszczególnych kategorii grafik:

  • zdjęcie produktowe – 500 x 500 px
  • miniatura wpisu bloga – 450 x 350 px
  • baner na stronie głównej – 1200 x 400 px
  • baner pop-up – 750 x 550 px

Jeżeli korzystają Państwo z innego szablonu, prosimy o kontakt. Przeanalizujemy jakie rozmiary grafik powinny znaleźć się w odpowiednich sekcjach.

4. Alternatywna treść grafiki

W przypadku problemów z wczytaniem się grafiki, wyświetlany jest tekst alternatywny. Atrybut “alt” jest krótkim opisem zawartości grafiki. Ma on równie istotny wpływ na pozycjonowanie co nazwa pliku lub tytuł zamieszczonej grafiki. Istotne jest by dodawali Państwo odpowiedni i unikalny opis do każdego dodawanego zdjęcia. Robot Google widzi atrybut alt w kodzie strony w następujący sposób: <img title=”tytuł” src=”/adres-grafiki/nazwa-pliku.jpg”” alt=”opis” />