SEO JavaScript: upewnij się, że Twoja witryna jest indeksowalna

Co to jest SEO JavaScript?

JavaScript SEO to praktyka polegająca na optymalizacji JavaScript w witrynie internetowej w celu maksymalizacji jej zdolności do pozycjonowania w wyszukiwarkach takich jak Google. Ponieważ optymalizujemy elementy na stronie i ponieważ ma to bezpośredni wpływ na techniczne wskaźniki SEO, JavaScript SEO ogólnie należy do kategorii technicznego SEO.

Czy JavaScript jest szkodliwy dla SEO?

Istnieje wiele witryn JavaScript. I chociaż JavaScript oferuje wiele korzyści, może również negatywnie wpłynąć na SEO. JavaScript sam w sobie nie jest szkodliwy dla SEO, ale nieprawidłowo zaimplementowany może utrudnić Googlebotowi indeksowanie stron. Ponadto nadmierne użycie JavaScript może wydłużyć czas ładowania, bezpośrednio szkodząc rankingowi i wygodzie przeglądania przez użytkownika.

Nie wszystkie witryny korzystają z JavaScript w ten sam sposób. Podczas gdy niektóre witryny wykorzystują JavaScript w swoim kodzie tu i ówdzie, inne używają JavaScriptu do obsługi podstawowych struktur i funkcji.

Na przykład frameworki JavaScript, takie jak Angular i React, mogą pomóc programistom w wydajniejszym tworzeniu aplikacji internetowych. Frameworki te wymagają również znacznie bardziej rozbudowanego i złożonego kodu JavaScript niż przeciętna witryna internetowa.

Witryny zbudowane przy użyciu tego modelu powłoki aplikacji, w którym interfejs użytkownika i moduły danych są od siebie oddzielone, wymagają wykonania kodu JavaScript w celu wyświetlenia treści kluczowych zarówno dla odwiedzających, jak i robotów wyszukiwania. Dlatego niektóre witryny są bardziej niż inne narażone na problemy związane z SEO związane z JavaScriptem. W witrynach, których zawartość strony ładuje za pomocą JavaScriptu, mogą wystąpić problemy z SEO, jeśli treść ta ładuje się prawidłowo dla odwiedzających, ale nie dla robotów wyszukiwarek.

Jak Google obsługuje JavaScript?

Zanim zagłębię się w optymalizację, przyjrzyjmy się bliżej, jak Google faktycznie obsługuje JavaScript.

Google przetwarza JavaScript w trzech fazach: indeksowanie, renderowanie i indeksowanie. Googlebot rozpoczyna proces od przeszukania adresów URL w swojej kolejce. Wysyła żądanie do serwera za pomocą mobilnego klienta użytkownika i pobiera kod HTML ze strony. Google ma tylko skończoną ilość zasobów obliczeniowych i może przydzielić tylko określoną ich liczbę do przeszukiwania dowolnej witryny (swój budżet na przeszukiwanie). Google najpierw przetwarza zasoby HTML, aby zaoszczędzić zasoby indeksowania, i odkłada zasoby JavaScript strony do późniejszego indeksowania, umieszczając je w kolejce renderowania.

Renderowanie umożliwia Googlebotowi wykonanie kodu JavaScript i sprawdzenie, co zobaczyłby użytkownik przeglądający witrynę, co umożliwia Googlebotowi jej prawidłowe zaindeksowanie. W przypadku witryn intensywnie korzystających z języka JavaScript — zwłaszcza witryn korzystających z modelu powłoki aplikacji do wyświetlania najważniejszych informacji w języku JavaScript — Googlebot musi najpierw wykonać i wyrenderować kod JavaScript, aby dowiedzieć się więcej o zawartości strony.

