SEO w JavaScript: Najlepsze praktyki i narzędzia do debugowania

JavaScript to świetna opcja, aby uczynić strony internetowe bardziej interaktywnymi i mniej nudnymi.

Ale jest to również dobry sposób na zabicie SEO strony internetowej, jeśli zostanie wdrożony niepoprawnie.

Oto prosta prawda: Nawet najlepsze rzeczy na świecie potrzebują sposobu, aby zostać znalezione.

Bez względu na to, jak wspaniała jest Twoja strona, jeśli Google nie może jej zaindeksować z powodu problemów z JavaScript, tracisz możliwości ruchu.

W tym wpisie dowiesz się wszystkiego, co musisz wiedzieć o najlepszych praktykach SEO w JavaScript, jak również o narzędziach, których możesz użyć do usuwania problemów z JavaScriptem.

Dlaczego JavaScript jest niebezpieczny dla SEO: Przykłady z prawdziwego świata

"Od czasu przeprojektowania naszej strony w React, nasz ruch drastycznie spadł. Co się stało?"

To tylko jedno z wielu pytań, które słyszałem lub widziałem na forach.

Możesz zastąpić React dowolnym innym frameworkiem JS; to nie ma znaczenia. Każdy z nich może zaszkodzić stronie internetowej, jeśli zostanie wdrożony bez uwzględnienia implikacji SEO.

Oto kilka przykładów tego, co może potencjalnie pójść źle z JavaScriptem.

Przykład 1: Nawigacja strony nie jest indeksowana

 

Co tu jest nie tak:

Linki w nawigacji nie są zgodne ze standardami sieciowymi. W rezultacie, Google nie może ich zobaczyć ani za nimi podążać.

Dlaczego jest to złe:

• Utrudnia to Google odkrywanie stron wewnętrznych.
• Autorytet w obrębie witryny nie jest właściwie rozłożony.
• Nie ma jasnego wskazania zależności pomiędzy stronami w obrębie witryny.

W rezultacie strona z linkami, których Googlebot nie może śledzić, nie będzie w stanie wykorzystać mocy linkowania wewnętrznego.

Przykład 2: Wyszukiwanie obrazów spadło po nieprawidłowym wdrożeniu Lazy Load

 

Co tu jest nie tak:

Podczas gdy leniwe ładowanie jest świetnym sposobem na skrócenie czasu ładowania strony, może być również niebezpieczne, jeśli zostanie wdrożone niepoprawnie.

W tym przykładzie, leniwe ładowanie uniemożliwiło Google zobaczenie obrazów na stronie.

Dlaczego jest to złe:

• Zawartość "ukryta" pod leniwym ładowaniem może nie zostać odkryta przez Google (gdy jest niepoprawnie zaimplementowana).
• Jeśli treść nie zostanie odkryta przez Google, nie zostanie ona umieszczona w rankingu.

W rezultacie, ruch związany z wyszukiwaniem obrazów może bardzo ucierpieć. Jest to szczególnie istotne dla każdego biznesu, który w dużej mierze opiera się na wyszukiwaniu wizualnym.

Przykład 3: Strona została przełączona na React bez uwzględnienia SEO

 

Co tu jest nie tak:

To jest mój ulubiony przykład z witryny, którą audytowałem jakiś czas temu. Właściciel zgłosił się do mnie po tym, jak cały ruch na stronie spadł. To tak, jakby nieumyślnie próbowali zabić swoją stronę:

• Adresy URL nie nadawały się do indeksowania.
• Obrazy nie były indeksowane.
• Znaczniki tytułu były takie same na wszystkich stronach witryny.
• Na stronach wewnętrznych nie było żadnych treści tekstowych.

Dlaczego to jest złe:

• Jeśli Google nie widzi żadnej treści na stronie, nie umieści tej strony w rankingu.
• Jeśli wiele stron wygląda tak samo dla Googlebota, może on wybrać tylko jedną z nich i do niej kanonizować pozostałe.

W tym przykładzie, strony witryny wyglądały dokładnie tak samo dla Google, więc deduplikował je i użył strony głównej jako wersji kanonicznej.

Kilka rzeczy, które musisz wiedzieć o relacjach Google-JavaScript

Jeśli chodzi o to, jak Google traktuje twoją treść, jest kilka głównych rzeczy, które powinieneś wiedzieć.

Google nie wchodzi w interakcję z twoją treścią

