Headless Commerce i SEO: Jak się dogadać

Czy istnieje jakaś różnica między tradycyjnym a headlessowym podejściem dla SEO?

Po pierwsze, krótko wyjaśnijmy, jak podejście headless różni się od tradycyjnego modelu eCommerce, aby zrozumieć, jakie implikacje może przynieść dla SEO. 

Definicja headless commerce mówi, że stosując podejście headless odłączasz frontend i warstwę backend całego systemu eCommerce. Te dwa, a czasem dodatkowe, zewnętrzne elementy, takie jak wyszukiwarki czy systemy płatności, komunikują się ze sobą poprzez warstwę orkiestracji, AKA API.

Z kolei monolity mają wszystkie funkcje zintegrowane w jednym oprogramowaniu. Logika biznesowa, jak również warstwa prezentacji, jest połączona w jeden pakiet oprogramowania. Czasami dostępne są wtyczki lub rozszerzenia firm trzecich, ale są one tylko dodatkami do posiadania jednego, sprzężonego systemu i są na nim instalowane.

Można odnieść wrażenie, że headless commerce jest dużo bardziej skomplikowany niż proste rozwiązanie all-in-one lub że takie podejście jest overkill. 

Cóż, na pierwszy rzut oka może się to wydawać niepotrzebnym kłopotem, ale im bardziej zapoznasz się z koncepcją architektury headless, tym bardziej przekonasz się, że w rzeczywistości znacznie upraszcza ona wiele rzeczy, otwierając jednocześnie świat możliwości.

Faktem jest, że im większa jest skala i aspiracje Twojego biznesu, tym więcej korzyści z headless commerce zobaczysz. I odbija się to również na SEO. 

Headless commerce nie zrewolucjonizuje tego, jak będzie wyglądać strategia SEO, ale może znacznie przyspieszyć jej realizację, zwłaszcza po stronie technicznej.

Przejdźmy do konkretów, w jaki sposób architektura headless poprawia sposób, w jaki Twoja strona - i biznes - lepiej służy użytkownikom i staje się znacznie łatwiejsza do ulepszenia.

Dostosowanie jest wbudowane w DNA headless commerce

Możliwość łatwej zmiany różnych funkcji, architektury informacji, HTML lub tagowania mikrodanych jest czymś, czego chce każdy profesjonalista SEO eCommerce.

Strony internetowe eCommerce muszą ewoluować, aby nadążyć za ciągle zmieniającymi się standardami technologicznymi, zadowolić algorytm Google i utrzymać lub osiągnąć przewagę konkurencyjną. 

Czy znasz to uczucie, gdy masz do czynienia z SaaS lub samowystarczalną platformą legacy, która nie pozwoli Ci wdrożyć starannie przygotowanego zestawu taktyk SEO ze względu na swoje ograniczenia techniczne? Jestem pewien, że tak. Rozważmy poniższe scenariusze:

1. Zauważyłeś możliwość znacznego wzrostu widoczności poprzez stworzenie bardziej zaawansowanej struktury strony. Aby to osiągnąć, musisz stworzyć nowe adresy URL oparte na nawigacji fasetowej, ale zamiast tego jesteś zmuszony zaakceptować niezbyt przyjazne dla SEO parametry URL i zapomnieć o imponującym wzroście organicznym. 

   
   

2. Być może zauważyłeś, że Google dostarcza więcej możliwości rich snippet prawie każdego miesiąca. Niektóre z nich oferują fantastyczne możliwości, aby Twoje strony były prezentowane w SERPach w bardziej kuszący sposób. Jeśli jednak Twój monolityczny dostawca CMS nie reaguje szybko i po prostu nie obsługuje nowych typów mikrodanych, to zostaniesz z tym, co masz teraz. Ale zgadnij, kto skorzysta z nowych możliwości? Twoja konkurencja.

   
   

3. Twój legacy system został stworzony w czasach, kiedy wszyscy dopiero zachwycali się możliwościami JavaScript, więc większość twoich treści eCommerce jest generowana za pomocą renderingu po stronie klienta. Jako osoba, która wie, jak działają wyszukiwarki, wiesz, że Google może po prostu zignorować Twoje opisy produktów i obrazy, niezależnie od tego, jak dobrze są zoptymalizowane.

Google wyda więcej zasobów budżetu raczkującego, aby w takim przypadku w pełni renderować Twoją treść. Jeśli Twoja strona liczy miliony adresów URL, to są duże szanse, że niektóre z nowych produktów nie zostaną zaindeksowane przez tygodnie lub nawet miesiące. Nie wspominając o innych wyszukiwarkach, które nie mają nawet możliwości renderowania js.  

To tylko 3 przykłady typowych problemów, na jakie mogą natrafić specjaliści SEO i eCommerce podczas optymalizacji swoich sklepów. Headless commerce ułatwi ich naprawę i wdrożenie innych zaleceń SEO. 

Wdrożenie niestandardowych struktur URL obok skomplikowanej nawigacji opartej na fasetach lub nowych znaczników schema jest możliwe. Podobnie, bezgłowe fronty, takie jak Vue Storefront, rozwijają się w kierunku zaznaczenia wszystkich pól związanych z optymalizacją techniczną, która zapewni Ci przewagę nad konkurencją. Czytaj dalej, aby dowiedzieć się więcej o aspektach technicznych.

