Projekt strony produktu w e-commerce: anatomia i przykłady
Projekt strony produktu w e-commerce
Projekt strony produktu: anatomia, przykłady na żywo, lista kontrolna | We.Inc
Anatomia strony produktu w sklepie internetowym z edytowalnymi układami na żywo, listą kontrolną do samooceny i danymi strukturalnymi Product zgodnymi z aktualnymi wymaganiami Google.
Strona produktu musi odpowiedzieć na trzy pytania, zanim klient kliknie przycisk zakupu: co to jest, czy to dla mnie i co się stanie po zapłacie. Na desktopie umieść nad linią zgięcia wyraźne zdjęcia, nazwę, cenę i opcje, poniżej dostawę, zwroty i szczegóły, a cenę i dostępność oznacz danymi strukturalnymi Product.
Anatomia strony produktu, od góry do dołu
Część
Zadanie
Częsty błąd
Galeria
Pokazuje produkt z każdej strony, w użyciu i w skali
Tylko jedno zdjęcie studyjne
Nazwa i cena
Potwierdza, że to właściwa rzecz w znanej cenie
Cena ukryta aż do kasy
Opcje
Rozmiar, kolor, ilość z czytelnym stanem magazynowym
Brak towaru wychodzi na jaw po wyborze
Dodaj do koszyka
Jedna główna akcja
Konkurujące przyciski o tej samej wadze
Dostawa i zwroty
Usuwa obawy o to, co po zakupie
Zasady tylko w stopce
Szczegóły i specyfikacja
Materiały, wymiary, pielęgnacja
Ściana tekstu bez nagłówków
Pytania
Odpowiedzi na to, co blokuje decyzję
Brak w ogóle
Zamiast zrzutów ekranu z innych sklepów ten przewodnik buduje część po części stronę produktu dla wymyślonej pracowni ceramiki w czystym HTML i CSS. Użyj listy kontrolnej, aby ocenić własną stronę, i skopiuj dane strukturalne zgodne z aktualnymi zasadami Google.
Oceń swoją obecną stronę produktu za pomocą listy kontrolnej i zobacz, których części brakuje.
Otwórz przykłady układów na żywo i edytuj je, wpisując dane własnego produktu.
Skopiuj JSON-LD Product i uzupełnij go tą samą ceną i stanem magazynowym, które pokazuje strona.
Przed publikacją przetestuj znaczniki w Google Rich Results Test.
Podaj przy przycisku datę lub przedział dostawy, a nie tylko koszt. Ludzie planują wokół tego, kiedy paczka dotrze.
Pokazuj stan magazynowy przy każdej opcji, zanim zostanie wybrana, aby nikt nie wybrał wyprzedanego rozmiaru.
Podawaj prawdziwe wymiary i dodaj zdjęcie z czymś znajomym dla skali, np. dłonią albo kubkiem.
Etykieta przycisku powinna być konkretna i wszędzie taka sama, np. Dodaj do koszyka.
Dane strukturalne muszą zgadzać się ze stroną. Inna cena w znacznikach niż na ekranie to powód, by Google je zignorował.
Najczęściej zadawane pytania
Co powinno być nad linią zgięcia na stronie produktu?
Na desktopie: główne zdjęcie, nazwa produktu, cena, wybór opcji i przycisk dodania do koszyka. Na telefonach zdjęcie zwykle wypełnia pierwszy ekran, więc zadbaj, aby nazwa i cena były zaraz pod nim, a przycisk tuż za nimi.
Jakich danych strukturalnych potrzebuje strona produktu?
Dla stron, na których można kupić, dokumentacja Google o merchant listings wymaga Product z name, image i offers oraz Offer z ceną większą od zera i priceCurrency. Zalecane są availability, informacje o wysyłce, zasady zwrotów, marka i GTIN.
Czym różnią się product snippets od merchant listings?
Product snippets są dla stron, na których nie można kupić bezpośrednio, np. recenzji, i wymagają name oraz jednego z review, aggregateRating lub offers. Merchant listings są dla stron, które sprzedają produkt, i wymagają ceny oraz waluty.
Czy pokazywać opinie na stronach produktów?
Jeśli masz prawdziwe, tak, w pobliżu ceny albo pod szczegółami. Nigdy nie wymyślaj opinii ani ocen i dodawaj znaczniki aggregateRating tylko wtedy, gdy ocena jest widoczna na stronie i pochodzi od prawdziwych klientów.
Zdjęcia robią większość sprzedaży
Zaplanuj galerię jako zestaw: przód, tył lub bok, zbliżenie materiału, produkt w użyciu i jedno zdjęcie z czymś dla skali. Każdy obraz potrzebuje tekstu alt opisującego, co pokazuje dane ujęcie.
Zarezerwuj miejsce na galerię przez width i height lub aspect-ratio, aby strona nie skakała podczas ładowania obrazów.
Blok zakupu
Zgrupuj cenę, opcje, ilość i przycisk razem, a tuż pod nimi umieść podsumowanie dostawy i zwrotów. Ten jeden blok powinien odpowiadać na większość pytań bez przewijania.
Wyłączone opcje potrzebują czegoś więcej niż szarego tekstu. Dodaj do etykiety słowo Wyprzedane, aby stan był jasny dla wszystkich, również dla użytkowników czytników ekranu.
Szczegóły, które zmniejszają liczbę zwrotów
Wymiary, materiały, instrukcje pielęgnacji i zawartość opakowania powinny trafić do łatwych do przejrzenia sekcji z nagłówkami. Krótka uwaga o rozmiarze lub dopasowaniu zapobiega wielu błędnym zamówieniom.
Odpowiedz bezpośrednio na stronie na dwa lub trzy pytania, które klienci zadają najczęściej, a resztę podlinkuj do pełnego FAQ.
Przykłady układów strony produktu
Dwukolumnowa strona produktu z galerią i blokiem zakupu
Na szerokich ekranach galeria po lewej, blok zakupu po prawej; na telefonach układają się jedno pod drugim. Wyprzedany rozmiar mówi o tym słowami, a nie tylko szarym kolorem.
Szczegóły w sekcjach z etykietami
Krótkie sekcje z nagłówkami łatwiej przejrzeć niż jeden długi opis. Pierwsza jest otwarta, bo odpowiada na najczęstsze pytanie.
Dane strukturalne Product dla strony, która sprzedaje
name, image i offers z price i priceCurrency to wymagane pola merchant listing; availability i pozostałe są zalecane. Wartości muszą zgadzać się ze stroną.
Co najmniej cztery zdjęcia, w tym jedno w użyciu i jedno pokazujące skalę
Każdy obraz ma tekst alt opisujący dane ujęcie
Cena widoczna obok nazwy produktu
Stan magazynowy pokazany przy każdej opcji przed jej wybraniem
Jeden wyraźnie główny przycisk dodania do koszyka
Koszt i czas dostawy pokazane przy przycisku
Zasady zwrotów streszczone przy przycisku
Wymiary, materiały i pielęgnacja w sekcjach z etykietami
Odpowiedzi na najczęstsze pytania na stronie
Działa przy szerokości 375 px bez przewijania w bok
Dane strukturalne Product zgadzają się z widoczną ceną i stanem magazynowym
Tylko prawdziwe opinie, jeśli jakiekolwiek są pokazane
Lista kontrolna strony produktu
Zaznacz, co Twoja strona produktu już robi. Wynik pokazuje, co zostało do poprawy; nic nie jest zapisywane ani nigdzie wysyłane.