Web Design Blog / E-commerce:

Optymalizacja SEO sklepu PrestaShop

Data publikacji: 11 grudnia 2018

Oprogramowanie PrestaShop to bardzo popularny w naszym kraju i europie środkowej system do zarządzania sklepem internetowym.

PrestaShop „z pudełka” pozwala na bardzo dobrą optymalizację sklepu jak i poszczególnych podstron zawierające informacje o sprzedawanych produktach. Przyjazne adresy URL, kategorie, możliwość tworzenia szczegółowych opisów oraz prosty CMS do prowadzenia bloga pozwala spełnić większość zadań związanych z optymalizacją SEO a także ogólnie pojętego content-marketingu. Czytaj więcej o zaletach i wadach systemu PrestaShop.

W tym przewodniku po kolei zapoznamy się z opcjami wspierającymi działania SEO oraz optymalizację mającą wpływ na prędkość działania sklepu (czyli pośrednio Customer i User Experience).

Tak jak w przypadku innych artykułów na temat optymalizacji czegokolwiek, to ilekroć używam w w nich terminu „optymalizacja”, używam go w sposób nie do końca poprawny, ponieważ nie rozważamy tutaj żadnego optimum z punktu widzenia formalnego kryterium. Celem jest osiągnięcie lepszych rezultatów (czy to pod kątem wydajności całego sklepu czy dopasowania treści do wymogów współczesnych wyszukiwarek). Artykuł ma postać przewodnika po najważniejszych funkcjach optymalizacji SEO PrestaShop dla początkujących jak i bardziej zaawansowanych użytkowników.

I. Optymalizacja treści sklepu

Content is a King. Treść pełni ogromną rolę przy pozycjonowaniu sklepu a przede wszystkim stron z pojedynczym produktem w wynikach organicznych. Cały ten poradnik przestaje mieć jakikolwiek sens jeżeli naszym głównym celem nie jest dostarczenie wyczerpującego, ciekawego i wysokiej jakości opisu, który dodatkowo przekona klientów do zakupu.

PrestaShop daje możliwość:

  1. Dodania krótkiego opisu (lub podsumowania), który jest widoczny w listingach artykułów, w wyszczególnionym miejscu na stronie produktowej lub jako taki odpowiednik zalążka.
  2. Redakcji szczegółowego opisu produktu
  3. Zdefiniowania cech, które umożliwiają nam agregację różnych produktów różniącymi się cechami w ramach jednego produktu
  4. Dodania marki
  5. Dodania produktów powiązanych, które mogą przekierowywać klienta do produktów, które mogą potencjalnie zainteresować klienta robiącego zakupy
  6. Zdefiniowania kategorii

Optymalizacja sklepu internetowego PrestaShop polega na odpowiednim wykorzystaniu wspomnianych funkcjonalności.

Kategorie pozwalają agregować produkty w logiczne grupy. Zapewniają automatycznie logiczne linkowanie wewnętrzne sklepu (tak samo jak punkty 4,5 i 6)  oraz ułatwiają odnalezienie się klienta w asortymencie sklepu. Zarówno podział na wiele kategorii jak i tworzenie zbyt ogólnych nie jest najlepszą praktyką.

Marka ma bardzo podobne funkcje do kategorii. Jest to dodatkowa taksonomia, której możemy użyć do grupowania produktów, tworzenia modułów lub oznaczania produktów. Sprzedając oryginalne produkty wybranej marki, można bez skrępowania wykorzystać logotypy w ramach tzw. dozwolonego użytku.

W opisach produktów można użyć formatowania. Warto dzielić opis w bloki i kategorie aby łatwo się go czytało. Wtedy możemy wykorzystać standardowe nagłówki h1, h2 i h3 za pomocą opcji „Akapit”.

Optymalizacja zdjęć sklepu

O tym jak ważna jest optymalizacja zdjęć pisałem w artykule optymalizacja zdjęć i grafiki na potrzeby WWW. W PrestaShop tak jak w każdym rasowym CMSie (czyli w systemach zarządzania treścią) można dodawać znaczniki alt a nazwy plików są także bez znaczenia.

Przy okazji zdjęć, warto wspomnieć, że poza optymalizacją rozmiaru i formatu, powinny mieć odpowiednią treść. Zdjęcia w sklepie internetowym mają całkiem inną funkcję niż na stronie internetowej dlatego warto zadbać o ich ogólną jakość a także ilość, ponieważ rzadko kiedy klientowi przyda się więcej niż kilka zdjęć danego produktu. A zbyt obszerne galerie (tak jaki i zbyt długie opisy) mogą negatywnie wpłynąć na User Experience i pośrednio na SEO.