Googlebot nie może klikać przycisków na Twoich stronach, rozwijać/zwijać treści, itd.

Googlebot widzi tylko treść dostępną w wyrenderowanym HTML-u bez żadnej dodatkowej interakcji.

Na przykład, jeśli masz rozszerzalną sekcję tekstową, a jej tekst jest dostępny w kodzie źródłowym lub renderowanym HTML, Google ją zaindeksuje.

Przeciwnie, jeśli masz sekcję, w której treść nie jest początkowo dostępna w kodzie źródłowym strony lub DOM i ładuje się dopiero po interakcji użytkownika (np. kliknięciu przycisku), Google nie zobaczy tej treści.

Google nie przewija

Googlebot nie zachowuje się jak zwykły użytkownik na stronie internetowej; nie przewija stron. Jeśli więc Twoja treść jest "ukryta" za niekończącą się ilością przewijanych stron, Google jej nie zobaczy.

Zobacz: Martin Splitt z Google o indeksowaniu stron z nieskończonym scrollem.

Google nie widzi treści, która jest renderowana tylko w przeglądarce vs na serwerze.

Dlatego właśnie renderowanie po stronie klienta jest złym pomysłem, jeśli chcesz, aby Google indeksowało i oceniało Twoją stronę (a chcesz, jeśli potrzebujesz ruchu i sprzedaży).

Ok, więc czy JavaScript jest naprawdę taki zły?

Nie, jeśli JavaScript jest zaimplementowany na stronie internetowej przy użyciu najlepszych praktyk.

I to jest dokładnie to, co zamierzam omówić poniżej.

Najlepsze praktyki SEO w JavaScript

Dodawaj linki zgodnie z normami sieciowymi

Podczas gdy "standardy sieciowe" mogą brzmieć zastraszająco, w rzeczywistości oznacza to tylko, że powinieneś linkować do wewnętrznych stron używając atrybutu HREF:

Twój odpowiedni anchor text

W ten sposób Google może łatwo znaleźć te linki i podążać za nimi (chyba, że dodasz do nich atrybut nofollow, ale to już inna historia).

Nie używaj poniższych technik do dodawania linków wewnętrznych na swojej stronie:

• #page-url

Przy okazji, ostatnia opcja może być nadal z powodzeniem stosowana na stronie, jeśli chcesz przenieść ludzi do konkretnej części tej strony.

Jednak Google nie zaindeksuje wszystkich indywidualnych wariantów Twojego adresu URL z dodanym do niego "#".

Zobacz: Google SEO 101: Do's and Don'ts of Links & JavaScript.

Dodaj obrazki zgodnie ze standardami sieciowymi

Podobnie jak w przypadku linków wewnętrznych, obrazy również powinny być zgodne ze standardami sieciowymi, aby Googlebot mógł je łatwo odnaleźć i zaindeksować.

Aby zostać odkrytym, obraz powinien być połączony z tagiem 'src' HTML.

Wiele bibliotek leniwego ładowania opartych na JavaScript używa atrybutu 'data-src' do przechowywania rzeczywistego adresu URL obrazu i zastępuje znacznik 'src' obrazem zastępczym lub gifem, który ładuje się szybko.

przechowuje dodatkowe informacje o obrazie.

Pomaga to w optymalizacji prędkości strony i działa dobrze, jeśli jest poprawnie zaimplementowane.

Jeśli chcesz, aby Google wybrało Twój prawdziwy obraz zamiast zastępczego, zamień obraz zastępczy na obraz docelowy, aby pokazać ścieżkę do obrazu docelowego.

Podczas ostatniego wydarzenia Google Search Central Live, zrobiłem studium przypadku na żywo, jak debugować problemy z obrazami leniwie ładowanymi za pomocą biblioteki JavaScript.

Alternatywnie, możesz wyeliminować JavaScript poprzez użycie natywnego leniwego ładowania, które jest obecnie obsługiwane przez wiele przeglądarek .

Użyj renderingu po stronie serwera

Jeśli chcesz, aby Google czytało i oceniało Twoją zawartość, powinieneś upewnić się, że jest ona dostępna na serwerze, a nie tylko w przeglądarce użytkownika.

Alternatywnie, możesz użyć dynamicznego renderingu, który zakłada wykrywanie wyszukiwarek i serwowanie im statycznych stron HTML, podczas gdy użytkownicy otrzymują zawartość HTML + JavaScript w swoich przeglądarkach.

