Optymalizacja stron

Jak zdiagnozować i rozwiązać problem ze spadkiem widoczności strony w Google po przejściu na JavaScript

Brak komentarzy

WSTĘP

Google już w 2014 roku utrzymywało, że radzi sobie z renderowaniem stron opartych o JS – ale jednocześnie zastrzegając, że indeksacja zależy od różnych czynników

Dzisiaj coraz więcej stron jest opartych o JS – niestety w wielu przypadkach ich wdrożenie oznacza dla właścicieli serwisów spadki ruchu, a co za tym idzie i Klientów. Dlaczego JS potrafi sprawiać problemy? Co zrobić, aby ich uniknąć i cieszyć się świetną stroną opartą na JS?

Renderowanie po stronie serwera jest lepsze od renderowania po stronie przeglądarki

Mając do wyboru dwa sposoby renderowania treści

  • po stronie serwera
  • po stronie przeglądarki

lepszym rozwiązaniem dla Twojego serwisu będzie pierwsza opcja, w której prezentujemy Googlebotowi zawartość strony wyrenderowanej po stronie serwera.

Jest kilka powodów, dla których warto unikać renderowania po stronie przeglądarki – główny powód to taki, że jeżeli strona zawiera statyczną treść plus treść generowaną przez JS, to Google w pierwszej kolejności zaindeksuje TYLKO widoczny w kodzie content, a dopiero potem „wróci po JS”, aby wyrenderować brakującą część. Automatycznie przy stronie opartej tylko o JS będzie ona musiała najpierw zostać zrenderowana, a dopiero potem zaindeksowana – co sprawi, że cały proces zajmie więcej czasu niż w przypadku strony, której zawartość Googlebot zobaczy od razu przy pierwszej wizycie.

Inne powody wyższość renderowania zawartości strony po stronie serwera są wymienione poniżej

Podatność na błędy

Niekiedy wystarczy jeden, mały błąd, aby Google nie wyrenderował strony – co automatycznie sprawi, ze nie będzie ona dostępna w wyszukiwarce (poza główną stroną, ale co to znaczy w przypadku sklepu czy serwisu internetowego, składającego się niekiedy z tysięcy stron ?)

“The JavaScript parser is not that polite. It has a draconian, unforgiving error handling. If it encounters a character that is not expected in a certain place, it immediately aborts parsing the current script and throws a SyntaxError.

(więcej informacji na ten temat znajdziesz tutaj)

Google wie lepiej

Google może nie pobrać do renderowania pewnych plików JS, bo uzna, ze tego nie potrzebuje ! – albo dlatego, że ich pobieranie trwa zbyt długo :)

Niedostosowanie się Googlebota do obecnych standardów technologicznych

Googlebot używa  Chrome’a 41 do renderowania stron – czyli silnika przeglądarki z 2015 roku ! (sprawdziłem moją obecną wersję – 73). A to znaczy, że pewne nowoczesne rozwiązania pozostaną niewidoczne dla robota. Można to wprawdzie obejść, ale nie w sposób kreatywny – zainteresowanych niusansami technicznymi odsyłam do tego wpisu.

Jeżeli chcesz zatem w pełni móc testować zachowanie Googlebota przy renderowaniu treści należy ALBO zainstalować Chrome41 ALBO używać narzędzia do tesowania optymalizacji mobilnej od Google

Sprawdziłem jeden problematyczny serwis drugim sposobem i …. to działa :)

Google nie jest nieomylne

Jak pokazuje historia, Google potrafi się mylić

the Google Angular team had made a mistake. On April 26, 2017, that mistake was corrected.

Zachęcam do lektury wpisu Bartosza Górlawicza, w którym opisał ten case.

Pytanie, na ile się myli, a na ile podejmuje inne decyzje, nie informując webmasterów – jak to było z rel prev, rel next – o czym przeczytasz w moim wpisie.

Czas ładowania w przypadku JS jest istotny

Jak napisał Tomek czas parsowania 1 MB kodu zajmuje na Galaxy S5 prawie sekundę, a na Nexus 5 prawie dwie! – a jak wiemy w przypadku komórek każda zbędna sekunda ładowania strony to większa ilość odrzuceń!

Ale o ile w przypadku tradycyjnej strony użytkownik w końcu zobaczy  jej zawartość, to jeżeli czas ładowania skryptu wydłuży się do ponad 5 sekundGoogle nie będzie tyle czekać – zobacz, co powiedział John Mueller w tej kwestii

There’s no specific timeout value that we define, mostly because the time needed for fetching the resources is not deterministic or comparable to a browser (due to caching, server load, etc). 5 seconds is a good thing to aim for, I suspect many sites will find it challenging to get there though 🙂

5 sekund zaś osiągniemy, jak cały JS „wrzucimy do jednego worka” (czytaj pliku) – a tak niekiedy się zdarza programistom zakodować kod

Nierenderowanie strony z powodu ograniczenia zasobów

