Wszystko, co musisz wiedzieć o SEO JavaScript

Zapytaj dowolnego programistę, a powie Ci, co myśli o JavaScript.

Od czasu jego wydania JavaScript (JS) jest najpopularniejszym językiem programowania używanym przez twórców stron internetowych na całym świecie. Niedawna ankieta przeprowadzona przez Stack Overflow wśród twórców stron internetowych ujawnia, że ​​JavaScript jest najbardziej preferowanym językiem programowania od ośmiu lat z rzędu.

JS pozwala programistom internetowym na łatwe tworzenie aplikacji internetowych na dużą skalę. Posiada wyjątkową zdolność do dynamicznej aktualizacji stron i uczynienia ich bardziej interaktywnymi. Co więcej, frameworki JavaScript, takie jak AngularJS, ReactJS, Vue i NodeJS znacznie zmniejszają ilość czasu i wysiłku potrzebnego do tworzenia witryn opartych na JS. Nic dziwnego, że JavaScript stanowi podstawę 96 procent witryn internetowych na całym świecie.

Jednak witryny oparte na JS wydają się mieć związek z Google związany z miłością i nienawiścią. JavaScript może łatwo kontrolować i zmieniać kod HTML, aby strony internetowe były dynamiczne i interaktywne, poprawiając w ten sposób UX witryny. Wyszukiwarkom trudno jednak poradzić sobie z JS, przez co większość treści JavaScript pozostaje niezindeksowana.

Przyjrzyjmy się bliżej, dlaczego JavaScript utrudnia pracę Google i co możesz zrobić, aby zawartość JS była przyjazna dla botów.

Jak Javascript wpływa na SEO?

JavaScript umożliwia szybkie ładowanie stron, oferuje bogaty interfejs i jest łatwy do wdrożenia; jednak płynność przeglądarki zmienia się w zależności od interakcji użytkownika, co utrudnia wyszukiwarkom zrozumienie strony i powiązanie wartości z treścią.

Wyszukiwarki mają swoje ograniczenia podczas renderowania stron internetowych zawierających treść JavaScript. Google przeprowadza wstępne indeksowanie strony i indeksuje znalezione treści. Gdy zasoby są dostępne, boty wracają do renderowania JS na tych stronach. Oznacza to, że treść i linki oparte na JavaScript są narażone na ryzyko niezauważenia przez wyszukiwarki, co może zaszkodzić SEO witryny.

Źródło

Jednak Google wie, że JavaScript jest tutaj, aby pozostać! W rezultacie gigant wyszukiwarek poświęcił większość swoich zasobów, aby pomóc specjalistom ds. wyszukiwania w optymalizacji ich witryn opartych na JS.

Obejrzyj tę serię filmów na temat SEO JavaScript od Google, która może pomóc w łatwiejszym znajdowaniu treści JS w Internecie.

Eksperci SEO muszą ułożyć swoje strony internetowe oparte na JS w formacie, który docenia Google. Przy odrobinie zrozumienia, w jaki sposób wyszukiwarki przetwarzają treści JS, JavaScript i SEO mogą współpracować, aby poprawić ranking Twojej witryny.

Jak wyszukiwarki przetwarzają JavaScript?

Boty Google przetwarzają JS inaczej niż strony bez JS. Boty przetwarzają je w trzech fazach, a mianowicie indeksowaniu, indeksowaniu i renderowaniu. Te fazy można łatwo zrozumieć dzięki poniższej grafice od Google Developers:

Źródło

Pełzanie

Ta faza dotyczy odnajdywania Twoich treści. Jest to skomplikowany proces, obejmujący podprocesy, a mianowicie zestawy nasion, kolejkowanie i planowanie indeksowania, ważność adresów URL i inne.

Po pierwsze, boty Google ustawiają w kolejce strony do indeksowania i renderowania. Boty używają modułu parsowania do pobierania stron, podążania za linkami na stronach i renderowania do momentu zindeksowania stron. Moduł nie tylko renderuje strony, ale także analizuje kod źródłowy i wyodrębnia adresy URL we fragmentach <a href=”…”>.

Boty sprawdzają plik robots.txt, aby sprawdzić, czy indeksowanie jest dozwolone. Jeśli adres URL jest oznaczony jako niedozwolony, boty go pomijają. Dlatego bardzo ważne jest sprawdzenie pliku robots.txt, aby uniknąć błędów.

