Основы поисковой оптимизации сайтов на JavaScript

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

В этом руководстве рассказывается о том, как мы сканируем и индексируем веб-приложения на основе JavaScript, а также содержатся рекомендации по оптимизации таких приложений для Google Поиска.

Как Googlebot обрабатывает веб-приложения JavaScript

Обработка веб-приложений на основе JavaScript с помощью робота Googlebot предполагает три основных этапа:

  1. Сканирование.
  2. Отображение.
  3. Индексирование.

На схеме ниже показано, по какому алгоритму робот Googlebot выполняет эти операции.

Googlebot получает URL из очереди сканирования, выполняет сканирование и передает страницу на этап обработки. На этапе обработки извлекаются ссылки, которые возвращаются в очередь сканирования, после чего страница становится в очередь на отрисовку. Страница переходит к средству отрисовки, которое возвращает преобразованный HTML на обработку. На этом этапе выполняется индексирование контента и извлекаются ссылки для добавления в очередь сканирования.

Получив URL из очереди сканирования при помощи HTTP-запроса, робот Googlebot в первую очередь проверяет, не блокируете ли вы обработку страницы, считывая файл robots.txt. Если доступ к URL запрещен, Googlebot не отправляет по нему HTTP-запрос, а пропускает этот адрес.

Затем Googlebot анализирует ответы от других URL, заданных в атрибутах href HTML-ссылок, и добавляет их в очередь сканирования. Если вы не хотите, чтобы робот Googlebot переходил по ссылкам, задайте для них атрибут nofollow.

Сканирование URL и анализ HTML-ответа эффективны в случае обычных сайтов и страниц, отображаемых на стороне сервера, когда весь контент содержится в коде HTML из HTTP-ответа. Однако на некоторых сайтах применяется модель оболочки, при которой контент не содержится в исходном коде HTML – чтобы получить его, роботу Googlebot необходимо выполнить этот код JavaScript.

Робот Googlebot ставит все URL в очередь на отображение, если в заголовке или метатеге robots не содержится запрет на индексирование страницы. Страница может задержаться в очереди на несколько секунд (в некоторых случаях на более длительное время). Когда Googlebot предоставляет необходимые ресурсы, консольный браузер Chromium передает ему отображенную страницу с выполненным JavaScript. Googlebot анализирует полученный HTML-код, индексирует содержащийся на ней контент и ставит все обнаруженные в нем URL в очередь на сканирование.

Мы рекомендуем по возможности использовать отображение на стороне сервера или предварительное отображение, поскольку в этом случае сайт будет загружаться быстрее. Кроме того, не все роботы могут выполнять код JavaScript.

Укажите информацию о своей странице с помощью уникальных заголовков и метаописаний

Информативные заголовки страниц, связанные с содержанием сайта, и метаописания помогают пользователям быстрее находить подходящие результаты поиска. О том, как создавать эффективные заголовки и описания, читайте в Справочном центре.

Задавать и изменять эти элементы можно с помощью JavaScript.

Создайте код, который будет поддерживаться роботом Googlebot

В современных браузерах реализовано множество различных API, а язык JavaScript быстро развивается. Робот Googlebot может не поддерживать некоторые API и функции JavaScript. Чтобы обеспечить совместимость вашего кода с роботом Googlebot, следуйте рекомендациям из специального руководства.

Используйте понятные коды статусов HTTP

Робот Googlebot получает информацию о проблемах, возникших при сканировании страницы, с помощью кодов статусов HTTP.

Чтобы робот Googlebot мог определить, разрешено ли ему ли сканировать или индексировать страницу, рекомендуется использовать стандартные коды статусов. Например, если страницу не удалось найти, используйте код 404, а если для доступа к странице требуется указать учетные данные, – код 401. Также с помощью кодов статусов HTTP можно сообщить роботу Googlebot о переносе страницы на новый URL, чтобы мы обновили индекс.

Ниже приведены коды статусов HTTP и сведения о том, в каких случаях они используются.

Статус HTTP В каком случае используется этот статус
301/302 Страница перенесена на новый URL.
401/403 Отсутствует разрешение на доступ к странице.
404/410 Страница недоступна.
5xx Произошла ошибка на стороне сервера.

Старайтесь не допускать ложных ошибок 404 в приложениях, состоящих из одной страницы

В клиентских приложениях, состоящих из одной страницы, маршрутизация зачастую выполняется на стороне клиента. В этом случае использовать коды статусов HTTP может быть невозможно или неудобно. Чтобы при отрисовке и маршрутизации на стороне клиента не возникала ложная ошибка 404, воспользуйтесь одной из следующих методик:

  • Настройте переадресацию JavaScript на URL, для которого сервер возвращает код статуса HTTP 404. Пример: /not-found.
  • Добавьте на страницы с ошибками тег <meta name="robots" content="noindex">, используя JavaScript.

Пример кода с переадресацией

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    window.location.href = '/not-found'; // redirect to 404 page on the server.
  }
})

Пример кода с тегом noindex

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Применяйте History API вместо фрагментов

Выполняя поиск ссылок на ваших страницах, робот Googlebot учитывает только URL в атрибуте href из HTML-ссылок.

В клиентских приложениях, состоящих из одной страницы, маршрутизацию между просмотрами веб-приложения рекомендуется осуществлять с помощью History API. Чтобы робот Googlebot мог находить ссылки, старайтесь не использовать фрагменты для загрузки контента разных страниц. Ниже приведен пример кода, нарушающего наши рекомендации, так как при его использовании робот Googlebot не сможет просканировать ссылки.