Większość najlepszych headlessowych CMS-ów i headlessowych platform handlowych umożliwia pełne dostosowanie, które pozwala na dodawanie nowych struktur o złożonych zależnościach do strony internetowej lub tagowanie treści za pomocą mikrodanych. 

Innym niesamowitym atutem headless commerce jest to, że możesz łatwo odłączyć i zastąpić swoje rozwiązania eCommerce, takie jak CMS, innym rozwiązaniem API-first. 

Ok, ale co z eCommerce Storefront w podejściu headless commerce - jego kod, odkrywalność treści i szybkość? 

Lepsze SEO już po wyjęciu z pudełka

Częścią Twojej strony eCommerce, która jest zarówno bramą dla klientów jak i algorytmem Google jest jej frontend. 

Biorąc pod uwagę platformy monolityczne, warstwa prezentacyjna jest sprzężona z backendem w jednym systemie, co czasami może być niezbyt doskonałą kombinacją. 

Co więc mają do zaoferowania alternatywne headlessowe rozwiązania frontendowe, takie jak Vue Storefront, dla przyspieszenia SEO, które monolity nie zawsze mają?

Server-Side Rendering (SSR)

Jeśli nie jesteś zaznajomiony z SSR i dlaczego ma to znaczenie, pozwól, że cię wprowadzę.

Z najbardziej podstawowej perspektywy - istnieją dwa podstawowe sposoby na to, jak widoczna część strony może być renderowana:

• Client-side rendering oznacza, że frontend, aby był poprawnie wyświetlany w przeglądarce użytkownika, będzie wymagał od samej przeglądarki wykonania pracy i interpretacji oraz renderowania kodu javascript.

• Renderowanie po stronie serwera oznacza, że proces ten jest obsługiwany przez serwer, a gotowy do wyświetlenia kod HTML jest serwowany bezpośrednio do przeglądarki z niewielką lub żadną potrzebą przetwarzania kodu JavaScript.

SSR wnosi ogromną wartość SEO, zwłaszcza dla dużych stron eCommerce. 

Ponieważ opracowanie JavaScript i wyrenderowanie go do prostego HTML zajmuje zasoby obliczeniowe przeglądarek, jest to bardzo podobny przypadek jak w przypadku wyszukiwarek. One również muszą wyrenderować kod js, aby móc indeksować treści.

Warto wspomnieć, że obecnie Google jest jedyną powszechnie stosowaną wyszukiwarką, która udostępnia taką opcję. Ani Bing, ani Yandex, ani Baidu nie będą w stanie nawet "zobaczyć" Twojej treści, jeśli wymaga ona renderowania kodu JavaScript.

Proces renderowania wymaga dużej ilości zasobów, więc Google nie zawsze w pełni renderuje strony oparte na JavaScript. Może to zrobić w drugim indeksie lub całkowicie porzucić taki adres URL i zachować go w indeksie dodatkowym.

Tak więc posiadanie treści eCommerce serwowanych zarówno użytkownikom jak i wyszukiwarkom w czystym HTML (oczywiście ze stylizacją CSS) może być traktowane jako aspekt ograniczający ryzyko. Po prostu lepiej mieć pewność, że Google będzie w stanie crawlować całą zawartość Twoich stron. 

Powiedzmy, że dodajesz nowe produkty ze szczegółowymi opisami i oryginalnymi grafikami. Powinieneś mieć pewność, że zostaną one jak najszybciej przetworzone przez algorytm, prawda? 

To jest coś, co Vue Storefront robi out-of-the-box dzięki najnowocześniejszym możliwościom frameworków JavaScript (Vue.js i Nuxt). Rendering po stronie serwera to aspekt naszego produktu, o który nasz zespół deweloperów zadbał, abyś nie musiał tego robić.

Szybkość

Kolejnym kluczowym aspektem SEO dla eCommerce Storefronts jest to, że musi działać szybko. Nietrudno znaleźć w całej sieci liczne statystyki i raporty dowodzące, że wysoka wydajność sklepów internetowych bezpośrednio koreluje z wyższym współczynnikiem konwersji i lepszymi wynikami SEO.

Jak już zapewne wiesz, walka o szybkie strony internetowe to proces, a Vue Storefront traktuje go bardzo poważnie. Stale iterujemy nasz produkt, aby sklepy naszych klientów były szybsze od konkurencji. 

A co dokładnie oferujemy?

Lazy load - Ideą lazy load obrazów jest opóźnienie wysyłania żądań obrazów do punktu, w którym obraz pojawia się w rzutni. Więc zasadniczo, jeśli masz obraz w stopce, żądanie dla niego zostanie wykonane, gdy użytkownik przewinie w dół do niego.

Kompresja - Ach, obrazy... Jeden z największych wąskich gardeł, jeśli chodzi o optymalizację prędkości. Rozmiar zdjęć może być dealbreakerem, a optymalizacja zwykle wiąże się z pewnym poziomem kompromisu. 