PrestaShop pozwala na wygodną zmianę zaawansowanych ustawień dotyczących generowania miniatur oraz wymiarów pośrednich. Można je znaleźć w ULEPSZENIA >> Wygląd >> Zdjęcia:

Jak w żadnym innym systemie czy CMSie mamy możliwość wyboru preferowanego formatu zdjęć:

Jeżeli

  • wiemy jak dobierać formaty grafik
  • korzystam z efektu przezroczystości zdjęć, np. tło w sklepie nie jest białe
  • zdjęcia produktów to tzw. packshoty bez efektu 3D i cieniowania

zalecam zostawić opcję: Użyj PNG jeżeli zdjęcia podstawowe jest w formacie PNG.

W każdym innym przypadku zalecam wybierać: użyj JPEG.

Przyjęło się, że optymalną wartością dla kompresji JPEG to 80%. Jest to kompromis pomiędzy jakością zdjęcia a jego zajmowaną przestrzenią. Dla zdobycia 100% we wszelkich analizatorach proponuję ustawić 75% lub mniej. Jeżeli zdjęcia mają mieć niczym nie skompromitowaną jakość można zostawić wartość 90%.

Kompresję PNG należy ustawić na maksymalną możliwą wartość czyli 9. Uzyskamy wtedy „zielone” wyniki we wszelkiego typu analizatorach. Jeżeli jednak ruch mobilny przewyższa ruch z urządzeń klasy PC należy zostawić na domyślnym i zalecanym przez panel – czyli wartość: 7. Jest to związane z obciążeniem dla procesora i tym samym z konsumpcją energii baterii zasilającej urządzenia klienta.

Jakie dobierać wielkości poszczególnych rozmiarów uzależnione jest od tego jak ostatecznie prezentuje się szablon. Jeżeli analizatory (typu PageSpeed lub GTMetrix) zgłaszają, że grafiki są nieprawidłowo skalowane należy tę wartość obniżać za każdym razem generują nowe miniatury.

Czytaj więcej jak zdobyć 100 punktów w PageSpeed Insights dla urządzeń mobilnych i dla urządzeń klasy PC.

Zaawansowane opcje SEO dla produktów w PrestaShop

Bardzo przydatną zakładką w edycji produktów jest zakładka „SEO”. Jest ona dedykowana zaawansowanym użytkownikom CMSów oraz ogólnej optymalizacji SEO:

Mamy tutaj możliwość zdefiniowania na sztywno meta tytułu czyli meta title, znacznika <title>. Co w przypadku sklepu jest bardzo potrzebne. O ile nazwy produktów należy upraszczać o tyle tytuły title mają między innymi zachęcić użytkownika do kliknięcia w wynikach wyszukiwania. Optymalna długość tytułu to taka która pojawi się w całości w wynikach wyszukiwania. Dotyczy to także dowolnych stron internetowych.

To samo można powiedzie o drugim polu opis meta czyli meta description. Ich treść powinna odpowiadać treści na konkretnej podstronie i ma ułatwić decyzję co do wyboru konkretnej podstrony w wynikach wyszukiwania. Optymalna długość to ok. 300 znaków.

Niestndardowy URL ułatwia semantyczne powiązanie podstron oraz wpływa pozytywnie na User Experience. Zrozumiały dla człowieka adres w przeglądarce utwierdza nas w przekonaniu, że znajdujemy się tam gdzie chcemy. Zdecydowanie odradzam korzystać z modułów usuwających numery ID produktów i kategorii. Gdyby taka funkcja była potrzebna i nie wpływała negatywnie na wydajność, twórcy PrestaShop dawno by ją wbudowali w podstawowy skrypt 🙂

PROTIP

Optymalna długość tytułu w sklepie internetowym od 50 do 60 znaków.

Optymalna długość opisu dotyczącego produktu lub kategorii to około 300 znaków

Optymalna długość adresu URL dla ostatniego członu to: od 3 do 5 słów lub 100 znaków.

Dane strukturalne

Wykorzystując dane strukturalne, możemy dodać też dodatkowe informacje, takie jak np. cena produktu lub dostępność w magazynie. Taką funkcjonalność profesjonalny szablon w PrestaShop zapewnia już w standardzie:

dane uporządkowane - sklep

II. Optymalizacja szablonu i serwera PrestaShop