Upewnij się, że renderowany HTML zawiera wszystkie główne informacje, które chcesz, aby Google przeczytało

Musisz się upewnić, że wyrenderowany HTML pokazuje właściwe informacje, takie jak:

• Kopia na stronie.
• Obrazy.
• Tag kanoniczny.
• Tytuł i opis meta.
• Meta robots tag.
• Dane strukturalne.
• hreflang.
• Wszelkie inne ważne znaczniki.

 

Narzędzia do debugowania implementacji JavaScript dla SEO

Minęły już czasy, kiedy wystarczyło spojrzeć na kod źródłowy strony, aby sprawdzić, czy zawiera ona właściwą treść.

JavaScript sprawił, że stało się to bardziej skomplikowane, ponieważ może dodawać, usuwać lub zmieniać różne elementy. Spojrzenie na kod źródłowy nie wystarczy; musisz sprawdzić renderowany HTML.

Krok 1: Sprawdź, jak bardzo strona polega na JavaScript, aby dostarczyć treść

Pierwszą rzeczą, którą zwykle robię, gdy widzę stronę, która opiera się na JavaScript, jest sprawdzenie, jak bardzo jest od niego zależna. Najłatwiejszym sposobem na to jest wyłączenie JS w przeglądarce.

Używam do tego rozszerzenia Web Developer Chrome.

Wystarczy otworzyć ustawienia, kliknąć Disable JavaScript i przeładować stronę:

 

Gdy to zrobisz, zobaczysz, jak wyglądałaby strona bez żadnego JS.

W powyższym przykładzie widać, że żadna treść nie jest dostępna bez JavaScript.

Zauważ, że ta metoda daje Ci tylko przegląd tego, jak bardzo JavaScript wpływa na dostarczanie treści. Nie mówi ona, czy Google będzie ją indeksować, czy nie.

Nawet jeśli widzisz pustą stronę jak powyżej, nie oznacza to, że nic nie działa. Oznacza to tylko, że strona w dużym stopniu opiera się na JavaScript.

Dlatego właśnie musisz przetestować wyrenderowany HTML za pomocą narzędzi, które pokażę Ci w następnym kroku.

Krok 2: Sprawdź, czy Googlebot otrzymuje właściwą treść i znaczniki

Narzędzie testowe Google Mobile-friendly

Narzędzie Google Mobile-friendly Test Tool jest jednym z najlepszych i najbardziej wiarygodnych narzędzi, jeśli chodzi o sprawdzanie HTML renderowanego dla urządzeń mobilnych, ponieważ otrzymujesz informacje bezpośrednio od Google.

Co musisz zrobić:

1. Załaduj narzędzie Mobile-friendly.
2. Sprawdź swój adres URL.
3. Spójrz na informacje w zakładce HTML:

 

To właśnie tutaj pojawia się techniczna strona SEO, ponieważ będziesz musiał sprawdzić kod, aby upewnić się, że zawiera on właściwe informacje.

Uwaga: możesz użyć narzędzia Rich Results Test, aby wykonać te kontrole, zbyt:

 

Narzędzie Inspekcja URL w Google Search Console

Narzędzie Inspekcja URL daje Ci również dostęp do surowego HTML Twojej strony, którego Googlebot używa do oceny zawartości strony:

 

Narzędzie testu przyjazności dla urządzeń mobilnych vs Narzędzie inspekcji URL

Ok, więc jaka jest różnica między tymi narzędziami i które jest preferowane?

Krótka odpowiedź brzmi, że nie ma różnicy w wynikach, ponieważ Mobile-Friendly Test i narzędzie do sprawdzania adresów URL używają tej samej technologii.

Istnieją jednak pewne różnice w innych aspektach:

1. Aby skorzystać z narzędzia do sprawdzania adresów URL, musisz mieć dostęp do Google Search Console strony, którą sprawdzasz. Jeśli nie masz takiego dostępu, skorzystaj z testu Mobile-Friendly Test (lub Rich Results Test).
2. Narzędzie do sprawdzania adresów URL może pokazać Ci dwie wersje tej samej strony - wersję ostatnio przeszukaną i wersję na żywo. Jest to przydatne, jeśli coś zostało właśnie zepsute przez JavaScript i możesz porównać nową implementację z poprzednią.

Test Mobile-Friendly i Rich Results Test dają wynik tylko dla bieżącej wersji strony na żywo.

Po więcej podobnych treści zapraszamy na chmiuro.pl.