Google potwierdziło oficjalnie, że renderowanie stron opartych o JS jest odłożone do czasu posiadania przez system wystarczających do tego zasobów !

“The rendering of JavaScript powered websites in Google Search is deferred until Googlebot has resources available to process that content.”

Dlatego w sytuacji, jak zawartość Twojej strony podlega ciągłym zmianom, może to powodować spore problemy

Zapraszam do analizy :)

Jak sprawdzić poprawność wdrożenia JS w witrynie

Aby sprawdzić poprawność przejścia na JS należy sprawdzić kilka istotnych kwestii – zachęcam pasjonatów JS do lektury w oryginale artykułu, jaki ukazał się niedawno na MOZie – poniżej moje tłumaczenie najważniejszych poruszonych tam kwestii, z moimi komentarzami.

Sprawdź, czy Google renderuje treść serwisu

Podstawowa uwaga na początku – jeżeli zależy Ci na tym, aby serwis oparty o JS był dobrze widoczny w Google, renderowanie zawartości strony ma się odbywać po stronie serwera. Przy odpowiedniej budowie strony renderowanie po stronie przeglądarki zadziała, ale zwiększamy margines błędu PLUS uzależniamy się od kaprysów Google – a biorąc pod uwagę to, że przez kilka ostatnich lat Google nie stosowało się do forsowanych kiedyś zaleceń – znaczniki rel prev, rel next – trudno moim zdaniem zdawać się „ślepo” na kaprysy Googlebota.

Przechodzimy do Search Console i wklejamy adres url, który chcemy sprawdzić

Jeżeli zobaczymy

i komunikat nie zniknie po kilku godzinach, powinniśmy zacząć się niepokoić

Jeżeli analizowany url jest zaindeksowany można przejść do kolejnego etapu i zobaczyć, jak Google widzi stronę

Niekiedy widzimy, że Googlebot zobaczy tylko część contentu, nie wszystko, co może to wynikać albo z blokowania JS w robots.txt LUB też zbyt długiego czasu, jakie potrzebował Googlebot na wyrenderowanie treści

Dlatego zawsze należy dokładnie przeanalizować to, co widzimy, aby upewnić się, że:

  • główna treść jest widoczna
  • widoczne są komentarze
  • Google widzi elementy powiązane z treścią, np. zawartość sekcji „Podobne produkty” itp

Test optymalizacji mobilnej

Idealnym sposobem na sprawdzenie poprawności renderowania strony przez Googlebota jest uruchomienie testu mobilnego od Google – wbrew nazwie nie służy on tylko do badania poprawności samego dostosowania strony pod ruch mobilny :)

Dzięki temu nie tylko zobaczymy wyrenderowaną stronę, czyli to, jak jest ona widoczna – ale także kod; jeżeli zatem zobaczymy, że czegoś brakuje na stronie LUB zobaczymy coś, czego się nie spodziewaliśmy

to znak, że coś jest nie tak

Narzędzie do testowania uporządkowanych danych

Na koniec warto sprawdzić, jak wyrenderowany kod przechodzi test pod kątem danych strukturalnych – używając innego narzędzia od Google.

Jeżeli zobaczymy komunikat o błędach

to znak, że trzeba się pochylić nad stroną

Na koniec

Do testowania możesz używać też przeglądarki w trybie incognito – jeżeli zobaczysz oczekiwaną treść w przypadku renderowania po stronie przeglądarki, to znaczy, że wszystko jest OK

Pomóż Googlebotowi lepiej poznać stronę

Pamiętaj o używaniu nagłówków Hx

Jeżeli używasz grafik – pamiętaj o ALTach

Jeżeli używasz wideo, nie zapomnij o caption

Upewnij się, że nie blokujesz plików JavaScript

Analizując stronę niekiedy dostaniemy komunikat o tym, że pewne zasoby są blokowane w robots.txt

co uniemożliwia całkowite/pełne wyświetlenie zawartości strony. Bez usunięcia blokady z robots,txt nie rozwiążemy tego problemu.

Autor artykułu przygotował test, który pokazuje, jak sobie poradzić z problemem. Wchodzimy na tę stronę – widzimy testowy tekst. Następnie odpalamy Chrome Developers Tool i blokujemy ten plik

Tekst znika :)

Użyj Sprawdzenie adresu url do wyeliminowania błędów JS

Jeżeli zobaczysz coś takiego

przekaż temat programistom – mają go poprawić, inaczej strona może mieć problem z widocznością w Google.

Sprawdź, czy Google indeksuje serwis

Od lat do sprawdzenia stanu zaindeksowania serwisu w Google sprawdza się komenda site:nazwa_domeny

(W analizowanym przeze mnie obecnie przypadku po paru tygodniach zaindeksowany jest TYLKO url strony głównej…)

Upewnij się, że Google widzi wewnętrzne linkowanie

Google musi widzieć poprawne linki a <a href>, aby indeksować serwis – na przykład