Wykonanie

Proces wyświetlania treści, szablonów i innych funkcji witryny użytkownikowi nazywa się renderowaniem. Istnieje renderowanie po stronie serwera i renderowanie po stronie klienta.

Renderowanie po stronie serwera (SSR)

Jak sama nazwa wskazuje, w tego typu renderowaniu strony są zapełniane na serwerze. Przy każdym wejściu na stronę strona jest renderowana na serwerze i wysyłana do przeglądarki.

Innymi słowy, gdy użytkownik lub bot uzyskuje dostęp do witryny, otrzymuje treść jako znacznik HTML. Zwykle pomaga to SEO, ponieważ Google nie musi osobno renderować JS, aby uzyskać dostęp do treści. SSR to tradycyjna metoda renderowania i może okazać się kosztowna, jeśli chodzi o przepustowość.

Renderowanie po stronie klienta

Renderowanie po stronie klienta to dość nowy rodzaj renderowania, który pozwala programistom budować witryny w całości renderowane w przeglądarce za pomocą JavaScript. Tak więc zamiast oddzielnej strony HTML na trasę, renderowanie po stronie klienta umożliwia dynamiczne tworzenie każdej trasy bezpośrednio w przeglądarce. Chociaż ten typ renderowania jest początkowo powolny, ponieważ wykonuje wiele rund do serwera, po zakończeniu żądań korzystanie z frameworka JS jest szybkie.

Wracając do tego, co dzieje się po zindeksowaniu strony, boty identyfikują strony, które wymagają renderowania, i dodają je do kolejki renderowania, chyba że metatag robots w nieprzetworzonym kodzie HTML nakazuje Googlebotowi nie indeksować strony.

Strony pozostają w kolejce renderowania przez kilka sekund, ale może to zająć trochę czasu, w zależności od ilości dostępnych zasobów.

Źródło

Gdy zasoby na to pozwolą, usługa Google Web Rendering Service (WRS) renderuje, analizuje i kompiluje strony oraz wykonuje na nich kod JavaScript. Bot ponownie analizuje wyrenderowany kod HTML pod kątem linków i umieszcza w kolejce znalezione adresy URL do indeksowania. Wyrenderowany kod HTML służy do indeksowania strony.

Indeksowanie

Gdy WRS pobierze dane z zewnętrznych interfejsów API i baz danych, indeksator kofeiny w Google może zindeksować zawartość. Ta faza obejmuje analizę adresu URL, zrozumienie treści na stronach i ich trafności oraz przechowywanie znalezionych stron w indeksie.

Jak zoptymalizować JavaScript pod kątem SEO

Nieprawidłowo zaimplementowany JavaScript może zrujnować SEO. Postępuj zgodnie z tymi najlepszymi praktykami JavaScript SEO, aby poprawić ranking swojej witryny.

Bądź wytrwały w swoich działaniach SEO na stronie

Wszystkie zasady SEO na stronie, które dotyczą optymalizacji strony, aby pomóc jej w rankingu w wyszukiwarkach, nadal obowiązują. Zoptymalizuj tagi tytułu, opisy meta, atrybuty alt w obrazach i meta tagi robotów. Unikalne i opisowe tytuły oraz metaopisy ułatwiają użytkownikom i wyszukiwarkom łatwą identyfikację treści. Zwróć uwagę na cel wyszukiwania i strategiczne rozmieszczenie słów kluczowych powiązanych semantycznie.

Ponadto dobrze jest mieć przyjazną dla SEO strukturę adresów URL. W kilku przypadkach witryny internetowe wprowadzają zmianę typu pushState w adresie URL, dezorientując Google, gdy próbuje znaleźć adres kanoniczny. Upewnij się, że sprawdzasz adresy URL pod kątem takich problemów.

Upewnij się, że Twój JavaScript pojawia się w drzewie DOM

Renderowanie JavaScript działa, gdy DOM strony jest wystarczająco załadowany. DOM lub Document Object Model pokazuje strukturę zawartości strony i relacje każdego elementu z drugim. Możesz go znaleźć w przeglądarce „Inspect element” w kodzie strony. DOM jest podstawą dynamicznie generowanej strony.