<nav>
  <ul>
    <li><a href="#/products">Our products</a></li>
    <li><a href="#/services">Our services</a></li>
  </ul>
</nav>

<h1>Welcome to example.com!</h1>
<div id="placeholder">
  <p>Learn more about <a href="#/products">our products</a> and <a href="#/services">our services</p>
</div>
<script>
window.addEventListener('hashchange', function goToPage() {
  // this function loads different content based on the current URL fragment
  const pageToLoad = window.location.hash.slice(1); // URL fragment
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
});
</script>

Чтобы у робота Googlebot был доступ к URL ссылок, рекомендуем реализовать History API.

<nav>
  <ul>
    <li><a href="/products">Our products</a></li>
    <li><a href="/services">Our services</a></li>
  </ul>
</nav>

<h1>Welcome to example.com!</h1>
<div id="placeholder">
  <p>Learn more about <a href="/products">our products</a> and <a href="/services">our services</p>
</div>
<script>
function goToPage(event) {
  event.preventDefault(); // stop the browser from navigating to the destination URL.
  const hrefUrl = event.target.getAttribute('href');
  const pageToLoad = hrefUrl.slice(1); // remove the leading slash
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
  window.history.pushState({}, window.title, hrefUrl) // Update URL as well as browser history.
}

// Enable client-side routing for all links on the page
document.querySelectorAll('a').forEach(link => link.addEventListener('click', goToPage));

</script>

Соблюдайте осторожность при работе с метатегами robots

Роботу Googlebot можно запретить индексировать определенную страницу или последующие ссылки с помощью метатега robots. Например, Googlebot не будет обрабатывать страницу, если в ее верхней части добавить следующий тег:

<!-- Googlebot won't index this page or follow links on this page -->
<meta name="robots" content="noindex, nofollow">

Чтобы добавить на страницу метатег robots или изменить его, можно использовать JavaScript. В примере ниже показано, как запретить индексирование страницы в случаях, когда запрос API не возвращает контент.

fetch('/api/products/' + productId)
  .then(function (response) { return response.json(); })
  .then(function (apiResponse) {
    if (apiResponse.isError) {
      // get the robots meta tag
      var metaRobots = document.querySelector('meta[name="robots"]');
      // if there was no robots meta tag, add one
      if (!metaRobots) {
        metaRobots = document.createElement('meta');
        metaRobots.setAttribute('name', 'robots');
        document.head.appendChild(metaRobots);
      }
      // tell Googlebot to exclude this page from the index
      metaRobots.setAttribute('content', 'noindex');
      // display an error message to the user
      errorMsg.textContent = 'This product is no longer available';
      return;
    }
    // display product information
    // ...
  });
    

Если Googlebot обнаруживает атрибут noindex в метатеге robots до обработки кода JavaScript, отрисовка и сканирование страницы не выполняется.

Применяйте длительное кеширование

Чтобы сократить число сетевых запросов и потребление ресурсов, робот Googlebot активно использует кешированный контент. WRS (Web Rendering Service) может игнорировать заголовки кеширования и вследствие этого иногда обрабатывать устаревшие ресурсы JavaScript или CSS. Во избежание этой проблемы можно включать в название файла цифровой отпечаток контента, например так: main.2bb85551.js. Цифровой отпечаток определяется контентом файла, поэтому при каждом обновлении создается новое название файла. Подробнее о стратегиях долгосрочного кеширования

Используйте структурированные данные

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

Следуйте рекомендациям по работе с веб-компонентами

Робот Googlebot поддерживает веб-компоненты. Когда он выполняет отрисовку страницы, то не учитывает содержимое Shadow DOM и Light DOM, т. е. ему доступен только контент, который становится видимым после отрисовки HTML. Узнать о том, как Google интерпретирует контент после его отрисовки, можно с помощью проверки оптимизации для мобильных устройств или инструмента проверки URL в сервисе Search Console.

Если контент не виден после того, как выполнена отрисовка HTML-кода, Googlebot не сможет включить его в индекс.

В примере ниже создается веб-компонент, который отрисовывает свой контент Light DOM внутри контента Shadow DOM. Проверить, виден ли контент обоих этих типов после процедуры отрисовки HTML, можно с помощью элемента Slot.

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
      let p = document.createElement('p');
      p.innerHTML = 'Hello World, this is shadow DOM content. Here comes the light DOM: <slot></slot>';
      this.shadowRoot.appendChild(p);
    }
  }

  window.customElements.define('my-component', MyComponent);
</script>

<my-component>
  <p>This is light DOM content. It's projected into the shadow DOM.</p>
  <p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>
            

Googlebot проиндексирует этот контент после его отрисовки:

<my-component>
  Hello World, this is shadow DOM content. Here comes the light DOM:
  <p>This is light DOM content. It's projected into the shadow DOM<p>
  <p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>
    

Отложенная загрузка изображений

Изображения могут требовать высокой пропускной способности и снижать скорость загрузки ресурсов. Мы рекомендуем применять отложенную загрузку, чтобы графические файлы скачивались только в тот момент, когда их вот-вот увидит пользователь. Чтобы оптимизировать отложенную загрузку для поисковых систем, следуйте специальным рекомендациям.