Що робити, якщо код JavaScript заважає роботі Google Пошуку

З цього посібника ви дізнаєтеся, як знайти та усунути проблеми з кодом JavaScript, через які ваша сторінка або окремі матеріали на ній можуть не відображатися в результатах пошуку Google. Хоча алгоритми Google Search розуміють код JavaScript, вам потрібно враховувати, як пошукові роботи знаходять і аналізують ваш контент при створенні своїх сторінок і додатків. Більш детальна інформація про те, як оптимізувати сайти на JavaScript для роботи з Google Search, наведена в посібнику з пошукової оптимізації сайтів, що використовують 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. Якщо ви реалізували рішення для надання платного доступу на основі JavaScript, перевірте його. Деякі подібні рішення включають повну версію контенту у відповідь сервера, а потім приховують її за допомогою JavaScript до тих пір, поки не буде підтверджено статус підписки. Це не найнадійніший спосіб обмежити доступ до контенту. Налаштуйте своє рішення таким чином, щоб весь контент надавався користувачеві тільки після підтвердження статусу підписки.
  11. Коли ви усунете всі проблеми, згадані в списку, протестуйте сторінку ще раз. Перевірте розширені результати або скористайтеся інструментом перевірки URL-адреси в Search Console. Якщо несправність усунена, з’явиться зелений прапорець, а інформація про помилки зникне. Якщо вам не вдається її вирішити, задайте питання на довідковому форумі Центру Пошуку Google.