Ostatnimi czasy sklepy internetowe otrzymują liczne komunikaty od Google, informujące, że w Search Console pojawiły się błędy. Wiadomo, każdy chce żyć w zgodzie z Google, dlatego stosowanie się do ich zaleceń wydaje się być całkiem sprytnym pomysłem.
Jeśli jeszcze nie wiesz, czy z Twoim sklepem jest wszystko w porządku, zaloguj się do Google Search Solsone i sprawdzimy razem, czy nie ma przypadkiem żadnych błędów lub ostrzeżeń.
W menu Search Console, po lewej stronie, odszukaj sekcję Ulepszenia:
Następnie odwiedź wszystkie trzy zawarte w tej sekcji zakładki, a więc:
- Obsługa na urządzeniach mobilnych
- Menu nawigacyjne
- Produkty
Jeśli po wejściu w daną zakładkę widzisz czerwone kolumny jak na obrazku poniżej, oznacza to, że Twój sklep PrestaShop posiada błędy.
To jeszcze nie wszystko. Poza błędami (oznaczone na czerwono), sklep może otrzymać również ostrzeżenia. Oznaczane są one na żółto. Na pierwszy rzut oka mogą być niewidoczne, ale jeśli wejdziesz w daną zakładkę i następnie klikniesz w pole oznaczone napisem prawidłowe z ostrzeżeniem, wówczas wyświetlone zostaną również ostrzeżenia:
W ten sposób sprawdziliśmy czy Twój sklep internetowy PrestaShop posiada błędy lub ostrzeżenia w Google Search Console.
Poniżej znajdziesz listę najczęstszych błędów, jakie zgłaszają mi właściciele sklepów PrestaShop. Podpowiem też jak się z nimi uporać.
Sekcja: Obsługa na urządzeniach mobilnych
Mała czcionka utrudnia czytanie tekstu
Zalecana przez Google minimalna wielkość czcionki to 12 pikseli (fachowcy zamiast czcionka napisaliby font). Jeżeli wyświetla Ci się błąd informujący o zbyt małej czcionce, w którymś miejscu musisz mieć przynajmniej jeden tekst o wielkości poniżej 12 pikseli. Jako tekst rozumiemy właściwie wszystko – opis produktu, informacje o produkcie, tekst w przyciskach itp.
Spotkałem się z niektórymi szablonami, które chcąc ukryć dany element tekstowy, stosują w CSS następującą komendę:
font-size: 0px
Mówiąc bardziej ludzkim językiem – ustawiana jest wielkość czcionki na zero pikseli, w wyniku czego tekst jest niewidoczny. Jest to bardzo zła praktyka. Jeśli jest taka potrzeba, tekst polecam ukrywać za pomocą przewidzianej do tego metody, czyli display: none
Jeśli więc wydaje Ci się, że żaden fragment tekstu na stronie nie ma mniej, niż 12 pikseli, być może w Twoim sklepie PrestaShop została użyta komenda ukrywająca tekst w niefrasobliwy, wyżej wymieniony sposób.
Usunięcie tego błędu będzie polegało na przejrzeniu plików CSS Twojego sklepu PrestaShop. Zwróć szczególną uwagę na plik theme.css oraz custom.css. Czasem jednak to nie będzie wystarczające, bowiem problem ze zbyt małą czcionką może powodować któryś z zainstalowanych na sklepie modułów (one też niekiedy mają własne pliki ze stylami CSS). Wówczas należy sprawdzić też plik ze stylami danego modułu.
Elementy klikalne zbyt blisko siebie
Błąd dość często spotykany na sklepach PrestaShop. Jego usunięcie to dość żmudny i czasochłonny proces. Szczególnie, jeśli korzystasz ze słabo zaprojektowanego szablonu.
Żeby nie było tak ponuro, warto dodać, że błąd zazwyczaj można wyeliminować bez większej ingerencji w strukturę szablonu, a parę zmian w plikach CSS powinno rozwiązać problem.
Google zaleca, aby elementy klikalne miały odpowiednią wielkość. Jeśli Twój sklep nie jest anomalią, prawdopodobnie większość jego odwiedzin pochodzi ze smartfonów. W trosce o użytkowników niewielkich urządzeń, Google zaczęło weryfikować, czy elementy klikalne są wystarczająco duże, aby nie było problemu ze stuknięciem palcem w odpowiednie miejsce. Wszak jedni mają bardziej zgrabne kciuki, inni nieco mniej, a zadbać trzeba o każdego.
Uwagę zwraca się głównie na przyciski, czyli elementy oznaczone jako <button>
Minimalny rozmiar takich elementów zalecany przez Google to 48×48 pikseli.
Jednymi z najczęściej spotykanych elementów oznaczonych błędem są przyciski do zwiększania lub zmniejszania ilości. W domyślnym szablonie PrestaShop i wielu sklepach zbudowanych na szablonach, możesz spotkać takie rozwiązanie:
Przyciski „zwiększ ilość” oraz „zmniejsz ilość” są w tym przypadku są nie tylko zbyt małe, ale też znajdują się zbyt blisko siebie (a właściwie są zaraz przy sobie). W konsekwencji nie tylko powodują błędy w Google Search Console, ale też utrudniają korzystanie ze sklepu osobom używającym smartfony.
Pamiętaj też, że błąd „elementy klikalne zbyt blisko siebie” może dotyczyć nie tylko szablonu sklepu, ale też zainstalowanych modułów. To w nich niejednokrotnie znajdują się przyciski niewielkich rozmiarów, w konsekwencji powodujące błędy na Twoim sklepie PrestaShop.
Sekcja: Produkty
Należy określić właściwość „offers”, „review” lub „aggregateRating”
Błąd wyświetlany niemalże na każdym sklepie PrestaShop. Wynika z błędnego informowania Google co jest produktem, a co nim nie jest.
Załóżmy, że sprzedajesz w swoim sklepie materace. Klient wchodzi na produkt o nazwie biały materac. Znajduje tam informacje o parametrach materaca, cenie, wyglądzie itp.
Poniżej opisu produktu znajduje się sekcja o nazwie „Produkty, które warto dokupić”. Znajdują się w niej: poduszka i prześcieradło.
I teraz tak: zgodnie ze sztuką, na stronie produktu białego materaca powinniśmy jako produkt oznaczyć właśnie biały materac. Nic w tym odkrywczego, prawda? Problem w tym, że PrestaShop jako produkt oznaczy nie tylko biały materac, ale też poduszkę oraz prześcieradło.
Tu pojawia się problem, bo oznaczanie tego typu jest niezgodne ze standardami schema.org oraz Google. Według powszechnie obowiązujących wytycznych, na stronie białego materaca, jako produkt oznaczamy wyłącznie biały materac. Pozostałe produkty wyświetlane jako produkty warte dokupienia, lub jakiekolwiek inne, nie powinny być oznaczane jako produkt.
W ten błędny sposób zaprojektowana jest domyślna wersja PrestaShop, a większość gotowych do kupienia szablonów nie usunęło tego błędu. Problem oczywiście możemy rozwiązać, a do tego będzie potrzebne kilka modyfikacji w pliku product.tpl. Plik ten znajdziesz w tym miejscu: \themes\[nazwa-szablonu]\templates\catalog\_partials\miniatures\product.tpl
Po pierwsze, znajdź tag <article>. Powinien być widoczny zaraz z góry. Wewnątrz niego znajdziesz taki fragment kodu Danych Strukturalnych:
itemscope itemtype="http://schema.org/Product"
Usuń wyżej pokazany fragment kodu. Dzięki temu, miniatury produktowe nie będą już oznaczane jako produkt.
Następnie zejdź parę linijek niżej, aż dotrzesz do zdjęcia produktu, oznaczonego jako <img>. Sprawdź, czy czasem zdjęcie to nie zostało oznaczone atrybutem itemprop=”image”. Jeśli zostało, ten fragment kodu również skasuj.
Jeśli Twój szablon nie zaserwował nam dodatkowych i zarazem nieprzewidzianych udziwnień, powinno być wszystko gotowe. Zaloguj się teraz do Search Console i poproś o przeprowadzenie ponownej weryfikacji.
Brakujące pole „sku”
SKU (Stock Keeping Unit), to nic innego jak Twój indeks produktu z PrestaShop. Każdy sklep może sobie dany produkt oznaczać dowolnie i nie ma żadnego wzoru do przestrzegania. Ważne, aby SKU był uzupełniony w każdym produkcie, a z jakich znaków się składa i ile znaków jest, nie ma żadnego znaczenia. Jeśli jednak nie wpiszesz nic, lub Twój szablon nie zaczytuje odpowiednio kodu SKU, ostrzeżenie Brakujące pole „sku” będzie się wyświetlać.
Jak rozwiązać problem? Po pierwsze zaloguj się do panelu zarządzania swoim sklepem PrestaShop i sprawdź, czy każdy produkt ma nadany SKU. Parametr ten dodawany jest przy edycji produktu, w zakładce Ustawienia podstawowe. Jeśli pole Indeks jest puste jak na zdjęciu poniżej, oznacza to, że Twój produkt nie ma nadanego SKU.
Jeżeli każdy produkt ma uzupełniony kod SKU, a ostrzeżenie wciąż się wyświetla, oznacza to, że Twój szablon PrestaShop nie ma odpowiednio przygotowanych Danych Strukturalnych. Mówiąc prościej – kod jest napisany tak, że Google nie jest w stanie odnaleźć SKU.
W celu naprawienia problemu, osadź poniższy kod w dowolnym miejscu pliku .tpl odpowiadającego za kartę produktu:
<meta itemprop="sku" content="{$product.reference}"/>
Nie podano identyfikatora globalnego (takiego jak GTIN, MPN czy ISBN)
Jak zapewne większość z Was wie, Google już jakiś czas temu zaczęło konkurować z porównywarkami cenowymi, takimi jak Ceneo, Skąpiec, czy Nokaut. Uruchomiło bowiem własną porównywarkę.
Poszukując niektóre produkty, szczególnie te dość popularne, możemy w wynikach wyszukiwania Google napotkać się na ich własną porównywarkę, gdzie prezentowany jest produkt i lista sklepów, w których można go nabyć.
A skąd Google wie, że sklep X oferuje ten sam produkt, co sklep Y? Przecież nazwa produktu może być nieco inna, może się też różnić zdjęciem, opisem i innymi parametrami. No i w tym miejscu wkracza kod kreskowy, który jest dla danego produktu zawsze taki sam.
Tak więc sklep X może nazwać sobie produkt inaczej niż sklep Y, ale mając taki sam kod kreskowy, dają sygnał Google, że mowa o identycznym produkcie.
Kod kreskowy umożliwia więc Google umieszczanie produktów w ich własnej porównywarce. Stąd też nacisk, aby produkty posiadały uzupełniony kod kreskowy.
Podobnie jak w przypadku SKU, upewnij się wpierw, czy produkty mają uzupełnione kody kreskowe.
W panelu do zarządzania sklepem PrestaShop, przejdź do edycji danego produktu, a następnie wejdź w zakładkę Opcje. W tym miejscu znajdziesz pole o nazwie Kod kreskowy EAN-13 lub JAN, gdzie jest przewidziane miejsce na wpisanie kodu kreskowego. Warto wiedzieć, że u nas w Polsce posługujemy się 13-cyrfowym kodem kreskowym, oznaczonym jako EAN-13.
Jeżeli produkt ma kombinacje (np. warianty rozmiarowe), wówczas kod kreskowy uzupełniany jest w zakładce Kombinacje. Dzięki temu każdy wariant rozmiarowy będzie mógł mieć przypisany własny kod kreskowy.
Okej, załóżmy, że każdy produkt ma uzupełniony kod kreskowy, ale ostrzeżenie dalej się wyświetla. Co wtedy? Oznacza to, że Twój sklep nie ma odpowiednio przygotowanych Danych Strukturalnych, w wyniku czego Google nie rozpoznaje kodu kreskowego i w konsekwencji wyświetla ostrzeżenie Nie podano identyfikatora globalnego (takiego jak GTIN, MPN czy ISBN).
W celu rozwiązania problemu, sprawdź w którym pliku .tpl osadzona jest informacja o kodzie EAN. Miejsce to może się różnić w zależności od tego z jakiego szablonu korzysta Twój sklep PrestaShop, ale w większości przypadków informacja o kodzie kreskowym będzie zagnieżdżona w pliku product-details.tpl.
Następnie znajdź sekcję <section class=”product-features”> i w środku niej (najlepiej na samej górze) wklej to:
{if $product->ean13}
<meta itemprop="gtin13" content="{$product->ean13}"/>
{/if}
I to wszystko. Od tego momentu każdy produkt z uzupełnionym kodem kreskowym będzie wyświetlany bez ostrzeżenia.
A co, jeśli produkt nie ma kodu kreskowego?
Czasem zdarza się, że oferowane przez sklep produkty nie mają kodów kreskowych. Mogą to być towary niewielkiego producenta, albo np. własnoręczne dzieła. W tym przypadku oczywiste jest, że kodu kreskowego nie uzupełnimy. W takich sytuacjach musisz więc pogodzić się z tym, że ostrzeżenie Nie podano identyfikatora globalnego (takiego jak GTIN, MPN czy ISBN) będzie się wyświetlało.
Brakujące pole „priceValidUntil”
Wyświetlając takie ostrzeżenie, Google prosi Cię o podanie „daty ważności ceny”. Czyli jak długo podana cena produktu powinna być aktualna.
Przyznasz, że podawanie określonego terminu utrzymania ceny może być dość kłopotliwe. Cena bowiem może być zmieniana z dość dużą częstotliwością i trudno przewidzieć kiedy to nastąpi. Znam nawet sklepy, które aktualizują ceny produktów raz dziennie.
Co wówczas zrobić? Na szczęście rozwiązanie jest dość proste. Wystarczy, że podasz jakąkolwiek przyszłą datę w polu „daty ważności ceny”. Google się tym zadowoli całkowicie. A jeśli cena zmieni się przed upływem podanej daty, nic się stanie.
Możesz więc zmieniać cenę nawet codziennie, byleby cały czas był podany termin jej obowiązywania.
Tak więc odszukaj plik product-prices.tpl, a następnie wklej do niego ten znacznik:
<meta itemprop="priceValidUntil" content="jakas przyszla data">
Tekst „jakas przyszla data” oczywiście uzupełniamy datą w formacie YYYY-MM-DD. Jeśli ustawisz odpowiednie zaciągnie daty ze Smarty, będzie się ona podstawiała automatycznie. Ja na przykład w każdym sklepie PrestaShop ustawiam zawsze datę na: dziś + 15 dni.
Brakujące pole „url”
W tym przypadku, aby ostrzeżenie się nie wyświetlało, należy dodać adres URL danego produktu w postaci mikrodanych:
<link itemprop="url" href="url-twojego-porduktu"/>
Powyższy kod umieszczamy wewnątrz znacznika itemtype=”https://schema.org/Offer”. W większości sklepów PrestaShop będzie się on znajdował w pliku product.tpl.
Brakujące pole „brand”
Nazwa produktu nie zawsze wskazuje jakiego jest producenta. Mając to na uwadze, Google mocno zachęca do utworzenia Danych Strukturalnych, które będą informowały roboty kto jest producentem danego produktu.
Pierwszy krok jaki musisz wykonać w celu naprawy błędu to standardowo odwiedzenie panelu PrestaShop. W zakładce Ustawienia podstawowe, na samym dole, znajdziesz przycisk Dodaj markę. Kliknij w niego, a następnie wybierz producenta edytowanego produktu.
Oczywiście producent musi być wpierw utworzony, więc jeśli jeszcze tego nie zrobiłeś – producenta dodać możesz w menu Katalog > Marki & Dostawcy > Dodaj nową markę.
Po przypisaniu producentów do produktów pora na uzupełnienie kodu w szablonie PrestaShop. W pliku product-details.tpl odszukaj linijkę zawierającą informację o producencie, a następnie zmodyfikuj kod, zgodnie z poniższym wzorem:
<div class="product-manufacturer"{if isset($product_manufacturer->id)} itemprop="brand" itemtype="http://schema.org/Thing" itemscope{/if}>
<meta itemprop="name" content="{$product_manufacturer->name}" />
<label class="label">{l s='Brand' d='Shop.Theme.Catalog'}:</label>
<span><a href="{$product_brand_url}">{$product_manufacturer->name}</a></span>
</div>
Brakujące pole „description”
Ostrzeżenie to informuje, że produkt nie ma opisu. Tu warto sprecyzować jedną rzecz: produkt może mieć opis, ale jeśli nie będzie miał odpowiednio przygotowanych Danych Strukturalnych – ostrzeżenie będzie się pojawiało.
W celu usunięcia błędu, dodaj znacznik itemprop=”description” do elementu, w którym znajduje się opis produktu. Elementem tym może być krótki opis lub ten standardowy. Ja polecam znacznik zawsze dodawać do standardowego opisu, bowiem jest on zazwyczaj bardziej treściwy. Po drugie, krótki opis nie zawsze jest wstawiany do każdego produktu, a ten drugi już owszem.
Brakujące pole „image”
Powodem dla którego Google wyświetla ostrzeżenie jest brak rozpoznania zdjęcia produktu. Nieważne, że masz dodane zdjęcie produktu. To nie wystarczy. Musi ono być jeszcze oznaczone odpowiednimi Danymi Strukturalnymi. Co musisz zrobić, to dodać atrybut itemprop=”image” do zdjęcia produktu. Modyfikacje należy wykonać w pliku product-cover-thumbnails.tpl. Przykładowy zapis wygląda tak:
<img src="https://sklep.pl/img/zdjecie-produktu" itemprop="image">
Jeśli używasz na swojej stronie Lazy Loading (leniwe ładowanie zdjęć), wówczas umieść link do zdjęcia docelowego w atrybucie content:
<img src="https://sklep.pl/img/placeholder.jpg" data-image-lazy-src="https://sklep.pl/img/zdjecie-docelowe.jpg" itemprop="image" content=" https://sklep.pl/img/zdjecie-docelowe.jpg">
Brakujące pole „availability”
Ostrzeżenie informuje, że Google nie jest w stanie zaczytać informacji o dostępności Twojego produktu. Należy więc umieścić odpowiedni kod Danych Strukturalnych, który będzie informował, czy produkt jest na magazynie, czy jest niedostępny. Poprawny zapis Danych Strukturalnych jest następujący:
<link itemprop="availability" href="https://schema.org/InStock"/>
lub
<link itemprop="availability" href="https://schema.org/OutOfStock"/>
InStock oznacza, że produkt jest na magazynie, z kolei OutOfStock mówi o tym, że produkt jest w danej chwili niedostępny.
Poprawnie przygotowane Dane Strukturalne pozwolą nie tylko usunąć ostrzeżenie, ale przede wszystkim umożliwią wyświetlanie informacji o dostępności produktu, z poziomu wyników wyszukiwania Google:
Sekcja: Menu nawigacyjne
Należy określić „name” lub „item.name”
Problem dotyczy nawigacji Breadcrumbs. W pliku breadcrumbs.tpl odnajdujemy link <a>. Wewnątrz tego linku znajduje się nazwa elementu nawigacji. Element ten powinien być oznaczony atrybutem itemprop=”name”. Poniżej gotowy kod:
<a itemprop="item" href="{$path.url}"><span itemprop="name">{$path.title}</span></a>
Brakujące pole „item”
Podobnie jak wyżej, błąd jest związany z Breadcrumbs. W pliku breadrcumbs.tpl, w wierszu z linkiem <a>, należy dodać atrybut itemprop=”item”. Poniżej całość:
<a itemprop="item" href="{$path.url}"><span itemprop="name">{$path.title}</span></a>
Część z Was zapyta, czy to nie jest przypadkiem ten sam kod, co punkt wyżej. Owszem, jest to identyczny kod. Powieliłem go jednak, bowiem w przypadku jego zaniedbania powstają oba wyżej wymienione błędy. A w skrócie mówiąc: wstaw jeden z powyższych dwóch kodów, a rozwiążesz oba problemy związane z menu nawigacyjnym.
Błędy w Google Search Console – podsumowanie
Mam nadzieję, że artykuł ten pomógł Ci wyeliminować wszelkie błędy i ostrzeżenia na Twoim sklepie PrestaShop. Jeśli wyświetla Ci się błąd nieuwzględniony w tym artykule, napisz do nas, a podpowiemy jak się go pozbyć. Pamiętaj, że weryfikacja naniesionych poprawek może trwać kilka, a czasem nawet kilkanaście dni. Warto więc uzbroić się w cierpliwość, bowiem zmiany nie będą widoczne z dnia na dzień.