Rozwiązywanie problemów z JavaScriptem związanych z wyszukiwarką | Centrum wyszukiwarki Google | Dokumentacja

Jesteśmy teraz na LinkedIn: aby uzyskać wiadomości i zasoby z wyszukiwarki Google dotyczące tego, jak ułatwić znajdowanie witryny, obserwuj nas na LinkedIn.

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ż Google wykonuje kod JavaScript, podczas projektowania stron i aplikacji musisz wziąć pod uwagę pewne różnice i ograniczenia, aby roboty mogły uzyskać dostęp do Twoich treści i je wyrenderować. Nasz przewodnik po podstawach SEO JavaScriptu zawiera więcej informacji na temat optymalizacji witryny utworzonej przy użyciu JavaScriptu w wyszukiwarce Google.

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. Analiza po stronie klienta może przedstawiać działania Googlebota i WRS w witrynie w sposób niepełny lub niedokładny. Aby monitorować te działania oraz uwagi dotyczące Twojej witryny, użyj Search Console.

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: Jeśli nie masz pewności, czy główną przyczyną błędu jest JavaScript, postępuj zgodnie z naszym ogólnym przewodnikiem na temat debugowania, aby znaleźć źródło problemu.

Aby sprawdzić, w jaki sposób Google indeksuje i renderuje URL, przeprowadź test wyników z elementami rozszerzonymi 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, aby rozpoznać potencjalne problemy, które mogą wpływać na sposób renderowania treści.

Oto przykład, który ilustruje, jak zarejestrować błędy JavaScriptu odnotowane w globalnym module obsługi właściwości onerror. Uwaga: niektórych typów błędów JavaScriptu (np. błędów analizy) nie można rejestrować tą metodą.

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);

});

Pamiętaj, aby zapobiegać błędom soft 404. Może to być szczególnie trudne w aplikacji jednostronicowej. 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.
```
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';
   }
 });
```
- Dodaj lub zmień tag meta robots na noindex.
```
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);
   }
 });
```
Gdy aplikacja jednostronicowa używa JavaScriptu po stronie klienta do obsługi błędów, często zamiast odpowiedniego kodu stanu zgłasza kod stanu HTTP 200. W efekcie strony błędów mogą być indeksowane i wyświetlane w wynikach wyszukiwania.
Googlebot prawdopodobnie odrzuci prośby o zgodę użytkownika.
Funkcje, które wymagają zgody użytkownika, nie sprawdzają się w przypadku Googlebota ani wszystkich użytkowników. Jeśli na przykład wymagany jest interfejs Camera API, Googlebot nie może udostępnić Ci aparatu. Zamiast tego zadbaj, żeby użytkownicy mogli uzyskiwać dostęp do treści w sposób, który nie wiąże się z koniecznością zezwolenia na dostęp do aparatu.
Nie używaj adresów URL z fragmentami w celu wczytywania różnych treści.
Do wczytywania różnych widoków aplikacja jednostronicowa może używać adresów URL z fragmentami (np. https://example.com/#/produkty). Schemat indeksowania AJAX został wycofany w 2015 r., więc adresy URL z fragmentami nie będą współdziałać z Googlebotem. Do wczytywania różnych treści na podstawie adresu URL w aplikacji jednostronicowej zalecamy używanie interfejsu History API.
Trwałość danych nie gwarantuje prawidłowego wyświetlania treści.
WRS ładuje każdy URL, podążając za przekierowaniami serwerów i klientów tak samo jak zwykła przeglądarka (odkrywanie treści przez Google omówiliśmy w Szczegółowym przewodniku po działaniu wyszukiwarki Google). WRS nie zachowuje jednak informacji o stanie po wczytaniu stron:
- Dane pamięci lokalnej i pamięci sesji są usuwane po wczytaniu stron.
- Pliki cookie HTTP są usuwane po wczytaniu stron.
Aby w przypadku Googlebota uniknąć problemów z buforowaniem, używaj odcisków cyfrowych treści.
Googlebot intensywnie korzysta z pamięci podręcznej, aby zmniejszać liczbę żądań sieciowych i wykorzystanie zasobów. WRS może ignorować nagłówki zapisu w pamięci podręcznej. Może to prowadzić do korzystania przez WRS z nieaktualnych zasobów JavaScriptu lub CSS-u. Uniknąć tego problemu pozwala odcisk cyfrowy treści umieszczany we fragmencie nazwy pliku odnoszącym się do treści, np. main.2bb85551.js. Odcisk cyfrowy zależy od zawartości pliku, więc jej aktualizacje powodują każdorazowe utworzenie innej nazwy pliku. Więcej informacji znajdziesz w przewodniku web.dev po strategiach długiego buforowania.
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.
Być może jeszcze nie wszystkie klienty użytkownika korzystają z niektórych funkcji sieciowych. Z kolei niektóre klienty mogły celowo wyłączyć wybrane funkcje. Jeśli na przykład używasz WebGL do renderowania efektów fotograficznych w przeglądarce, wykrywanie funkcji pokazuje, że Googlebot nie obsługuje WebGL. Aby to naprawić, możesz pominąć efekt fotograficzny lub zdecydować się na renderowanie po stronie serwera, aby wstępnie renderować efekty fotograficzne. Dzięki temu Twoje treści będą dostępne dla wszystkich, w tym dla Googlebota.
Upewnij się, że Twoje treści obsługują połączenia HTTP.
Googlebot pobiera treści z Twojego serwera za pomocą żądań HTTP. Nie obsługuje innych typów połączeń, np. WebSockets ani WebRTC. Aby uniknąć problemów z takimi połączeniami, zadbaj o możliwość zastępczego pobierania treści przez HTTP oraz korzystaj z niezawodnych metod obsługi błędów i wykrywania funkcji.
Upewnij się, że komponenty sieciowe są renderowane zgodnie z oczekiwaniami. Aby sprawdzić, czy wyrenderowany HTML ma całą oczekiwaną zawartość, użyj testu wyników z elementami rozszerzonymi lub narzędzia do sprawdzania adresów URL.
WRS spłaszcza modele Light DOM i Shadow DOM. Jeśli komponenty internetowe, których używasz, nie korzystają z mechanizmu <slot> na potrzeby zawartości modelu Light DOM, poszukaj dodatkowych informacji w dokumentacji danego komponentu internetowego lub użyj innego komponentu internetowego. Aby uzyskać więcej informacji, zapoznaj się ze sprawdzonymi metodami korzystania z komponentów internetowych.
Gdy przejrzysz tę listę kontrolną i wprowadzisz odpowiednie zmiany, jeszcze raz przetestuj stronę za pomocą testu wyników z elementami rozszerzonymi 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).