Как провести аудит JavaScript для SEO?

Время для чтения: 3 мин
  • Сентябрь 2, 2019
  • SEO

SEO & Conversion Rate Optimization -
специалист, консультант, team-лид c 2012 года.

В этом посте я покажу, как выполнить простой ручной экспресс-аудит страницы с JavaScript-элементами на предмет проблем с индексаций в поиске (прим.ред: для конкретных элементов страницы).

 

Пункты аудита JavaScript

  1. Визуальный аудит страницы
  2. Аудит исходного кода HTML
  3. Аудит JS через «Просмотр кода элемента»
  4. Сравнение версий: HTML и JS-Rendered
  5. Определение контента по пользовательским событиям

 

Для этого аудита будет использоваться браузер Chrome c встроенными инструментами для разработчиков и расширение для веб-разработчиков .

В качестве примера, анализируется страница товара: https://www.kipling-usa.com/angie-printed-handbag/HB6961.html

На этой странице есть 3 основных элемента контента, которые зависят от JavaScript:

  1. Отзывы
  2. Сопутствующие товары
  3. Изображение товара «Карусель»

 

1. Визуальный аудит страницы

Сразу при первичном визуальном осмотре выделяем на странице:

  • Контент, который требует взаимодействия;
  • Контент, который скрыт по умолчанию;
  • Контент, который использует сторонние инструменты (отзывы и рейтинги);
  • Контент, который использует системы рекомендаций (сопутствующие товары);

Эти элементы далее анализируем в исходном коде страницы. Цель — убедиться, что весь видимый пользователям контент — индексируется.


 

2. Аудит исходного HTML-кода

Первый шаг — отключаем JavaScript, CSS и Cookies в расширении веб-разработчика. Важно определить какие элементы пропадут на странице. На странице нашего примера исчезнут сопутствующие продукты, рейтинги и отзывы. Плюс не работает карусель с просмотром фотографий товара.

Второй шаг — вручную просмотреть исходный HTML-код, в частности H-заголовки, мета-теги и элементы управления сканированием (noindex, canonical и т.д.). Они обязательно должны быть проиндексированы (прим.ред: быть видимыми в исходном коде).

Содержимое, которое пропало после первого шага — не будет проиндексировано поисковой системой. Этот контент должен быть доступен по «Load Event» (или по 5-секундному тайм-ауту), до того времени, когда Google сделает снимок индексируемой страницы.


 

3. Аудит JS через «Просмотр кода элемента»

Включаем JS и CSS, затем обновляем страницу. Кликаем правой кнопкой мыши по любому элементу на странице и выбираем ««Inspect» .

В появившейся панели прокручиваем вверх и кликаем на открывающий тег <HTML>. Кликаем правой кнопкой мышки и выбираем «Copy» -> «Copy outerHTML».

Cкопированный HTML-код эквивалентен тому, что Google фиксирует при сканировании JavaScript.

Этот HTML-код можем скопировать и вставить в другие инструменты, например, в Инструмент тестирования структурированных данных Google. Также можем сохранить его в HTML-файл.

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

В нашем примере обнаружены блоки: «Комментарии» и «Сопутствующие товары». Они индексируются с помощью обхода JavaScript Google. Тем не менее, в коде нет изображений товара в карусели (наверху).


 

4. Сравнение версий: HTML и JS-Rendered

На данном этапе сравниваем содержимое двух «версий» страницы: А) исходный код HTML и Б) рендеринг JS HTML. Они могут содержать различное и иногда противоречивое содержание.

В целом, вторая версия получает приоритет. Важно избегать противоречивых сигналов между этими двумя версиями страниц, например, при рассмотрении элементов управления сканированием, таких как noindex, canonical и rel = next / prev.


 

5. Определение контента по пользовательским событиям

Если оставить «Inspect Element» открытым и покликать на миниатюры изображений товара, то можно увидеть обновление кода в браузере в реальном времени. Это прием демонстрирует, как пользовательские события могут изменять содержимое страницы после загрузки.

Уже во время этого трюка можно понять, что фото подлежат/не подлежат — индексации.

По-умолчанию стоит большое изображение (первое), остальные — в виде миниатюр. Когда пользователь кликает, URL для большого изображения меняется в атрибуте src =, ссылаясь на большую версию 2-го, 3-го или 4-го изображения.

Это ограничение сканирования JavaScript. Большое изображение (прим.ред: не миниатюрное) этих вариантов не индексируется при поиске изображений.

Чтобы эти другие изображения были проиндексированы, на них нужно ссылаться в img src в HTML при первоначальном отображении страницы.

 

Кому и чем могу быть полезен?

SEO-консалтинг на этапе продвижения

Если нужен результат, но не готовы ежемесячно оплачивать опытного SEO-специалиста. 1 раз в 3 месяца - аудит, план действий и надзор. Если есть кому внедрять все рекомендации.

SEO-аудит коммерческого сайта

Если у сайта есть проблемы в поисковом ранжировании: стагнация, ступор. Если нужно разово найти слабые места в SEO-стратегии и получить результат за 1-3 месяца после их исправления.

Конверсионная оптимизация

Если у сайта - трафик от 15 тыс/мес, данные от 6ти мес. Если нужна серьезная CRO-программа с гарантией. Исследования, тесты, ТЗ и выход за 90 дней на новый уровень конверсии трафика.

Конверсионный
аудит

Если у сайта - трафик от 5 тыс/мес, есть данные от 2х месяцев. Если нужен разовый аудит за 7-21 дней со списком рекомендаций по устранению 5-20 узких мест в конверсии.