Что делать, если код JavaScript препятствует работе Google Поиска

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

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

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

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

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

    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';
   }
 });
    • Добавление или изменение тега meta с атрибутом robots и директивой 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);
   }
 });

    Когда одностраничное приложение использует для обработки ошибок клиентский код 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. Цифровой отпечаток зависит от содержания файла, поэтому при каждом изменении файла для него создается новое название. Ознакомьтесь с руководством по стратегиям долгосрочного кеширования от web.dev.
  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.

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