Jeżeli linki są dodawane do DOM tylko w sytuacji, gdy ktoś klika w np. przycisk/(czy hiperłącze) Google nie odkryje linkowania wewnętrznego – a co za tym idzie w indeksie poza stroną główną nie zobaczymy żadnej innej strony serwisu.

Przykład błędnej implementacji – poza wspomnianym wyżej bazowaniu w urlach na # mamy też  poniżej

Nie ma <a href>, więc w tej sytuacji także Google nie wie, gdzie ma „pójść dalej”

UWAGA !!!

Elementy HTML, takie jak div czy span,  także nie mogą być użyte w linkowaniu wewnętrznym, ponieważ utrudni to, lub wręcz uniemożliwi, poprawne renderowanie strony przez Googlebota (przy renderowaniu oczywiście po stronie przeglądarki)

Googlebot ignoruje linki wewnętrzne oparte o #

Jeżeli adresy url zawierają znak # to dla Google jest to sygnał, że to, co jest po nim, jest nieistotne

For us, if we see the kind of a hash there, then that means the rest there is probably irrelevant. For the most part we will drop that when we try to index the content (…). When you want to make that content actually visible in search, it’s important that you use the more static-looking URLs.”

i serwis nie zostanie zaindeksowany.

Uwaga ! – nie mówimy tutaj o hashbangu, czyli #!

Sprawdź, czy Czy Google widzi menu

Sprawdzenie budowy menu to kolejna kwestia, jaką należy sprawdzić przy okazji audytu – zasady, jakimi należy się kierować, są takie same jak we wcześniejszym punkcie

Sprawdź, czy Google widzi „ukrytą treść”

Często ukrywamy, np. w sklepie internetowym, treść w tabach – analizując serwis oparty o JS warto sprawdzić, czy Googlebot ją widzi. W tym celu przechodzimy do Chrome Developers Tolls znowu (CTRL+SHIFT+J) i odznaczamy tę opcję

Następnie odświeżamy stronę (CTRL+F5) i szukamy w kodzie treści za zakładki – jak ją widzimy, wszystko gra :)

Ważne – nie analizuj kopii strony z cache’a Google – ponieważ widzisz to, jak przeglądarka interpretuje zawartość strony pobraną przez Googlebota, a to nie odpowiada na pytanie, jak on ją wyrenderował.

Jeżeli chcesz dowiedzieć się czegoś więcej na ten temat przeczytaj ten artykuł.

Na koniec uwaga odnośnie tagów kanonicznych – aby Google się do nich stosowało, nie mogą znajdować się w wyrenderowanej treści, tylko w HTML/X-robots tag

Wprawdzie, jak czytam, Google wyciągnie canonicale z renderowanej treści, ale John nie poleca stosowania takiego rozwiązania.

“IMO I would not rely on this though, if you really want a URL as a canonical, do the work to get the signal in right from the start”

Optymalizacja aplikacji opartych o Angular

 

Optymalizacja aplikacji opartych o React

Optymalizacja aplikacji opartych o Vue

Zachęcam na koniec wszystkich programistów oraz SEOwców, mających styczność z JavaScript’em do odwiedzenia kanału Google JavaScript SEO na Youtube poświęconemu tworzeniu stron opartych o JS przyjaznych wyszukiwarce.

Na chwilę obecną jest tam 8 filmików, patrząc jednak na rosnącą popularność JS kanał powinien ewoluować :)

Podsumowanie

Obecnie strony oparte na JavaScript nie są jeszcze bardzo popularne, ale powoli się to zmienia. Szkoda, że firmy, które oferują te rozwiązania właścicielom (w przeważającej części) średnich i dużych portali nie wiedzą jak dokonać poprawnej migracji z punktu widzenia SEO – co skutkuje tym, że serwis po przejściu na JS traci widoczność w Google – co w konsekwencji prowadzić może nawet do upadku biznesu.

GD Star Rating
loading...
Jak zdiagnozować i rozwiązać problem ze spadkiem widoczności strony w Google po przejściu na JavaScript, Jak zdiagnozować i rozwiązać problem ze spadkiem widoczności strony w Google po przejściu na JavaScript, 10.0 out of 10 based on 3 ratings Jak zdiagnozować i rozwiązać problem ze spadkiem widoczności strony w Google po przejściu na JavaScript
autor 1396 artykułów opublikowanych na blogu

Jako właściciel firmy SEOProfi pomaga zwiększać sprzedaż w sklepach internetowych oraz ruch na stronach firmowych na rynku polsko-, anglo- oraz niemieckojęzycznym.

Bloga założył w 2010 widząc ogrom problemów, z jakimi mają do czynienia osoby próbujące samodzielnie wypromować stronę w Google. Od 2011 roku jako Product Expert pomaga rozwiązywać te problemy na oficjalnym Forum Pomocy Google dla Webmasterów.


Chcesz zwiększyć widoczność Twojej strony w Google?

Tak, chcę >>


Skomentuj

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Inne wpisy z tej kategorii