Ten proces renderowania powoduje opóźnienie, gdy kod JavaScript zostaje wrzucony do kolejki usług renderowania sieci Web, gdzie oczekuje na przetworzenie. Chociaż proces ten zajmował dużo czasu, Google niedawno stwierdził, że opóźnienie renderowania wynosi w rzeczywistości średnio zaledwie 5 sekund, a 90% witryn jest przetwarzanych w ciągu kilku minut. Niestety, SEO nie mają takiego doświadczenia. Jedno z badań wykazało, że indeksowanie JavaScriptu zajęło Google dziewięć razy dłużej niż HTML. Ponadto błędy, przekroczenia limitu czasu lub ustawienia pliku robots.txt mogą w dalszym ciągu uniemożliwiać Googlebotowi renderowanie i indeksowanie strony.

Konieczność renderowania JavaScriptu powoduje, że Googlebot indeksuje stronę w dwóch falach. Po użyciu bezgłowego Chromium do wyrenderowania kodu JavaScript Googlebot ponownie przeszukuje wyrenderowany kod HTML i dodaje do listy nowo odkryte adresy URL w celu dalszego przeszukiwania. Następnie wykorzystuje wyrenderowany kod HTML do indeksowania witryny.

Renderowanie JavaScriptu

Nie tylko Googlebot musi renderować Twoje strony. Renderowanie pobiera kod z Twojej witryny i generuje go wizualnie, aby odwiedzający mogli go wyświetlić w swoich przeglądarkach. Wiele problemów z indeksowaniem związanych z JavaScriptem wynika ze sposobu renderowania używanego przez witrynę do wyświetlania jej zawartości. Istnieje kilka różnych opcji renderowania stron JavaScript, a niektóre są lepsze dla botów wyszukiwania niż inne.

Renderowanie po stronie serwera

Jak sama nazwa wskazuje, renderowanie po stronie serwera (SSR) ma miejsce, gdy proces renderowania odbywa się bezpośrednio na serwerze. Po wyrenderowaniu ostateczna strona internetowa w formacie HTML jest następnie dostarczana do przeglądarki, gdzie odwiedzający mogą ją przeglądać, a boty mogą ją indeksować.

Renderowanie po stronie serwera jest uważane za dobry wybór dla SEO, ponieważ może skrócić czas ładowania treści i zapobiec zmianom układu. Podejście po stronie serwera pomaga również zapewnić faktyczne renderowanie wszystkich elementów, a technologia po stronie klienta ich nie ignoruje.

Jednak renderowanie po stronie serwera może również wydłużyć czas potrzebny stronie na zaakceptowanie danych wejściowych użytkownika. Właśnie dlatego niektóre witryny w dużym stopniu opierające się na JavaScript wolą używać SSR na stronach internetowych, które naprawdę mają znaczenie dla SEO, ale nie na stronach, gdzie najważniejsza jest solidna funkcjonalność.

Renderowanie po stronie klienta

Renderowanie po stronie klienta (CSR) przenosi obciążenie związane z renderowaniem z serwera na klienta (przeglądarkę). Zamiast otrzymywać w pełni wyrenderowany kod HTML bezpośrednio z serwera, użytkownik otrzymuje zamiast tego trochę kodu HTML typu barebone wraz z plikiem JavaScript do wyrenderowania w swojej przeglądarce.

Ponieważ przeglądarka sama musi obsłużyć obciążenie renderowaniem, renderowanie po stronie klienta jest zazwyczaj wolniejsze niż renderowanie po stronie serwera. Może to powodować oczywiste problemy z SEO, ponieważ szybkość strony jest jednym z wielu technicznych sygnałów SEO, których Google używa do rankingu stron. Co więcej, mniejsza prędkość ładowania może również zwiększyć współczynnik odrzuceń i choć współczynnik odrzuceń sam w sobie może nie być sygnałem, wysoki może wskazywać na słabą jakość przeglądania i sfrustrowanie odwiedzających witrynę. Jeśli chcesz zwiększyć szybkość witryny, odejście od renderowania po stronie klienta może nie być złym pomysłem.

Renderowanie dynamiczne