Jeśli Twoja treść jest widoczna w DOM, prawdopodobnie jest ona analizowana przez Google. Sprawdzenie DOM pomoże Ci określić, czy Twoje strony są odwiedzane przez boty wyszukiwarek.

Boty pomijają renderowanie i wykonywanie kodu JS, jeśli metatag robots początkowo zawiera noindex. Googlebot nie uruchamia zdarzeń na stronie. Jeśli treść jest dodawana do strony za pomocą JS, należy to zrobić po załadowaniu strony. Jeśli treść zostanie dodana do kodu HTML podczas klikania przycisku, przewijania strony itd., nie zostanie zindeksowana.

Na koniec, korzystając z danych strukturalnych, użyj JavaScript, aby wygenerować wymagany JSON-LD i wstrzyknąć go na stronę. Na marginesie, poznaj najważniejsze sztuczki SEO na stronie, które powinieneś wdrożyć od samego początku.

Unikaj blokowania wyszukiwarkom dostępu do treści JS

Aby uniknąć problemu, że Google nie może znaleźć treści JS, kilku webmasterów stosuje proces zwany maskowaniem, który udostępnia treści JS użytkownikom, ale ukrywa je przed robotami. Ta metoda jest jednak uważana za naruszenie wskazówek Google dla webmasterów i może zostać za to ukarana kara. Zamiast tego pracuj nad zidentyfikowaniem kluczowych problemów i udostępnieniem treści JS dla wyszukiwarek.

Czasami host witryny może zostać przypadkowo zablokowany, uniemożliwiając Google przeglądanie treści JS. Na przykład, jeśli Twoja witryna ma kilka domen podrzędnych, które służą różnym celom, każda z nich powinna mieć osobny plik robots.txt, ponieważ subdomeny są traktowane jako oddzielna witryna. W takim przypadku upewnij się, że żadna z tych dyrektyw w pliku robots.txt nie blokuje wyszukiwarkom dostępu do zasobów potrzebnych do renderowania.

Użyj odpowiednich kodów stanu HTTP

Roboty Google używają kodów stanu HTTP do identyfikowania problemów podczas indeksowania strony. Dlatego należy używać znaczącego kodu stanu, aby informować boty, czy strona nie powinna być przeszukiwana lub indeksowana. Na przykład możesz użyć stanu HTTP 301, aby poinformować boty, że strona została przeniesiona pod nowy adres URL, umożliwiając Google odpowiednią aktualizację jej indeksu.

Zapoznaj się z poniższą listą kodów stanu HTTP i dowiedz się, kiedy ich używać:

Źródło

Napraw zduplikowaną treść

W przypadku korzystania z języka JavaScript w witrynach internetowych mogą istnieć różne adresy URL dla tej samej treści. Powoduje to problemy ze zduplikowaną treścią, często powodowane przez duże litery, identyfikatory lub parametry z identyfikatorami. Upewnij się, że znajdziesz takie strony, wybierz oryginalny/preferowany adres URL, który chcesz zindeksować, i ustaw znaczniki kanoniczne, aby uniknąć pomyłki w wyszukiwarkach.

Napraw leniwie ładowane treści i obrazy

Szybkość witryny ma kluczowe znaczenie dla SEO. Lazy loading to jedna z najlepszych praktyk UX, która opóźnia ładowanie niekrytycznych lub niewidocznych treści, skracając w ten sposób początkowy czas ładowania strony. Ale oprócz tego, że strony ładują się szybciej, musisz również upewnić się, że Twoje treści są dostępne dla robotów wyszukiwarek. Te roboty indeksujące nie będą wykonywać kodu JavaScript ani przewijać strony, aby prowadzić leniwie ładowane treści, co negatywnie wpływa na SEO.

Co więcej, wyszukiwania grafiki są również źródłem dodatkowego ruchu organicznego. Więc jeśli masz leniwie ładowane obrazy, wyszukiwarki ich nie wybiorą. Chociaż leniwe ładowanie jest świetne dla użytkowników, należy to robić ostrożnie, aby boty nie przegapiły potencjalnie krytycznej zawartości.

Korzystaj z narzędzi JS SEO

Dostępnych jest wiele narzędzi, które pomogą Ci zidentyfikować i naprawić problemy z kodem JavaScript. Oto kilka, które możesz wykorzystać na swoją korzyść.