Generalnie, im bardziej kompresujesz, tym gorsza jest jakość, ale na szczęście są sposoby, aby sobie z tym poradzić. Najnowsze algorytmy kompresji są znacznie bardziej efektywne niż kiedyś.

W Vue Storefront używamy kompresji Brotli, która zmniejszy ogólny rozmiar pliku Twojej aplikacji o znaczny margines.

CDN - jeśli Twój eCommerce jest międzynarodowy lub działasz w dużych krajach, takich jak USA, posiadanie Content Delivery Network przyspieszy proces serwowania treści żądanych przez użytkowników w odległych lokalizacjach. Vue Storefront ma opcjonalną integrację Google CDN dla tych, którzy chcą zapewnić doskonałe wrażenia użytkownika we wszystkich punktach kontaktowych.

Semantyczny kod

Google uwielbia czysty i zrozumiały kod ze znacznikami Schema.org, które już omówiliśmy, ale nie wspomnieliśmy o semantycznym tagowaniu, które jest dostępne od wersji 5 HTML. 

Semantyczny HTML jest bardziej opisowy w porównaniu do poprzednich wersji HTML. Dostarcza dodatkowych informacji dla wyszukiwarek. Na przykład istnieją oddzielne znaczniki <footer>, <article>, <nav>, które są dość jasne, co reprezentują. 

Jest to w pewnym sensie pomocne dla Google, aby zrozumieć stronę i dla osób niedowidzących, które używają technologii wspomagających, takich jak czytniki ekranu. 

Załóżmy, że potrzebujesz biblioteki eCommerce UI, która będzie pomocna dla szerszej publiczności i będzie łatwa do zrozumienia przez algorytm. W takim przypadku Vue Storefront ma backend z naszym Storefront UI, który ma to zaimplementowane out-of-the-box.

Re-platforming z headless commerce uratuje twoje SEO

Innym gorącym tematem dla specjalistów SEO jest re-platforming, czyli migracje. Jak więc headless commerce może w tym pomóc?

Jeśli pracowałeś w branży eCommerce wystarczająco długo, są szanse, że przynajmniej raz w swojej karierze spotkałeś się z koniecznością re-platformowania i migracji na różne platformy eCommerce. 

A jeśli to prawda, to wiesz, że jednym z największych lęków, które towarzyszą każdemu odpowiedzialnemu za ten proces, jest utrata organicznej widoczności, która wynikała z lat pracy SEO.

Poniższy wykres widoczności przedstawia jedną z tych niefortunnych migracji:

Dzięki headless commerce można uniknąć takiego scenariusza, ponieważ można zastosować bardziej zwinne, iteracyjne podejście. 

Dzięki headless, możesz łatwo dokonać migracji w etapach. Na przykład możesz po prostu zacząć od wymiany swojego starego frontu opartego na CSR i zastąpić go headlessowym rozwiązaniem, takim jak Vue Storefront, zachowując nienaruszoną logikę biznesową. 

Jeśli pracujesz na Magento lub Shopify, możesz łatwo zastąpić ich sprzężone rozwiązanie frontendowe i po prostu podłączyć Vue Storefront za pośrednictwem interfejsu API bez utraty całej zawartości i logiki biznesowej w backendzie.

Dopiero po upewnieniu się, że ta część procesu pójdzie gładko, możesz przystąpić do zmiany platformy, jeśli widzisz, że jest taka potrzeba.

Piękno headless commerce to jego kompozycyjność i elastyczne podejście, które oferuje do zmian.

Końcowe przemyślenia

Strategie SEO będą takie same niezależnie od tego, czy używasz headless commerce czy monolitycznego, centralnego systemu. Jednak to, co będzie się różnić w przypadku headless commerce, to możliwość realizacji strategii bez zbędnych blokad technicznych.

Możesz to osiągnąć dzięki najlepszym rozwiązaniom, jakie oferuje headless commerce. 

Headless frontend? Nie ma problemu. Vue Storefront pozwoli Ci zbudować witrynę sklepu w sposób, który ma wszystkie wymagania techniczne na miejscu. Szybkie ładowanie, pełne renderowanie i czysty, semantyczny kod - taki fundament techniczny pozwoli Twojemu zespołowi marketingowemu skupić się na aspektach biznesowych, zamiast zmagać się ze starymi systemami i ich ograniczeniami technicznymi.

Headless CMS? Voila! Możesz szybko wdrożyć nowe struktury, nowe tagowanie i lepiej zautomatyzowane powiązania, ponieważ są one wykonane z dostosowaniem jako priorytet. 

Headlessowe platformy eCommerce ? Jasne, możesz zachować oddzielną logikę biznesową. Słabe wbudowane frontendy czy trudne do zakodowania optymalizacje techniczne nie przeszkodzą Ci w optymalizacji tego, co liczy się dla Google.

Mam nadzieję, że te argumenty są dla Ciebie przekonujące, a jeśli masz jakiekolwiek pytania dotyczące naszej platformy frontendowej, przejdź prosto do formularza kontaktowego lub poproś o demo.

autor oryginału: JAKUB PEPLIŃSKI