Renderowanie dynamiczne wykorzystuje renderowanie po stronie klienta i serwera w różnym czasie. Żądania pochodzące z przeglądarek otrzymają wersję strony po stronie klienta, natomiast żądania pochodzące od botów, które mogą mieć problemy z JavaScriptem, otrzymają wersję po stronie serwera. Chroni to funkcjonalność najważniejszych stron, a jednocześnie ułatwia robotom wyszukiwania dostęp do tych, które wymagają indeksowania.

Witryna zawierająca dużo dynamicznej zawartości, która wymaga częstego aktualizowania i ponownego indeksowania, może skorzystać na tym bardziej elastycznym stylu renderowania. Chociaż renderowanie dynamiczne może wydawać się solidnym rozwiązaniem problemów z renderowaniem, w rzeczywistości nie jest to rozwiązanie zalecane przez Google. W rzeczywistości strona główna wyszukiwarki Google dotycząca języka JavaScript wyraźnie ostrzega, że ​​renderowanie dynamiczne jest „obejściem”, a „nie rozwiązaniem długoterminowym” ze względu na dodatkową złożoność i wymagania dotyczące zasobów. To powiedziawszy, w razie potrzeby może to być nadal rozwiązanie krótkoterminowe.

Renderowanie statyczne

Renderowanie statyczne, zwane także renderowaniem wstępnym, polega na generowaniu treści HTML strony podczas procesu kompilacji lub wdrażania, a nie w czasie wykonywania. Wstępnie wyrenderowane pliki HTML są następnie na żądanie dostarczane bezpośrednio do przeglądarki lub klienta.

Podczas renderowania statycznego serwer generuje pliki HTML z całą treścią i danymi potrzebnymi dla strony, w tym elementami dynamicznymi. Oznacza to, że przeglądarka lub klient otrzymuje w pełni wyrenderowaną stronę HTML bez konieczności dodatkowego przetwarzania lub wykonywania JavaScript.

Wstępnie wyrenderowane pliki HTML są łatwo indeksowane przez boty wyszukiwarek, co umożliwia lepsze indeksowanie zawartości witryny. Dodatkowo renderowanie statyczne może znacznie skrócić czas ładowania strony, ponieważ treść jest już obecna w pliku HTML i nie wymaga dodatkowego renderowania po stronie klienta.

Który rodzaj renderowania jest najlepszy dla SEO?

Google zaleca korzystanie z renderowania po stronie serwera, renderowania statycznego lub łączenia renderowania po stronie klienta i serwera poprzez ponowne nawodnienie (coś podobnego do renderowania dynamicznego). Google nie zabrania renderowania po stronie klienta, ale ponieważ może to być bardziej problematyczne, nie jest to preferowane. Wraz ze wzrostem ilości kodu JavaScript w aplikacji lub na stronie może to negatywnie wpłynąć na interakcję strony z następnym malowaniem (INP, który będzie częścią Core Web Vitals w marcu 2024 r.) po renderowaniu po stronie klienta. Jeśli chodzi o JavaScript po stronie klienta, Google zaleca przyjęcie podejścia „podawaj tylko to, czego potrzebujesz i kiedy tego potrzebujesz”.

Wskazówki, jak ograniczyć problemy z SEO JavaScript

Dostosowanie kodu JavaScript do SEO w Twojej witrynie nie musi być bardzo skomplikowane, ale istnieje kilka najlepszych praktyk, których powinieneś przestrzegać, aby uzyskać doskonałe wyniki. Oto kilka wskazówek dotyczących SEO i JavaScript, które pomogą Tobie i Twojemu zespołowi programistów opracować strategię JavaScript, która nie zaszkodzi Twoim rankingom.

1. Upewnij się, że Google indeksuje treść JavaScript

Nie ufaj, że Google automatycznie wyrenderuje i zaindeksuje Twoją treść JavaScript. Poświęć trochę czasu, aby to sprawdzić, przeszukując witrynę pod kątem określonego ciągu tekstowego na swojej stronie, umieszczonego w cudzysłowie (site: twojadomena.com „określony tekst). Jeśli strona się pojawi, możesz mieć pewność, że została zaindeksowana.

