Firma kwiaciarska z trzema punktami w mieście planuje nowy sklep internetowy. Agencja pokazuje prototyp: płynne przejścia między stronami, animowane koszyki, bukiety obracające się w 3D. Zarząd jest zachwycony. Po wdrożeniu sklep działa świetnie dla klientów, ale w Google po dwóch miesiącach widnieje tylko strona główna z pustym opisem. Reszta asortymentu nie istnieje dla wyszukiwarki, bo cała treść jest generowana skryptem w przeglądarce.
Na czym polega problem ze stronami renderowanymi w przeglądarce
W klasycznej stronie serwer wysyła gotowy kod HTML z treścią. W aplikacji opartej na frameworku JavaScript serwer często wysyła pusty szkielet, a treść pojawia się dopiero po uruchomieniu skryptów w przeglądarce. Google potrafi takie skrypty wykonać, ale robi to w osobnej kolejce, z opóźnieniem i nie zawsze w całości. Jeśli coś pójdzie nie tak – skrypt się nie załaduje, zabraknie czasu, dane pobierane są dopiero po interakcji – robot widzi pustą stronę.
Sposoby renderowania – porównanie z perspektywy indeksacji
| Sposób | Co dostaje robot przy pierwszym pobraniu | Ryzyko dla indeksacji | Złożoność wdrożenia |
|---|---|---|---|
| Renderowanie po stronie klienta (CSR) | Pusty szkielet, treść dopiero po wykonaniu skryptów | Wysokie | Niska |
| Renderowanie po stronie serwera (SSR) | Pełny HTML z treścią | Niskie | Średnia |
| Generowanie statyczne (SSG) | Gotowe pliki HTML | Niskie | Średnia, gorzej przy częstych zmianach |
| Rozwiązanie hybrydowe | HTML dla ważnych stron, skrypty dla reszty | Niskie przy dobrym podziale | Wysoka |
Pytania, które warto zadać wykonawcy
- Czy treść podstron, w tym opisy produktów i nagłówki, będzie w kodzie HTML wysyłanym przez serwer?
- Jakie rozwiązanie renderowania proponujecie i dlaczego?
- Czy każda podstrona będzie miała własny adres, który działa po wklejeniu w przeglądarkę?
- Czy linki między stronami będą zwykłymi odnośnikami, a nie tylko zdarzeniami kliknięcia?
- Jak będą generowane tytuły, opisy i tagi kanoniczne dla każdej podstrony?
- Czy przed startem sprawdzicie stronę w narzędziu sprawdzania adresu w Search Console?
- Kto odpowiada za naprawę, jeśli po starcie strony nie będą indeksowane?
Jeśli wykonawca proponuje wyłącznie renderowanie po stronie klienta – poproś o uzasadnienie i plan awaryjny
Rekomendacja: dla sklepów, serwisów usługowych i blogów wybieraj rozwiązanie, w którym serwer dostarcza gotowy HTML z treścią – renderowanie po stronie serwera albo generowanie statyczne. Warunek – wykonawca musi pokazać, jak wygląda kod strony przed uruchomieniem skryptów, a nie tylko efekt w przeglądarce. Wyjątkiem są aplikacje dostępne po zalogowaniu, jak panel klienta czy system rezerwacji, które i tak nie powinny trafiać do indeksu. Tam renderowanie w przeglądarce nie stanowi problemu.
Sygnały ostrzegawcze w odpowiedziach
- „Google sobie poradzi ze skryptami” – bez żadnych testów,
- brak odpowiedzi na pytanie o adresy podstron,
- linki realizowane przez przyciski bez atrybutu href,
- jeden tytuł strony dla całego serwisu,
- obietnica „dorobimy SEO po starcie”.
Kwiaciarnia po przejściu na renderowanie po stronie serwera odzyskała indeksację bukietów w ciągu kilku tygodni. Przebudowa kosztowała jednak więcej, niż kosztowałoby poprawne rozwiązanie od początku.
Najczęstsze pytania przed wyborem technologii
Czy Google w ogóle nie indeksuje stron w React czy Vue?
Indeksuje, ale z zastrzeżeniami. Robot potrafi wykonać skrypty, lecz robi to z opóźnieniem i nie zawsze w całości. Strony zbudowane w tych frameworkach z renderowaniem po stronie serwera są indeksowane tak samo dobrze jak klasyczne strony. Problemy dotyczą głównie wersji, w których cała treść powstaje dopiero w przeglądarce.
Czy renderowanie po stronie serwera jest dużo droższe?
Zwykle wymaga więcej pracy przy wdrożeniu i nieco mocniejszego serwera, ale nowoczesne frameworki mają gotowe rozwiązania do tego celu. Różnica w koszcie jest zwykle mniejsza niż koszt późniejszej przebudowy strony, która nie pojawia się w Google.
Jak sprawdzić, czy gotowa strona ma problem?
Wystarczy otworzyć źródło strony w przeglądarce, czyli wersję sprzed wykonania skryptów, i poszukać w nim tekstu opisu produktu. Jeśli go nie ma, a na ekranie jest widoczny, treść powstaje w przeglądarce.
Porównanie ofert trzech wykonawców
Kwiaciarnia przy drugim podejściu do sklepu poprosiła trzech wykonawców o odpowiedzi na te same pytania. Różnice były wyraźne:
- wykonawca pierwszy – aplikacja w przeglądarce, SEO „do dorobienia później”, najniższa cena,
- wykonawca drugi – klasyczny sklep na popularnym systemie, pełny HTML, mniej efektów wizualnych, średnia cena,
- wykonawca trzeci – nowoczesny framework z renderowaniem po stronie serwera, animacje zachowane, cena wyższa o około jedną piątą.
Kwiaciarnia wybrała trzecią ofertę. Sklep zachował płynność, której oczekiwał zarząd, a bukiety pojawiły się w Google w ciągu dwóch tygodni od startu.
Co zapisać w umowie
Najbezpieczniej zapisać w umowie kilka konkretnych wymagań: treść każdej podstrony dostępna w kodzie HTML wysyłanym przez serwer, unikalne tytuły i opisy, poprawne tagi kanoniczne, mapa strony generowana automatycznie oraz obowiązek poprawienia błędów indeksacji wykrytych w pierwszych trzech miesiącach po starcie. Takie zapisy nie podnoszą znacznie ceny, a chronią przed sytuacją, w której sklep działa pięknie, ale nikt go nie znajduje.
Najczęstsze skutki złego wyboru technologii
Firmy, które zbudowały serwis wyłącznie z renderowaniem w przeglądarce i nie zadbały o indeksację, najczęściej doświadczają jednego z trzech scenariuszy. Pierwszy to całkowity brak podstron w Google poza stroną główną. Drugi to indeksacja stron z pustymi lub identycznymi opisami, bo robot pobrał szkielet bez treści. Trzeci to indeksacja z dużym opóźnieniem, przez co promocje i nowości trafiają do wyników, gdy są już nieaktualne. Każdy z tych problemów da się naprawić, ale zawsze kosztem dodatkowej pracy programistów i utraconej sprzedaży w okresie przejściowym.
Mechanizm, przez który strony oparte na skryptach tracą widoczność, oraz sposoby jego diagnozy opisano w tekście JavaScript a indeksacja – lektura przydatna przed rozmową z wykonawcą nowego serwisu.