Optymalizacja szablonu w systemie PrestaShop rządzi się podobnymi prawami jak szablony w innych systemach czy CMSach. Priorytetem optymalizacji treści na rzecz internetu jest ogólnie rozumiana wygoda użytkownika czyli poniekąd prędkość wczytywania się strony czy sklepu internetowego. W przypadku sklepów internetowych ma to ogromne znaczenie, bo jak wiemy wizyta w sklepie nie kończy się na jednej podstronie a cały proces zakupowy polega na wizycie w kilku lub nawet kilkunastu innych podstronach.

Dodatkowo, jak już wiele razy udowodniono, czas wczytywania się strony jest odwrotnie proporcjonalny do ilości konwersji czyli ułamka odwiedzin kończących się faktycznym zakupem.

PrestaShop - prędkość działania zalety i wady

Z tego wynika ważna różnica:

Mianowicie, o ile w blogach możemy sobie pozwolić na wklejenie wszystkich zasobów CSS i JS w ciało witryny (rzecz jasna dla minimalizacji zapytań HTTP i przyspieszenia pierwszej wizyty w danej witrynie)  to w sklepach internetowych jest to duży błąd.

W przypadku wszelkich sklepów należy:

  • Szablon napisać samodzielnie lub rozbudować domyślny dostarczany razem z oryginalną paczką PrestaShop
  • Usunąć zbędne linie w kodzie JavaScript (.js) oraz kaskadowych arkuszy stylów (.css)
  • Skompresować wyżej wymienione zasoby np. za pomocą minimalizacji (ang. Minifying)
  • Umieścić zasoby kolejno w jednym pliku agregującym wszystkie pliki JavaScript i CSS
  • Tak samo jak w przypadku dynamicznych stron internetowych, elementy, których nie edytujemy często (stopka, nagłówek, pasek z widgetami) hardcodować czyli zapisać na sztywno w kodzie szblonu PrestaShop.

Prędkość działania sklepów warto badać bezpośrednio w Google Analytics ze względu na większą wagę stron produktowych oraz faktu zazwyczaj mniejszego współczynnika odrzuceń w sklepach internetowych. Testy poszczególnych stron – tym bardziej strony głównej – nie są miarodajne.

Ustawienia wydajności PrestaShop

Na szczęście PrestaShop pod katem optymalizacji szablonu i serwera dostarcza gotowych i całkiem skutecznych mechanizmów. Działania te zmniejszają czas TTFB czyli krytyczny parametr wskazujący na opóźnienie w komunikacji ze sklepem internetowym. Można je znaleźć w KONFIGURUJ>> Zaawansowane >> Wydajność:

Ustawienia dotyczące Smarty

Kompilacja szablonu to sztywne zapisanie w plikach PHP kodu HTML odpowiedzialnego za prezentację sklepu do ponownego wykorzystywania. Dzięki temu Framework nie musi z każdą wizytą odświeżać szablonu a to przyczynia się do znacznej poprawy prędkości działania sklepu a w szczególności poprawy czasu odpowiedzi serwera.