Możesz także użyć kilku różnych narzędzi Google (narzędzie do sprawdzania adresów URL, test optymalizacji mobilnej) i narzędzi innych firm (Screaming Frog, JetOctopus), aby zagłębić się i przetestować implementację JavaScript. Sprawdź sekcję „Testowanie i rozwiązywanie problemów” na dole tego przewodnika, aby dowiedzieć się więcej o używaniu tych narzędzi do sprawdzania błędów indeksowania związanych z JavaScriptem.

Na koniec nie zapomnij, że plik robots.txt może uniemożliwić robotom wyszukiwania dostęp do określonych stron. Jeśli Google po prostu nie zaindeksuje strony, upewnij się, że plik robots.txt nie uniemożliwia tego. Google nie zaleca używania pliku robots.txt do blokowania plików JavaScript, ponieważ może to mieć wpływ na zdolność Googlebota do prawidłowego renderowania treści na stronie i jej indeksowania.

2. Postępuj zgodnie z najlepszymi praktykami SEO na stronie

To, że pracujesz z JavaScriptem zamiast HTML, nie oznacza, że ​​proces SEO na stronie ulegnie zmianie. Wszystkie zwykłe optymalizacje techniczne i na stronie (tagi, tytuły, atrybuty itp.) są nadal niezbędne. Google faktycznie zasugerował programistom unikanie używania JavaScript do tworzenia tagów kanonicznych i zarządzania nimi.

3. Używaj skutecznych linków wewnętrznych

Bez linków wewnętrznych roboty wyszukujące nie będą w stanie znaleźć wszystkich stron w architekturze Twojej witryny i będą miały problemy z ich indeksowaniem lub klasyfikowaniem. Do celów SEO JavaScript najlepiej jest mieć linki w formacie HTML, a nie JavaScript, aby można było je przeszukać natychmiast, a nie po renderowaniu.

Jeśli używasz JavaScript do dynamicznego wprowadzania linków do swojego kodu, upewnij się, że nadal je konfigurujesz, używając odpowiedniego znacznika HTML. Zalecam także skorzystanie z narzędzia Google do sprawdzania adresów URL, aby sprawdzić, czy tekst zakotwiczenia znajduje się w finalnie wyrenderowanym kodzie HTML. Ponadto Google zaleca unikanie tworzenia linków za pomocą procedur obsługi zdarzeń JavaScript lub elementów HTML, takich jak <div> lub <span>, ponieważ mogą one powodować problemy dla Googlebota i uniemożliwiać mu zaindeksowanie linku.

4. Trzymaj się z daleka od skrótów w adresach URL

SPA (aplikacje jednostronicowe) mogą używać fragmentarycznych adresów URL do ładowania różnych widoków. Google chce jednak, aby administratorzy stron internetowych unikali używania skrótów w fragmentarycznych adresach URL, co sugeruje, że nie należy na nich polegać w przypadku współpracy z Googlebotem. Zamiast tego zalecają używanie interfejsu API historii do ładowania różnych treści na podstawie adresu URL.

5. Użyj leniwego ładowania obrazów

Leniwe ładowanie to praktyka polegająca na opóźnianiu ładowania mniej ważnych lub niewidocznych zasobów strony. Jest to powszechne w przypadku optymalizacji wydajności i UX. Jeśli jednak nie będziesz uważać na to, co opóźniasz i jak to robisz, mogą wystąpić problemy z indeksowaniem.

Googlebot nie przewija podczas przeglądania treści; po prostu zmienia rozmiar swojego rzutni. Oznacza to, że skryptowe zdarzenia przewijania mogą nie zostać wywołane, a treść może nie zostać wyrenderowana. Google sugeruje kilka różnych sposobów, aby upewnić się, że cała zawartość Twojej strony zostanie załadowana podczas leniwego ładowania.

Prawdopodobnie najlepiej będzie pozostawić obrazy w trybie leniwego ładowania. Leniwe ładowanie treści jest ryzykowne, ponieważ może przekroczyć limit czasu i w rezultacie nie zostać zaindeksowane.

