Jak ustawić własny H1 w Shoper bez zmiany nazwy produktu lub kategorii?

Dlaczego warto oddzielić H1 od nazwy produktu lub kategorii?

Nagłówek H1 informuje użytkownika i wyszukiwarkę o głównym temacie danej podstrony. Na stronie kategorii może więc brzmieć na przykład „Buty trekkingowe męskie”, a na karcie produktu „Buty trekkingowe Salewa Alp Trainer 2 Mid GTX”.

Kłopot zaczyna się wtedy, gdy zależy nam na rozbudowaniu H1. Wyobraźmy sobie kategorię, która w menu nazywa się po prostu „Krzesła”. Taka krótka nazwa jest czytelna i dobrze wygląda w nawigacji. Z punktu widzenia SEO bardziej precyzyjny może być jednak nagłówek „Krzesła do jadalni nowoczesne i klasyczne”. Zmiana właściwej nazwy kategorii na tak długą mogłaby pogorszyć wygląd menu.

Podobnie jest z produktem. W sklepie możemy chcieć pozostawić zwięzłą nazwę „Bosch GSR 18V-55”, a jednocześnie ustawić na karcie bardziej opisowy H1: „Wiertarko-wkrętarka Bosch GSR 18V-55 18 V”.

Możliwość niezależnego dopasowania takich elementów jest szczególnie przydatna, gdy prowadzimy bardziej zaawansowane pozycjonowanie na Shoper i chcemy optymalizować najważniejsze podstrony pod konkretne zapytania.

Najpierw sprawdź, czy korzystasz ze Storefrontu, czy z klasycznego szablonu Shoper

To najważniejszy krok przed wprowadzaniem jakichkolwiek zmian. Shoper rozwija obecnie technologię Storefront, której budowa różni się od starszych szablonów RWD. Oznacza to, że instrukcja przygotowana dla klasycznego szablonu nie powinna być automatycznie stosowana w Storefroncie.

Ma to szczególne znaczenie przy zmianach wykonywanych w kodzie. W klasycznych szablonach możemy spotkać między innymi pliki product/list.tpl oraz product/index.tpl. Storefront korzysta z innej konstrukcji i modułów, dlatego kopiowanie do niego kodu przeznaczonego dla starszego szablonu nie jest właściwym rozwiązaniem. Przed wdrożeniem zmian należy sprawdzić, z jakiej technologii szablonu korzysta sklep, ponieważ sposób konfiguracji H1 różni się w zależności od tego, czy jest to Storefront, czy klasyczny szablon RWD.

W przypadku kategorii różnica jest jeszcze ważniejsza, ponieważ Storefront udostępnia obecnie prostsze rozwiązanie niewymagające edycji kodu.

Jak ustawić własny H1 kategorii w Shoper Storefront?

Jeżeli sklep korzysta ze Storefrontu, własny nagłówek kategorii można ustawić bez zmiany krótkiej nazwy używanej w menu.

Przejdź w panelu administracyjnym do sekcji Produkty → Kategorie, a następnie otwórz kategorię, którą chcesz edytować. Poniżej opisów kategorii znajdziesz sekcję Pozycjonowanie. W tym miejscu Shoper pozwala wprowadzić inną nazwę kategorii, która zostanie wyświetlona w nagłówku strony z listą produktów. Oryginalna nazwa może nadal pozostać krótsza i służyć między innymi do prezentacji kategorii w menu.

W praktyce może to wyglądać tak: nazwa kategorii pozostaje „Zlewozmywaki”, natomiast nagłówek strony otrzymuje formę „Zlewozmywaki granitowe i stalowe do kuchni”.

To zdecydowanie najprostszy wariant, ponieważ nie wymaga ingerencji w pliki szablonu. Shoper zaznacza jednak, że możliwość wyświetlania na liście produktów innej nazwy niż nazwa widoczna w menu jest dostępna w technologii Storefront.

Jak ustawić własny H1 kategorii w klasycznym szablonie Shoper?

W starszych szablonach RWD można zastosować obejście wykorzystujące pole META Keywords jako miejsce do wpisania własnego nagłówka H1. W takim wariancie nazwa kategorii pozostaje bez zmian, natomiast szablon otrzymuje dodatkową instrukcję: jeżeli pole META Keywords jest uzupełnione, jego zawartość ma zostać wyświetlona jako H1.

W tym celu w klasycznym szablonie edytowany jest plik product/list.tpl, odpowiedzialny między innymi za wyświetlanie list produktów. W miejscu, w którym szablon wyświetla nazwę kategorii, można zastosować następujący warunek:

{if empty($seo_keywords) || $category_name === $seo_keywords}
{$category_name|escape}
{else}
{$seo_keywords|escape}
{/if}

Nie trzeba znać programowania, żeby zrozumieć zasadę działania tego fragmentu. Jeżeli pole wykorzystywane przez zmienną $seo_keywords jest puste albo zawiera standardową nazwę kategorii, Shoper wyświetla dotychczasową nazwę. Jeżeli natomiast wpiszemy tam inną treść, szablon wykorzysta właśnie ją jako nagłówek.

Po wdrożeniu zmiany możemy więc wejść do wybranej kategorii, otworzyć sekcję Pozycjonowanie i wpisać w polu META Keywords docelowy H1. Pole nie jest w tym rozwiązaniu wykorzystywane jako klasyczne meta keywords. Staje się po prostu miejscem w panelu, z którego szablon pobiera indywidualny nagłówek.

Trzeba jednak pamiętać, że jest to rozwiązanie przeznaczone dla klasycznych szablonów i wymaga modyfikacji kodu.

Jak ustawić własny H1 produktu bez zmiany jego nazwy?