Jeżeli sklep działa w trybie produkcyjnym, tzn. nie są prowadzone działania deweloperskie (ze sklepu korzystają klienci) należy:

  • zostawić opcję: „Nigdy nie kompiluj ponowni plików szablonu”
  • Włączyć pamieć podręczną
  • Tryb cacheowania – teraz tak: system plików (jeżeli dysponujemy na serwerze dyskiem SSD). MySQL jeżeli baza danych ma dostęp do co najmniej 2GB pamięci RAM i nie występują przekroczenie zasobów. Jeżeli MySQL będzie musiał korzystać z pliku wymiany to może dojść do znacznego obniżenia wydajności. Można porostu przetestować które ustawienie daje odczuwalnie lepszy rezultat.
  • Wyczyść pamięć podręczną: Nigdy nie kasuj pamięci podręcznej
  • Wyłączyć tryb debugowania
  • Pamięć podręczna dla CSS: TAK
  • Inteligentna pamięć podręczna JavaScript: TAK
  • Cache (na samym dole): TAK (wybór: Memcached jeżeli mamy możliwość zainstalowania lub integracji z serwerem memcached.

Jeżeli wprowadzamy zmiany w działającym sklepie (ze sklepu korzystają klienci) należy:

  • wybrać „Skompiluj ponownie szablony jeżeli pliki zostały zaktualizowane”.
  • Wyłączyć pamieć podręczną
  • Wyczyść pamięć podręczną: Wyczyść pamięć podręczną jeżeli coś zostanie zmienione
  • Wyłączyć tryb debugowania
  • Pamięć podręczna dla CSS: NIE
  • Inteligentna pamięć podręczna JavaScript: NIE
  • Cache (na samym dole): NIE

Jeżeli zaś instalacja PrestaShop jest typowo deweloperska(ze sklepu NIE korzystają klienci) należy:

  • Wymuś kompilację
  • Wyłączyć pamieć podręczną
  • Wyczyść pamięć podręczną: Wyczyść pamięć podręczną jeżeli coś zostanie zmienione
  • Włączyć tryb debugowania
  • Pamięć podręczna dla CSS: NIE
  • Inteligentna pamięć podręczna JavaScript: NIE
  • Cache (na samym dole): NIE

Wyłączenie modułów nie od PrestaShop i wyłączenie wszystkich nadpisywań przydaje się tylko i wyłącznie do prac deweloperskich i nie należy włączać ich w działającym sklepie.

Opcja „Wyczyść pamięć podręczną” (u góry ustawień) służy do tego aby po większych zmianach, np. w asortymencie użytkownicy, którzy wcześniej byli w naszym sklepie nie pobierali sklepu z pamięci podręcznej ale z serwera aby mieć przed sobą uaktualnioną wersję sklepu.

CDN

W przypadku

  • sklepu wielojęzycznego
  • pokaźnego katalogu produktów
  • lub intensywnego ruchu (kilka tysięcy różnych produktów)

…warto wdrożyć serwowanie zdjęć za pomocą serwera plików oraz ich dystrybucję wszystkich grafik i statycznych treści za pomocą Content Delivery Network tylko zaufanych dostawców takich jak Amazon CloudFront lub CloudFlare. Takie rozwiązanie pozwoli tanim kosztem skalować nasz sklep, wpłynie poprawnie na szybkość działania oraz wydajność serwera a tym samym na pozycje w wyszukiwarce.

Edycja .htaccess

Jak przy optymalizacjach SEO wszelkich innych witryn należy:

Włączenie nagłówków expires w .htaccess:

ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/html "access plus 1 month"
ExpiresByType application/xhtml+xml "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"

Resztę działań i szczegółowy opis implementacji znajdziesz w podlinkowanych artykułach powyżej.

Jeżeli twój sklep działa wolno, czytaj więcej o przyspieszaniu PrestaShop.

Uwagi ogólne

Pamiętaj że z technicznego punktu widzenia sklep internetowy jest witryną internetową. Korzystaj z usług doświadczonych specjalistów w rozwoju, projektowania i optymalizacji sklepów internetowych PrestaShop. Pozyskuj wartościowe linki ze stron związanych tematycznie z asortymentem i charakterem twojego sklepu internetowego.

W przypadku sklepów często dochodzi do zmian w asortymencie lub niedostępności konkretnych produktów dlatego witryny te są narażone na występowanie licznych błędów indeksowania. Należy ich unikać, przekierowywać adresy produktów na podobne lub zastosować inteligentną stronę błędu 404, która podpowie gdzie szukać substytutów produktów, które chciał zobaczyć użytkownik.

Unikaj najczęstszych błędów SEO czasem najlepszą optymalizacją jest… zaniechanie szkodliwych w dłuższej perspektywie czasu działań, które rzekomo mają cudowny wpływ na pozycje w wyszukiwarkach.

Podsumowanie

Zaletą tego typu optymalizacji będzie polepszenie pozycji w wyszukiwarce, wzrost ilości zamówień z powodu szybszego i bardziej bezproblemowego działania sklepu a przy okazji zmniejszenie zużycia zasobów serwera.

Jak widać, optymalizacja SEO PrestaShop jest ułatwiona za pomocą bardzo bogatych opcji w samym panelu. Zdecydowanie zalecam unikanie zewnętrznych modułów i wtyczek, ponieważ do celów SEO są nam zupełnie nie potrzebne a jedynie co to mogą zrobić to obciążyć hosting i skomplikować niepotrzebnie strukturę sklepu w zamian za drobne zmiany, które ostatecznie nie mają przełożenia na poprawę optymalizacji.

Źródła:

https://devdocs.prestashop.com/1.7/scale/optimizations/

Henderson C. Building Scalable Web Sites. Building, Scaling, and Optimizing the Next Generation of Web Applications, O’reilly 2008.

Optymalizacja SEO sklepu PrestaShop
4.7 (94.44%) głosów: 18


Komentarze

Brak komentarzy.

Dodaj swój komentarz