6. Napraw zduplikowaną treść

Google twierdzi, że zduplikowane treści nie stanowią podstawy do podjęcia ręcznych działań, chyba że mają charakter złośliwy lub wprowadzający w błąd. Ale nadal może pochłonąć budżet indeksowania, opóźnić indeksowanie i spowodować, że Twoje strony będą konkurować ze sobą o ranking. JavaScript ma tendencję do tworzenia kilku adresów URL dla tej samej treści, więc zdecyduj, którą wersję chcesz zaindeksować, a do pozostałych zastosuj tagi canonical i noindex.

7. Przeprowadzaj regularne audyty witryny

W miarę zwiększania się objętości i złożoności kodu JavaScript strony ważne jest sprawdzenie, czy jest on prawidłowo renderowany i indeksowany. Regularnie zaplanowane audyty witryny mogą pomóc Ci wykryć wszystko, co mogłeś przeoczyć podczas pierwszej rundy testów wdrożeniowych, więc nie zapomnij umieścić SEO JavaScriptu na swojej regularnej liście kontrolnej SEO.

Testowanie i rozwiązywanie problemów

Istnieje kilka różnych narzędzi, za pomocą których możesz sprawdzić, czy Google ma problemy z indeksowaniem kodu JavaScript w Twojej witrynie lub czy najnowsze poprawki SEO Google JavaScript działają.

Pierwszym przystankiem powinny być narzędzia internetowe Google — w szczególności narzędzie do sprawdzania adresów URL i narzędzie do testowania optymalizacji mobilnej. Narzędzia te nie są doskonałe, ponieważ generują wersję Twojej strony na podstawie dostępnych zasobów w czasie rzeczywistym, a nie tę samą wersję w pamięci podręcznej, której używa moduł renderujący. Ale nadal mogą dać ci całkiem dokładny obraz tego, jak Google obsługuje Twój JavaScript.

Narzędzie do testowania optymalizacji mobilnej umożliwia przechodzenie między kodem na stronie a zrzutem ekranu przedstawiającym to, co widzi Google, dzięki czemu można porównać te dwa kody JavaScript, które mogą nie działać prawidłowo. Dostęp do tej funkcji można uzyskać, klikając „Wyświetl testowaną stronę” po zakończeniu testu. Kliknięcie karty „Więcej informacji” powoduje także wyświetlenie wszelkich potencjalnych komunikatów o błędach pochodzących z konsoli JavaScript oraz więcej informacji o tym, które zasoby strony nie zostały załadowane i dlaczego.

Podobnie narzędzie Google do sprawdzania adresów URL udostępnia zrzut ekranu przedstawiający sposób, w jaki Googlebot widzi Twoje strony, dzięki czemu możesz wizualnie sprawdzić ich elementy. Wyświetla także stan indeksowania Twoich stron, dzięki czemu możesz szybko wykryć, czy jedna ze stron zawierających dużo skryptów nie została zaindeksowana i może wymagać uwagi.

Oprócz tych narzędzi internetowych istnieje kilka narzędzi innych firm, których można używać do testowania i rozwiązywania problemów. Narzędzia indeksujące, takie jak Screaming Frog i JetOctopus, mogą renderować zrzuty ekranu JavaScript Twoich stron. Należy jednak pamiętać, że te renderingi niekoniecznie są takie same, jak te, które wygenerowałby Googlebot, ponieważ generują je inne roboty.

Uzyskaj pomoc od technicznych ekspertów SEO

JavaScript SEO ma wiele ruchomych części. Dzięki dedykowanemu partnerowi nie musisz sam rozwiązywać technicznych problemów związanych z SEO. Victorious może pomóc Tobie i Twojemu zespołowi programistów zapewnić, że Twoja witryna jest odpowiednio zoptymalizowana, a Twoje wysiłki SEO przyczyniają się do osiągnięcia Twoich celów biznesowych. Umów się na bezpłatną konsultację, aby dowiedzieć się więcej.