• Funkcja sprawdzania adresów URL. To narzędzie znajduje się w Google Search Console. Pokazuje, czy roboty indeksujące Google były w stanie zaindeksować lub zaindeksować Twoje strony.
• Roboty wyszukiwarek. Narzędzia te pozwalają skutecznie testować i monitorować sposób, w jaki wyszukiwarki indeksują Twoje strony.
• Statystyki szybkości strony. Google Page Speed ​​Insights udostępnia szczegółowe informacje o wydajności Twojej witryny i oferuje zalecenia dotyczące jej ulepszenia.
• Miejsce: Dowództwo. To narzędzie pomaga sprawdzić, czy Google prawidłowo zindeksował Twoje treści. Wszystko, co musisz zrobić, to wpisać to polecenie w Google - witryna: [adres URL witryny] „fragment tekstu lub zapytanie”

Wyzwania SEO w JavaScript

Do tej pory masz dobre pojęcie o tym, jak wyszukiwarki przetwarzają treść JavaScript i co możesz zrobić, aby Twoja witryna była na najlepszej drodze do sukcesu SEO. Istnieje jednak kilka innych wyzwań, przed którymi stoją eksperci SEO i webmasterzy. Większość z nich wynika z błędów popełnionych przez nich podczas optymalizacji witryn opartych na JavaScript

1. Niezminimalizowane pliki JavaScript i CSS

Jeśli używasz narzędzi SEO do audytu swojej witryny JS, prawdopodobnie natkniesz się na ostrzeżenie dotyczące problemów z niezminimalizowanym kodem JavaScript i CSS. Z biegiem czasu pliki JS i CSS są obciążone niepotrzebnymi liniami kodu, białymi znakami, komentarzami w kodzie źródłowym i hostingiem na zewnętrznych serwerach, co spowalnia Twoją witrynę. Upewnij się, że pozbyłeś się niepotrzebnych wierszy, białych spacji i komentarzy, aby skrócić czas ładowania stron, poprawić wskaźnik zaangażowania i poprawić SEO.

2. Użycie skrótu w adresach URL

Pamiętasz, co John Mueller powiedział o złych adresach URL na imprezie SEO?

„Dla nas, jeśli widzimy tam rodzaj hash, oznacza to, że reszta jest prawdopodobnie nieistotna. W większości przypadków porzucimy to, gdy spróbujemy zindeksować treść…”

Jednak kilka witryn opartych na JS generuje adresy URL z hashem. Może to być katastrofalne dla SEO. Upewnij się, że Twój adres URL jest przyjazny dla Google. Zdecydowanie nie powinno to wyglądać tak:

www.example.com/#/o -nas LUB

www.example.com/about#us

3. Nie sprawdzanie wewnętrznej struktury linków

Google wymaga odpowiednich linków <a href>, aby znaleźć adresy URL w Twojej witrynie. Ponadto, jeśli linki zostaną dodane do DOM po kliknięciu przycisku, boty ich nie zobaczą. Większość webmasterów traci te punkty, co powoduje straty dla ich SEO.

Zadbaj o podanie tradycyjnego linku „href”, aby były dostępne dla botów. Sprawdź swoje linki za pomocą narzędzia audytu witryny, SEOprofiler, aby poprawić wewnętrzną strukturę linków witryny.

Zapoznaj się z prezentacją Toma Greenwaya podczas konferencji Google I/O, aby uzyskać wskazówki dotyczące właściwej struktury linków:

Wniosek

Bez wątpienia JavaScript rozszerza funkcjonalność stron internetowych. Jednak JavaScript i wyszukiwarki nie zawsze idą w parze. JavaScript wpływa na sposób, w jaki wyszukiwarki przemierzają i indeksują witrynę, wpływając w ten sposób na jej ranking. Dlatego specjaliści ds. wyszukiwania muszą zrozumieć, w jaki sposób boty wyszukiwarek przetwarzają treści JS i podjąć niezbędne kroki, aby upewnić się, że JavaScript dobrze pasuje do ich strategii SEO.

Jeśli masz witrynę opartą na języku JS i nie możesz znaleźć swoich treści w Google, czas rozwiązać problemy. Skorzystaj z informacji i wskazówek udostępnionych w tym poście, aby zoptymalizować JavaScript pod kątem SEO i zwiększyć swoje zyski.