Podstawy SEO JavaScriptu

JavaScript jest ważnym elementem platformy internetowej, ponieważ zapewnia wiele funkcji, które zamieniają obszary internetu w zaawansowane platformy aplikacji. Dbając o wykrywalność aplikacji internetowych opartych na JavaScripcie w wyszukiwarce Google, zwiększasz szansę na znalezienie nowych użytkowników i ponowne zaangażowanie dotychczasowych, gdy szukają oni treści, których dostarczyć mogą Twoje aplikacje. Wyszukiwarka Google obsługuje JavaScript przy użyciu zawsze aktualnej wersji Chromium, ale kilka rzeczy możesz zoptymalizować.

Dzięki temu przewodnikowi dowiesz się, jak wyszukiwarka Google przetwarza JavaScript, i poznasz sprawdzone metody ulepszania aplikacji internetowych utworzonych przy użyciu tego języka pod kątem ich wyszukiwania w Google.

Jak Googlebot przetwarza JavaScript

Przetwarzanie aplikacji internetowych opartych na JavaScripcie przez Googlebota można podzielić na trzy główne fazy:

  1. Skanowanie
  2. Renderowanie
  3. Indeksowanie

Googlebot skanuje, renderuje i indeksuje stronę.

Googlebot pobiera adres URL z kolejki indeksowania, skanuje go, a potem przekazuje do etapu przetwarzania. Na tym etapie wyodrębniane są linki, które ponownie umieszczane są w kolejce indeksowania, a strona jest dodawana do kolejki renderowania. Stamtąd strona trafia do mechanizmu renderowania, który przekazuje wyrenderowany kod HTML do przetwarzania. Na etapie przetwarzania treści są indeksowane i wyodrębnianie są linki, które trafiają do kolejki indeksowania.

Gdy Googlebot pobiera adres URL z kolejki, wysyłając żądanie HTTP, najpierw sprawdza, czy zezwalasz na skanowanie. W tym celu czyta plik robots.txt. Jeśli URL jest w nim oznaczony jako niedozwolony, Googlebot nie wysyła do niego żądania HTTP i w rezultacie go pomija.

Następnie Googlebot analizuje odpowiedzi z innych adresów URL w atrybucie href linków HTML i dodaje te adresy do kolejki indeksowania. Aby zapobiec wykrywaniu linków, użyj mechanizmu nofollow.

Skanowanie adresu URL i analizowanie odpowiedzi HTML sprawdza się w przypadku klasycznych witryn lub stron renderowanych po stronie serwera, gdy kod HTML w odpowiedzi HTTP zawiera wszystkie treści. Niektóre witryny korzystające z JavaScriptu mogą używać trybu powłoki aplikacji. W takim przypadku początkowy kod HTML nie zawiera rzeczywistych treści generowanych przez JavaScript, więc w celu ich podejrzenia Googlebot musi wykonać kod JavaScript.

Googlebot umieszcza w kolejce wszystkie strony do renderowania, chyba że metatag lub nagłówek w pliku robots wskazuje, by nie indeksować strony. Strona może znajdować się w kolejce przez kilka sekund albo dłużej. Gdy zezwolą na to zasoby Googlebota, Chromium bez interfejsu graficznego renderuje stronę i wykonuje kod JavaScript. Googlebot ponownie analizuje wyrenderowany kod HTML pod kątem linków i dodaje znalezione adresy URL do kolejki. Googlebot używa również wyrenderowanego kodu HTML do zindeksowania strony.

Pamiętaj, że renderowanie po stronie serwera lub wstępne renderowanie nadal jest bardzo użyteczne, bo sprawia, że witryna działa szybciej dla użytkowników i robotów, a poza tym nie wszystkie boty potrafią wykonywać kod JavaScript.

Opisywanie strony przy użyciu unikalnych tytułów i fragmentów

Unikalne, opisowe tytuły i przydatne metaopisy pomagają użytkownikom szybko zidentyfikować najlepszy wynik. Informacje na temat dobrych tytułów i opisów znajdziesz w naszym poradniku.

Do określenia lub zmiany metaopisu bądź tytułu możesz użyć JavaScriptu.

Pisanie zgodnego kodu

Przeglądarki oferują wiele interfejsów API, a JavaScript jest językiem, który szybko się rozwija. Googlebot, natomiast, obsługuje ograniczoną liczbę interfejsów API i funkcji JavaScriptu. Aby się upewnić, że Twój kod jest zgodny z Googlebotem, postępuj według naszych wskazówek dotyczących rozwiązywania problemów z obsługą JavaScriptu.

Używanie znaczących kodów stanów HTTP

Googlebot używa kodów stanów HTTP, by wykryć, czy podczas skanowania strony coś poszło nie tak.

Jeśli chcesz przekazać Googlebotowi, by nie skanował ani nie indeksował strony, używaj znaczących kodów stanów – na przykład kodu 404 dla strony, której nie można znaleźć, lub kodu 401 w przypadku stron, na które trzeba się zalogować. Możesz też użyć tych kodów, by poinformować Googlebota o przeniesieniu strony pod nowy adres URL. Dzięki temu będzie można odpowiednio zaktualizować indeks.

Oto lista kodów stanów HTTP i informacje o tym, kiedy należy ich używać:

Stan HTTP Kiedy używać
301 / 302 Strona została przeniesiona pod nowy adres URL.
401 / 403 Strona jest niedostępna ze względu na brak uprawnień.
404 / 410 Strona nie jest już dostępna.
5xx Wystąpił błąd po stronie serwera.

Zachowanie ostrożności przy używaniu metatagów robots

Aby uniemożliwić Googlebotowi indeksowanie strony lub otwieranie linków, możesz użyć metatagu robots. Na przykład dodanie tego metatagu w górnej części strony blokuje Googlebotowi możliwość indeksowania tej strony:

<!-- Googlebot won't index this page or follow links on this page -->
<meta name="robots" content="noindex, nofollow">

Możesz użyć JavaScript, by dodać metatag robots do strony lub zmienić jej treść. Poniższy przykładowy kod pokazuje, jak zmienić metatag robots za pomocą JavaScriptu, by zapobiec indeksowaniu bieżącej strony, jeśli wywołanie interfejsu API nie zwróci treści.

fetch('/api/products/' + productId)
  .then(function (response) { return response.json(); })
  .then(function (apiResponse) {
    if (apiResponse.isError) {
      // get the robots meta tag
      var metaRobots = document.querySelector('meta[name="robots"]');
      // if there was no robots meta tag, add one
      if (!metaRobots) {
        metaRobots = document.createElement('meta');
        metaRobots.setAttribute('name', 'robots');
        document.head.appendChild(metaRobots);
      }
      // tell Googlebot to exclude this page from the index
      metaRobots.setAttribute('content', 'noindex');
      // display an error message to the user
      errorMsg.textContent = 'This product is no longer available';
      return;
    }
    // display product information
    // ...
  });
    

Gdy Googlebot napotyka dyrektywę noindex w metatagu robots przed uruchomieniem JavaScriptu, nie renderuje ani nie indeksuje strony.

Rozwiązywanie problemów z obrazami i leniwym ładowaniem treści

Obsługa obrazów może znacznie obciążać przepustowość i wymagać sporej mocy obliczeniowej. Dlatego dobrym podejściem jest stosowanie leniwego ładowania, by wczytywane były tylko te obrazy, które użytkownik za chwilę zobaczy. Aby mieć pewność, że używasz leniwego ładowania tak, by nie utrudniało działania wyszukiwarek, postępuj według naszych wskazówek.