Rozwiązywanie problemów z JavaScriptem związanych z wyszukiwarką

W tym przewodniku omawiamy, jak rozpoznać i rozwiązać problemy z JavaScriptem, przez które Twoja strona lub określone treści na stronach zapisanych w postaci kodu JavaScript mogą nie wyświetlać się w wyszukiwarce Google. Chociaż Googlebot wykonuje kod JavaScript, podczas projektowania stron i aplikacji musisz uwzględnić pewne różnice i ograniczenia, by roboty mogły uzyskać dostęp do Twoich treści i je wyrenderować.

Googlebot został zaprojektowany z myślą o sprawnym funkcjonowaniu w internecie. Jego głównym priorytetem jest indeksowanie stron bez obniżania komfortu użytkowników witryny. Googlebot, wykorzystując usługę renderowania sieciowego (WRS), stale analizuje i identyfikuje zasoby, które nie mają wpływu na istotne treści strony, i może ich nie pobierać. Na przykład żądania związane z raportowaniem i błędami, które nie są istotnym elementem zawartości strony, i inne podobne typy żądań nie są używane ani konieczne do wyodrębnienia najważniejszych treści na stronie.

Jeśli podejrzewasz, że przez problemy z JavaScriptem Twoja strona lub określone treści na stronach zapisanych w postaci kodu JavaScript mogą nie wyświetlać się w wyszukiwarce Google, wykonaj te czynności:

1. Aby sprawdzić, w jaki sposób Google indeksuje i renderuje adres URL, przeprowadź test optymalizacji mobilnej lub użyj narzędzia do sprawdzania adresów URL w Search Console. Możesz zobaczyć m.in. załadowane zasoby, dane wyjściowe i wyjątki konsoli JavaScript oraz wyrenderowane DOM.

   Opcjonalnie zalecamy też rejestrowanie i kontrolowanie błędów JavaScriptu wykrytych przez użytkowników, w tym Googlebota, w witrynie, by rozpoznać potencjalne problemy, które mogą wpływać na sposób renderowania treści.

   Pokaż przykład

   Oto przykład, który ilustruje, jak zarejestrować błędy JavaScriptu odnotowane w globalnym module obsługi właściwości onerror.

   window.addEventListener('error', function(e) {
       var errorText = [
           e.message,
           'URL: ' + e.filename,
           'Line: ' + e.lineno + ', Column: ' + e.colno,
           'Stack: ' + (e.error && e.error.stack || '(no stack trace)')
       ].join('\n');
   
       // Example: log errors as visual output into the host page.
       // Note: you probably don't want to show such errors to users, or
       //       have the errors get indexed by Googlebot; however, it may
       //       be a useful feature while actively debugging the page.
       var DOM_ID = 'rendering-debug-pre';
       if (!document.getElementById(DOM_ID)) {
           var log = document.createElement('pre');
           log.id = DOM_ID;
           log.style.whiteSpace = 'pre-wrap';
           log.textContent = errorText;
           if (!document.body) document.body = document.createElement('body');
           document.body.insertBefore(log, document.body.firstChild);
       } else {
           document.getElementById(DOM_ID).textContent += '\n\n' + errorText;
       }
   
       // Example: log the error to remote service.
       // Note: you can log errors to a remote service, to understand
       //       and monitor the types of errors encountered by regular users,
       //       Googlebot, and other crawlers.
       var client = new XMLHttpRequest();
       client.open('POST', 'https://example.com/logError');
       client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
       client.send(errorText);
   
   });

2. Zadbaj, by nie występowały pozorne błędy 404. Szczególnie trudne może to być w aplikacji na jednej stronie. Aby uniknąć indeksowania stron z błędami, skorzystaj z jednej lub obu tych strategii:
   • Utwórz przekierowanie do adresu URL, pod którym serwer odpowiada kodem stanu 404.

     Pokaż przykład

     fetch(`https://api.kitten.club/cats/${id}`)
      .then(res => res.json())
      .then((cat) => {
        if (!cat.exists) {
          // redirect to page that gives a 404
          window.location.href = '/not-found';
        }
      });

   • Zmień metatag robots na noindex lub go dodaj.

     Pokaż przykład

     fetch(`https://api.kitten.club/cats/${id}`)
      .then(res => res.json())
      .then((cat) => {
        if (!cat.exists) {
          const metaRobots = document.createElement('meta');
          metaRobots.name = 'robots';
          metaRobots.content = 'noindex';
          document.head.appendChild(metaRobots);
        }
      });

3. Googlebot prawdopodobnie odrzuci prośby o zgodę użytkownika.
4. Nie używaj adresów URL z fragmentami w celu wczytywania różnych treści.
5. Trwałość danych nie gwarantuje prawidłowego wyświetlania treści.
6. Aby w przypadku Googlebota uniknąć problemów z buforowaniem, używaj odcisków cyfrowych treści.
7. Sprawdź, czy Twoja aplikacja korzysta z wykrywania funkcji w przypadku wszystkich krytycznych interfejsów API, których potrzebuje, i w razie potrzeby zapewnij zachowanie rezerwowe lub kod polyfill.
8. Upewnij się, że Twoje treści obsługują połączenia HTTP.
9. Upewnij się, że komponenty sieciowe są renderowane zgodnie z oczekiwaniami. Aby sprawdzić, czy wyrenderowany HTML ma całą oczekiwaną zawartość, użyj testu optymalizacji mobilnej lub narzędzia do sprawdzania adresów URL.
10. Gdy przejrzysz tę listę kontrolną i wprowadzisz odpowiednie zmiany, jeszcze raz przetestuj stronę za pomocą testu optymalizacji mobilnej lub narzędzia do sprawdzania adresów URL w Search Console.

    Jeśli problem został rozwiązany, pojawia się zielony znacznik wyboru i nie wyświetlają się żadne błędy. Jeśli nadal widzisz błędy, opublikuj post w grupie dyskusyjnej JavaScript Sites in Search Working Group (strony z JavaScriptem w grupie roboczej ds. wyszukiwarki).