React.js jest jednym z najpopularniejszych frameworków do tworzenia aplikacji internetowych. Pozwala programiście rozwinąć skrzydła i osiągnąć niczym nieograniczone efekty. Niestety, powoduje on też dużo problemów, które nie mają pozytywnego wpływu na SEO. W tym artykule chciałbym przedstawić niedogodności związane z pozycjonowaniem strony stworzonej w tej technologii oraz to, w jaki sposób możesz ich unikać lub je rozwiązać, aby stworzyć witrynę opartą na React.js, która znajdzie się na wysokiej pozycji w wynikach wyszukiwania. Aby zacząć temat pozycjonowania takich stron, zacznę od tego, w jaki sposób działają boty Googla.
Jak działają boty Google?
Do pozycjonowania stron internetowych Google używa botów, które przechodzą przez witryny. Tworząc stronę, można podjąć decyzję, w jaki sposób powinny się po niej poruszać, należy w tym celu umieścić odpowiednie reguły w pliku robots.txt. Pierwszym krokiem wykonywanym przez boty jest zaindeksowanie podstron widniejących na Twojej witrynie. W trakcie tego procesu robot Google analizuje treść strony i stara się ją zrozumieć oraz zapisuje ją w indeksie Googla, który jest ogromną bazą danych zawierającą informacje o wszystkich stronach internetowych. Następny krok to obsługa rankingu używanego w momencie wyszukiwania frazy przez użytkownika przeglądarki. Wtedy Google przechodzi do swojego indeksu i wyszukuje najtrafniejsze wyniki dla danego zapytania.
Najczęstsze problemy z indeksowaniem stron opartych na React.js
Powolny proces indeksowania
Proces skanowania i indeksowania strony opartej na HTML jest o wiele mniej skomplikowany od skanowania strony opartej na React.js, co pozwala na szybsze jej indeksowanie. Porównajmy te dwa procesy. Oto jak wygląda uproszczony proces dotyczący strony opartej na HTML w kilku krokach:
- Google bot pobiera pliki HTML.
- Wycina linki znajdujące się w kodzie, by móc przetwarzać kilka stron naraz.
- Robot pobiera pliki CSS.
- Wszystkie pliki odsyła do systemu indeksującego Caffeine.
- Ten system ostatecznie indeksuje naszą stronę.
Jak możemy zauważyć, proces ten jest w miarę prosty oraz szybki do wykonania. Zupełnie inaczej jest z kodem JavaScript. Spójrzmy na proces indeksowania strony opartej na tej technologii:
- Tak jak w poprzednim przypadku Google bot w pierwszym kroku pobiera pliki HTML.
- Następnie pobiera pliki CSS oraz JavaScript.
- Kolejnym krokiem jest analiza, kompilowanie oraz wykonanie kodu JavaScript strony przez WRS (Web Rendering Service).
- WRS pobiera dane z zewnętrznego API oraz bazy danych.
- Dopiero po złożeniu całej strony system może znaleźć nowe linki i dodać je do kolejki indeksowania.
Powyższy proces jest o wiele bardziej złożony oraz skomplikowany, co nie sprzyja szybkiemu indeksowaniu strony i ostatecznie wpływa na jej pozycjonowanie.
Błędy w kodzie
W przeciwieństwie do HTML przetwarzanie błędów w JavaScript jest o wiele bardziej rygorystyczne i nawet najmniejsza literówka lub błąd składniowy mogą skutecznie uniemożliwić zaindeksowanie strony przez boty. Dzieje się tak dlatego, że parser JavaScript całkowicie odrzuca kod zawierający jakikolwiek błąd. Wystarczy, aby napotkał znak w nieoczekiwanym miejscu – wymusza wtedy zatrzymanie analizy bieżącego skryptu oraz wyświetla SyntaxError. Jeśli do takiego błędu dojdzie w momencie, gdy robot Googla jest na stronie, zobaczy on pustkę i zaindeksuje ją jako stronę bez treści, czego lepiej unikać.
Wyczerpanie budżetu na indeksowanie
Czym jest budżet na indeksowanie? To maksymalna liczba stron, które roboty wyszukiwarek mogą zaindeksować w określonym czasie. Problem z JavaScript polega na zbyt długim oczekiwaniu przez Google na załadowanie, przeanalizowanie i wykonanie skryptów. Ale co oznacza to dla nas? Ni mniej, ni więcej tyle, że jeśli skrypty na stronie będą za wolne, bot wyczerpie budżet przed zaindeksowaniem witryny i ją opuści, co ostatecznie wpłynie negatywnie na pozycję strony w wynikach wyszukiwania.
Co zrobić, żeby strona JavaScript była lepiej pozycjonowana?
Jednym ze sposobów jest zastosowanie renderowania wstępnego. Jest to wyjście dobre pod wieloma względami w momencie, gdy roboty Googla nie mogą poprawnie renderować stron. Do renderowania wstępnego używamy tak zwanych pre-renderów, które generują statyczną wersję naszej strony w HTML i to ją podsyłają botom, gdy te wchodzą na naszą witrynę. Rozwiązanie to ma zarówno swoje zalety, jak i wady. Do tych pierwszych możemy zaliczyć fakt, że programy do renderowania wstępnego wykonują wszystkie nowoczesne skrypty JavaScript i przekształcają je na kod HTML, implementacja wymaga minimalnej modyfikacji kodu, a możliwe nawet, że wcale nie będzie to konieczne. Są też wady, z którymi trzeba się liczyć, wybierając tę opcję. Nie jest to na pewno rozwiązanie dedykowane stronom, które często zmieniają swoją treść, w takim przypadku Google może uznać, że próbujemy zamaskować przed jego botami zawartość strony i skutecznie uprzykrzy nam proces pozycjonowania takiej witryny. Kolejnymi minusami są:
– czas trwania renderowania wstępnego, który jest zależny od rozmiarów witryny i może trwać bardzo długo,
– fakt, że usługi wstępnego renderowania nie są darmowe,
– konieczność wykonania wstępnego renderowania za każdym razem, gdy dochodzi do zmian na stronie.
Drugim sposobem na pozbycie się problemów związanych z pozycjonowanie strony opartej na JavaScript/ React.js jest wykorzystanie do renderowania witryny serwera zamiast klienta. Czym różni się renderowanie po stronie serwera od renderowania po stronie klienta? Renderowanie po stronie klienta oznacza, że zarówno przeglądarka, jak i robot Googla otrzymują przy wejściu na stronę pliki –puste lub z niewielką zawartością, następnie JavaScript pobiera i wyświetla resztę zawartości użytkownikowi na ekranie. Już tak prosta i podstawowa interpretacja tego zagadnienia prowadzi nas do wniosków, że renderowanie po stronie klienta nie sprzyja SEO, ponieważ boty przy tak znikomej ilości danych, jaką otrzymają, albo zaindeksują jej małą część, albo nie zrobią tego wcale, co zdecydowanie utrudni proces pozycjonowania strony internetowej. I tu pojawia się rycerz na białym koniu w postaci renderowania po stronie serwera. Co otrzymujemy, stosując to rozwiązanie? Dzięki zastosowaniu tego renderowania roboty Googla otrzymują pliki HTML z całą zawartością, co pozwala im na ich poprawne zaindeksowanie i uzyskanie przez witrynę wyższych pozycji w przeglądarce.
Podsumowując, pozycjonowanie witryn opartych na React.js wcale nie wiąże się z wielkimi niedogodnościami. Wystarczy tylko zapobiec im już podczas procesu tworzenia strony, co pozwoli zaoszczędzić mnóstwo czasu. Wszystkie problemy związane z tą technologią są do rozwiązania i warto często stawić im czoła w celu uzyskania pięknej, dobrze działającej witryny z wieloma fantastycznymi dodatkami, na które pozwala nam React.js.