Устранение неполадок с кодом JavaScript, которые препятствуют сканированию и индексированию контента

Из этого руководства вы узнаете, как найти и устранить проблемы кода JavaScript, из-за которых ваша страница или отдельные материалы на ней могут не показываться в результатах поиска Google. Робот Googlebot способен выполнять код JavaScript, но с оговорками. При создании страниц и приложений вам нужно учитывать особенности обработки контента с таким кодом поисковыми роботами. Более подробная информация о том, как оптимизировать сайты на JavaScript для работы с Google Поиском, приведена в руководстве по поисковой оптимизации сайтов, использующих JavaScript.

Робот Googlebot настроен таким образом, чтобы сканирование страниц не создавало проблем для посетителей сайтов. Googlebot и сервис отрисовки веб-страниц (Web Rendering Service, WRS), который является компонентом этого робота, постоянно анализируют контент и обнаруживают ресурсы, не относящиеся к основному содержимому веб-страниц, по возможности игнорируя их. Например, могут игнорироваться запросы отчетов и ошибок. Средства аналитики на стороне клиента могут давать недостаточно полное и точное представление о том, как Googlebot и WRS обрабатывают ваш сайт. Используйте Search Console для отслеживания их работы и просмотра отчетов о сайте.

Если вам кажется, что из-за каких-либо проблем в коде JavaScript ваша страница или отдельные материалы на ней могут не показываться в результатах поиска Google, выполните описанные ниже действия. Если вы не уверены, что основной причиной неполадок является код JavaScript, изучите проблему, используя общее руководство по отладке.

1. Чтобы понять, как Google сканирует и отрисовывает тот или иной URL, используйте, используйте проверку расширенных результатов или инструмент проверки URL в Search Console. Так вы сможете увидеть отрисованные объекты DOM, загруженные ресурсы, сообщения и исключения в консоли JavaScript и т. д.

   Вы также можете найти и проанализировать ошибки кода JavaScript, с которыми сталкиваются пользователи и робот Googlebot на вашем сайте. Это поможет вам определить, какие проблемы влияют на обработку контента.

   Ниже показано, как можно регистрировать ошибки JavaScript, возвращаемые обработчиком GlobalEventHandlers. Учтите, что этот метод не позволяет выявлять синтаксические и некоторые другие типы ошибок.

   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. Не допускайте возникновения ошибок soft 404. Это может быть особенно сложно сделать, если у вас одностраничное приложение. Чтобы избежать индексирования страниц ошибок воспользуйтесь одним из следующим способов (вы также можете применить оба подхода одновременно):
   • Переадресация на URL, который возвращает код статуса 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';
        }
      });

   • Добавление метатега robots с директивой noindex или включение этой директивы в существующий метатег meta.

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

   Когда одностраничное приложение использует для обработки ошибок клиентский код JavaScript, оно зачастую передает код статуса HTTP 200 вместо соответствующего ситуации кода. Из-за этого есть вероятность, что страницы ошибок будут индексироваться и показываться в результатах поиска.

3. Учитывайте, что робот Googlebot отклоняет запросы разрешений пользователей.
   Функции, для которых требуются дополнительные разрешения, недоступны роботу Googlebot и большей части пользователей. Например, если сделать Camera API условием доступа к контенту, робот Googlebot не сможет обработать контент, так как у него нет камеры. Поэтому лучше предоставить доступ к контенту без разрешения на доступ к камере.
4. Не используйте URL фрагментов, чтобы загружать разный контент.
   Одностраничное приложение может с помощью URL фрагментов (например, https://example.com/#/products) загружать разные представления. Поскольку поддержка схемы сканирования AJAX была прекращена в 2015 г., URL фрагментов не всегда совместимы с роботом Googlebot. Если вам нужно загружать в одностраничном приложении фрагменты контента с разными URL, рекомендуем использовать History API.
5. Показывая контент, обеспечьте актуальность данных.
   Как и обычные браузеры, WRS загружает каждый URL, выполняя переадресации серверов и клиентов (о том, как Google находит контент, читайте в статье о принципах работы Google Поиска). Однако WRS не сохраняет состояние страниц между их загрузками. При загрузке страниц очищаются:
   • данные локального хранилища и данные сеансов;
   • файлы cookie HTTP.
6. Используйте цифровые отпечатки, чтобы избежать проблем с кешированным контентом.
   Чтобы сократить число сетевых запросов и потребление ресурсов, робот Googlebot активно использует кешированный контент. Поскольку WRS может не обрабатывать заголовки кеширования, это иногда приводит к использованию устаревших ресурсов JavaScript или CSS. Чтобы избежать этой проблемы, можно включать в название файла цифровой отпечаток контента, например так: main.2bb85551.js. Цифровой отпечаток определяется контентом файла, поэтому при каждом обновлении создается новое название файла. Подробнее о стратегиях долгосрочного кеширования…
7. Следите за тем, чтобы в вашем приложении использовалась проверка поддержки функций для всех нужных API, и при необходимости задействуйте резервный процесс или полифил.
   Агенты пользователя поддерживают не все функции веб-страниц и могут намеренно отключать некоторые функции. Предположим, вы используете WebGL для обработки фотоэффектов в браузере, но проверка поддержки функций показывает, что робот Googlebot несовместим с WebGL. Чтобы решить эту проблему, можно отказаться от фотоэффектов или выполнять обработку на стороне сервера (тогда ваш контент будет доступен всем, в том числе роботу Googlebot).
8. Обеспечьте передачу контента по протоколу HTTP.
   Для получения контента с вашего сервера Googlebot использует HTTP-запросы. Подключения других типов (например, через WebSockets или WebRTC) не поддерживаются. Чтобы избежать проблем при подключении, реализуйте поддержку HTTP для получения контента, правильной обработки ошибок и проверки поддержки функций.
9. Следите за правильностью отрисовки веб-компонентов. Используйте для этого проверку расширенных результатов или инструмент проверки URL.
   WRS представляет структуру Light DOM и Shadow DOM в упрощенном виде. Если ваши веб-компоненты не используют механизм <slot> для контента Light DOM, изучите документацию по этим компонентам или выберите другие. Более подробная информация приведена в рекомендациях по веб-компонентам.
10. Когда вы устраните все проблемы из списка, снова протестируйте страницу. Выполните проверку расширенных результатов или используйте инструмент проверки URL в Search Console.

    Если неполадка устранена, появится зеленый флажок и сведения об ошибках исчезнут. Если устранить ошибки не удалось, опубликуйте сообщение на специальном форуме.