Wyszukiwarki potrafią już wykonywać JavaScript i indeksować wyrenderowaną treść. Mimo to wiele stron nadal ma problemy z JavaScriptem, które szkodzą SEO. Treść zależna od JavaScriptu może nie zostać zaindeksowana. Obrazy ładowane leniwie mogą nie zostać odkryte. Renderowanie po stronie przeglądarki bywa zbyt wolne. Wyszukiwarki mogą nie czekać, aż wszystko się załaduje. Prawidłowa optymalizacja JavaScriptu sprawia, że wyszukiwarki widzą całą Twoją treść, rozumieją ją i mogą ją sprawnie przeglądać.
Jak wyszukiwarki radzą sobie z JavaScriptem
Google przegląda strony tak, jak zrobiłaby to przeglądarka. Wykonuje JavaScript, renderuje treść i indeksuje to, co widzi. To dobra wiadomość. Złożone aplikacje JavaScript mogą zostać zaindeksowane.
Google przetwarza strony w dwóch falach. W pierwszej przegląda HTML, by poznać podstawową strukturę. W drugiej renderuje JavaScript, by zobaczyć treść dynamiczną. Ten dwuetapowy proces zajmuje czas i zasoby.
W przypadku stron ze złożonym JavaScriptem lub ciężkim renderowaniem Google może nie czekać, aż wszystko się załaduje. Może zaindeksować tylko to, co jest widoczne po kilku sekundach renderowania. Treść, która ładuje się wolno lub leniwie, może nie zostać zaindeksowana.
Częste problemy SEO z JavaScriptem
Renderowanie po stronie przeglądarki opóźnia widoczność treści. Pusta strona HTML ładuje JavaScript, który renderuje treść. Google początkowo widzi pustą stronę. Jeśli renderowanie trwa zbyt długo, Google może zaindeksować pustą wersję.
Obrazy i treść ładowane leniwie pojawiają się dopiero po przewinięciu strony. Google nie zawsze przewija. Treść ładowana leniwie poniżej widocznego obszaru może nie zostać odkryta ani zaindeksowana.
Błędy JavaScriptu psują renderowanie. Jeśli JavaScript zawiera błędy, strona może się nie wyrenderować prawidłowo. Wyszukiwarki widzą zepsutą, niepełną treść.
Dynamicznie generowane adresy URL z parametrami (page?id=123&sessionid=abc) tworzą duplikaty treści. Każdy unikalny parametr tworzy nowy adres. Wyszukiwarki mogą widzieć tysiące duplikatów tej samej treści.
Metatagi generowane przez JavaScript mogą nie być widoczne dla wszystkich robotów. Tagi Open Graph, karty Twitter i inne metatagi dodane przez JavaScript mogą nie być prawidłowo odczytane przez roboty mediów społecznościowych.
Renderowanie po stronie serwera a po stronie przeglądarki
Renderowanie po stronie serwera generuje HTML na serwerze i wysyła go do przeglądarki. HTML zawiera już całą treść. Przeglądarki wyświetlają ją od razu. Wyszukiwarki widzą całą treść natychmiast.
Renderowanie po stronie przeglądarki wysyła minimalny HTML i JavaScript, który buduje stronę w przeglądarce. Treść powstaje w przeglądarce po wykonaniu JavaScriptu. To trwa dłużej, a wyszukiwarki mogą nie zobaczyć wszystkiego.
Pod kątem SEO lepsze jest renderowanie po stronie serwera lub generowanie statyczne. HTML trafia do przeglądarki (i wyszukiwarek) w całości. Treść jest widoczna od razu.
Testowanie renderowania JavaScriptu
Użyj narzędzia Inspekcja adresu URL w Google Search Console. Wpisz stronę mocno opartą na JavaScripcie. Google pokaże, co znalazł po renderowaniu. Możesz porównać stronę przeglądaną przez Google (to, co widzi Google) z tym, co widzisz w przeglądarce.
Użyj Lighthouse w Chrome DevTools. Testuje, jak łatwo Twoją stronę przeglądać, i wskazuje problemy związane z JavaScriptem.
Wyświetl źródło strony w przeglądarce, aby zobaczyć surowy HTML. Potem sprawdź element, aby zobaczyć wyrenderowany DOM. Porównaj je. Jeśli bardzo się różnią, masz renderowanie po stronie przeglądarki, które może mylić wyszukiwarki.
Użyj narzędzia do testowania stron na wielu urządzeniach i przeglądarkach. Zasymuluj to, co przegląda Google i co zostaje wyrenderowane.
Dobre praktyki JavaScript SEO
Używaj renderowania po stronie serwera (SSR) lub statycznego generowania stron (SSG) dla kluczowej treści. Dzięki temu treść jest w HTML wysyłanym do wyszukiwarek.
Ładuj ważną treść z wyprzedzeniem lub od razu. Nie polegaj na leniwym ładowaniu w przypadku treści widocznej na starcie. Kluczowe obrazy i tekst ładuj natychmiast.
Unikaj dynamicznie generowanych adresów URL z zbędnymi parametrami. Używaj czystych, prostych adresów. Jeśli musisz używać parametrów, zastosuj tagi canonical, by połączyć duplikaty.
Zadbaj, by metatagi były w HTML lub szybko renderowane przez JavaScript. Roboty mediów społecznościowych i wyszukiwarki powinny widzieć metatagi od razu, a nie po ciężkim renderowaniu.
Testuj w Google Search Console. Sprawdź, co Google widzi po renderowaniu. Napraw wszelkie rozbieżności między tym, co widzisz Ty, a tym, co widzi Google.
Zmniejsz rozmiar paczki JavaScriptu. Duże pliki JavaScript dłużej się pobierają i wykonują. Mniejsze paczki renderują się szybciej, a wyszukiwarki przeglądają je sprawniej.
Frameworki a SEO
Popularne frameworki JavaScript domyślnie używają renderowania po stronie przeglądarki. To tworzy wyzwania SEO, bo treść musi zostać wyrenderowana, zanim wyszukiwarki ją zobaczą.
Istnieją nakładki na te frameworki, które dodają renderowanie po stronie serwera lub generowanie statyczne. Rozwiązują wiele problemów z renderowaniem po stronie przeglądarki.
Jeśli używasz frameworka działającego w przeglądarce bez renderowania po stronie serwera, musisz szczególnie uważać na JavaScript SEO. Dokładnie testuj w Google Search Console.
Najczęstsze pytania
Czy Google może zaindeksować treść opartą na JavaScripcie?
Tak, Google potrafi wykonywać JavaScript i indeksować wyrenderowaną treść. Zajmuje to jednak czas i zasoby. Bardzo ciężki JavaScript może nie zostać w pełni zaindeksowany, jeśli renderowanie trwa zbyt długo. Dbaj o wydajność JavaScriptu i testuj w Google Search Console, by mieć pewność, że treść jest indeksowana. W kreatorze stron WEMASY możesz to ustawić bezpośrednio na swojej stronie.
Czy wybrać renderowanie po stronie serwera, czy przeglądarki?
Renderowanie po stronie serwera jest lepsze dla SEO. Treść jest w HTML wysyłanym do wyszukiwarek. Widzą ją od razu, bez czekania na JavaScript. Renderowanie po stronie przeglądarki powoduje opóźnienia i ryzyko, że treść nie zostanie zaindeksowana. Dla treści, które mają się pozycjonować, użyj renderowania po stronie serwera lub generowania statycznego.
Czy muszę serwować wyszukiwarkom inny HTML?
Nie. Google woli, byś serwował ten sam HTML wszystkim. Nie twórz specjalnych wersji dla Googlebota. Zastosuj prawidłowe renderowanie po stronie serwera lub wykrywanie renderowania. Google przejrzy zwykłą wersję dla użytkowników i powinien zobaczyć całą treść.
Jak naprawić leniwe ładowanie obrazów pod kątem SEO?
Ładuj z wyprzedzeniem kluczowe obrazy widoczne na starcie. Użyj natywnego leniwego ładowania (loading="lazy") z odpowiednimi rozwiązaniami zastępczymi dla starszych przeglądarek. Użyj Intersection Observer API, by ładować obrazy w miarę przewijania. Testuj w Google Search Console, by upewnić się, że Google widzi Twoje obrazy.
Czy JavaScript spowalnia moją stronę?
Tak, wykonywanie JavaScriptu zajmuje czas. Duże paczki JavaScriptu i ciężkie przetwarzanie spowalniają ładowanie strony. To szkodzi komfortowi użytkowników i Core Web Vitals. Zmniejsz rozmiar paczki, dziel kod i odkładaj mniej ważny JavaScript. Ładuj tylko to, co potrzebne.
Czy generować metatagi za pomocą JavaScriptu?
Jeśli to możliwe, unikaj tego. Metatagi powinny być w źródle HTML. Roboty mediów społecznościowych i niektóre wyszukiwarki mogą nie wykonywać JavaScriptu. Jeśli musisz generować metatagi w JavaScripcie, użyj renderowania po stronie serwera lub wstępnego renderowania, by trafiły do HTML.