W przypadku produktu sytuacja wygląda inaczej. Shoper nadal standardowo wykorzystuje nazwę produktu jako jego główny nagłówek H1. Oficjalna dokumentacja wskazuje właśnie nazwę produktu jako domyślny H1 karty produktowej.

W klasycznym szablonie RWD można zastosować podobne rozwiązanie jak w przypadku kategorii i wykorzystać pole META Keywords do przechowywania indywidualnego nagłówka.

W panelu przechodzimy do:

Wygląd i treści → Wygląd sklepu → Obecny szablon graficzny → Edycja zaawansowana

Następnie otwieramy plik:

product/index.tpl

W miejscu odpowiedzialnym za H1 produktu stosujemy następujący warunek:

{if empty($seo_keywords)}
{$product->translation->name|escape}
{else}
{$seo_keywords|escape}
{/if}

Zasada jest bardzo prosta. Jeżeli META Keywords danego produktu pozostaje puste, na stronie wyświetla się standardowa nazwa produktu. Jeżeli pole zostanie uzupełnione, wpisana w nim treść zastąpi nazwę tylko w miejscu, w którym generowany jest H1.

Możemy więc pozostawić nazwę produktu „Bosch GSR 18V-55”, a w polu wykorzystywanym do H1 wpisać „Wiertarko-wkrętarka Bosch GSR 18V-55 18 V”. Nazwa produktu nie musi z tego powodu zostać wydłużona.

Sprawdź META Keywords przed wdrożeniem zmiany

To bardzo ważny etap. Przed zastosowaniem przedstawionego rozwiązania trzeba sprawdzić, czy pole META Keywords nie zostało wcześniej uzupełnione w produktach lub kategoriach.

Dlaczego? Po zmianie szablonu zawartość tego pola zacznie być traktowana jako nagłówek. Jeżeli kilka lat wcześniej ktoś wpisywał tam ciągi w rodzaju „wiertarka, wiertarki, tania wiertarka, wiertarki sklep”, taki tekst może nagle pojawić się użytkownikom jako H1.

W przypadku produktów warunek celowo działa w taki sposób, że przy pustym polu pozostawia dotychczasową nazwę. Dopiero uzupełnienie $seo_keywords powoduje wyświetlenie indywidualnej treści. Dlatego kontrola istniejących danych przed wdrożeniem jest kluczowa.

Dopiero po upewnieniu się, że pole jest puste lub zawiera właściwe informacje, warto aktywować taki mechanizm w całym sklepie.

Czy ten sam sposób zadziała w Shoper Storefront?

Nie należy przenosić powyższego kodu bezpośrednio do Storefrontu. Jest on przeznaczony dla klasycznych szablonów Shopera.

Storefront wykorzystuje inną technologię. Za tytuł produktu odpowiada tam między innymi moduł product_title, którego standardowy kod pobiera nazwę aktualnego produktu i przekazuje ją do elementu odpowiedzialnego za tytuł strony.

Jeżeli sklep korzysta ze Storefrontu i zależy nam na niezależnym H1 dla produktów, trzeba przygotować rozwiązanie zgodne właśnie z budową Storefrontu. Jest to już zadanie związane z modyfikacją szablonu, a nie ustawienie, które warto wykonywać poprzez kopiowanie fragmentu kodu ze starszego motywu.

W przypadku kategorii Storefront jest znacznie prostszy, ponieważ, jak wspomnieliśmy wcześniej, pozwala ustawić inną nazwę wyświetlaną w nagłówku bez ingerencji w kod.

Czy zmiana H1 powoduje zmianę adresu URL?

Jeżeli korzystamy z opisanych wyżej metod, nie ma potrzeby zmieniać adresu URL tylko dlatego, że zmieniliśmy H1. W klasycznym rozwiązaniu opartym na $seo_keywords ingerujemy w sposób wyświetlania nagłówka, a nie w nazwę czy adres produktu. W Storefroncie oddzielna nazwa kategorii również może pełnić funkcję bardziej rozbudowanego nagłówka bez konieczności wydłużania nazwy widocznej w menu.

To istotna zaleta. Zmiana istniejącego adresu URL tylko po to, aby umieścić w nim dodatkową frazę, często nie jest potrzebna. Szczególnie w przypadku podstron posiadających już ruch organiczny każdą zmianę adresu należy wcześniej przeanalizować.

Co sprawdzić po ustawieniu własnego H1?

Czy warto zmieniać H1 na każdej podstronie sklepu?

Nie. Własny H1 jest narzędziem, a nie obowiązkowym punktem optymalizacji każdej karty produktu i kategorii.

Jeżeli standardowa nazwa dobrze określa temat strony, nie ma powodu komplikować konfiguracji. Indywidualne nagłówki są najbardziej przydatne tam, gdzie krótka nazwa potrzebna w menu lub katalogu nie daje wystarczających możliwości opisania zawartości strony.

W większym e-commerce warto zacząć od najważniejszych kategorii, produktów generujących ruch i sprzedaż oraz podstron mających największy potencjał wzrostu. Sam H1 nie zastąpi odpowiedniej struktury kategorii, treści, linkowania wewnętrznego, optymalizacji technicznej czy właściwego doboru fraz. Wszystkie te elementy powinny być analizowane wspólnie w ramach kompleksowego pozycjonowania sklepów internetowych.

Dobrze skonfigurowany Shoper pozwala więc oddzielić H1 od nazwy, ale sposób wdrożenia zależy od technologii szablonu. W Storefroncie własny nagłówek kategorii można ustawić bezpośrednio z panelu. W klasycznych szablonach dla kategorii i produktów można wykorzystać dodatkowe pole oraz odpowiednią modyfikację kodu. Najważniejsze jest, aby przed wdrożeniem sprawdzić używany szablon, istniejącą zawartość META Keywords i przetestować zmianę na kilku podstronach.