7869 66
Обновления Serpstat Читать 7 минут 29 июля 2020

Как найти ошибки на страницах с JavaScript:
в Аудите сайта теперь доступен рендеринг JS

Как найти ошибки на страницах с JavaScript: в Аудите страницы теперь доступен рендеринг JS
Павел Алексеев
Product/Project Manager at Serpstat
Совсем недавно у нас вышло два крутых обновления: мы покрыли API модуль «Аудит сайта» и выпустили инструмент «Пересечение доноров» для поиска новых источников ссылок. Не устали еще от хороших новостей? Тогда я поделюсь с вами еще одной фишкой Serpstat — рендеринг JS в Аудите.

Раньше оптимизаторы не могли проверить страницы с JS-скриптами на наличие ошибок нашим Аудитом, поскольку он не «видел» контент на них. Теперь же инструмент «умеет» рендерить JS-страницы и проверять их на ошибки. Подробнее об обновлении и том, зачем оно нужно, читайте ниже.
Как автоматизировать поиск ошибок на сайте: Аудит сайта теперь доступен в API Serpstat

Что такое рендеринг?

Перед тем как говорить о новой функции Аудита, давайте пробежимся по тому, как сам Google индексирует контент страниц, который прячется в JS-скриптах.

Рендеринг JavaScript — это создание HTML-слепка страницы, который учитывает изменения, внесенные JavaScript.

Небольшая предыстория. Раньше краулеры поисковика сканировали и индексировали только контент, который передавался в статическом исходном коде HTML. Сегодня же многие сайты используют JavaScript-фреймворки и библиотеки (Angular, React, Vue.js и Polymer).

Сайты, написанные на JS не отдают контент страницы сервером. Контент грузится с помощью JS в браузере пользователя. Пример:

Вот главная страница Serpstat, которая использует скрипты на React. Что видит пользователь:
Как найти ошибки на страницах с JavaScript: в Аудите сайта теперь доступен рендеринг JS 16261788425507
Как видно из второго скриншота, в исходном коде страницы нет контента, который видит пользователь на странице.

Поэтому реальность такова, что «творение разработчиков» не всегда можно адаптировать под требования поисковика. Хотя Google заявляет, что поисковый робот хорош в рендеринге JavaScript, действительное положение дел несколько отличается. И вот почему:
Что происходит в коде:
Как найти ошибки на страницах с JavaScript: в Аудите сайта теперь доступен рендеринг JS 16261788425507
1
JavaScript очень чувствителен к ошибкам. Одна ошибка в коде может привести к тому, что Google не сможет отобразить вашу страницу.
2
У Google есть проблемы со сканированием JS-файлов. Разбор, компиляция и запуск JS-файлов занимает очень много времени. В случае веб-сайта, который «кишит» JavaScript, Google Bot должен подождать, пока все шаги компоненты JS-файлов будут выполнены, и только потом он сможет проиндексировать контент.
3
Технические ограничения Google. Есть много современных функций, которые просто недоступны для Google Bot.
Сайты на JavaScript-движках: стоит ли игра свеч? — мнение экспертов
Персональная демонстрация
Оставьте заявку и мы проведем для вас персональную демонстрацию сервиса, предоставим пробный период и предложим комфортные условия для старта использования инструмента.

Почему рендеринг JS в аудите сайта — это круто

Как видим, проблемы со сканированием JavaScript есть даже у Google. Поэтому нам стоило больших усилий научить наш краулер выполнению JS.
Важно: на данный момент функция рендеринга JS есть только в инструменте «Аудит страницы», однако в дальнейшем станет доступна и в модуле «Аудит сайта».

В чем была проблема?

При загрузке страниц с JS-скриптами, в исходном коде нет контента, который находится в них. Когда сервер отдает страницу, он отдает ее с содержанием JS-кода, который будет выполняться в браузере. Только после этого контент появляется. То есть, Аудиту необходимо было получить контент, которого нет на странице. Так как до этого он просто скачивал для проверки исходный код.

Как мы решили проблему?

Теперь во время выполнения аудита, для Аудита страницы мы прогоняем исходный код страницы в эмулированном браузере. В нем JS-код исполняется и мы получаем итоговый результат, со всем контентом страницы, и уже по этому итоговому результату проводится аудит.

Кейс

SEO-специалисты не дадут соврать, что одним из эффективных способов редактирования метатегов является использование Google Tag Manager (GTM). О преимуществах такого метода можно почитать тут (или любая другая понравившаяся тебе ссылка).

Однако у этого метода есть и минусы, если вы хотите проверить свой сайт на наличие ошибок, то многие краулеры не справятся с этой задачей, так как не будут находить метатеги из исходного кода сервера. Для решения этой задачи как раз и подойдет Рендеринг JS в Аудите одной страницы.

Вместо выводов

Прелесть этой функции в том, что ее не нужно подключать дополнительно, она доступна всем сразу же. Поэтому нужно совершить всего несколько простых действий:
1
Перейти на дашборд Аудитов страниц.
2
Создать новый проект.
3
Удивиться, что ничего дополнительно запускать не нужно :D
4
Получить результат.
Как найти ошибки на страницах с JavaScript: в Аудите сайта теперь доступен рендеринг JS 16261788425507
Благодаря новой фиче Аудита сайта SEO-специалисты смогут сканировать сайт с учетом изменений, которые внесены в код JavaScript-элементами. Это поможет избегать серьезных ошибок, препятствующих ранжированию, которые ранее невозможно было выявить.
Если у вас остались вопросы, не стесняйтесь задавать их в онлайн-чате.
Чтобы быть в курсе всех новостей нашего блога подписывайтесь на рассылку Serpstat. А также вступайте в чат любителей Серпстатить и подписывайтесь на наш канал в Telegram.

Serpstat — набор инструментов для поискового маркетинга!

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

Набор инструментов для экономии времени на выполнение SEO-задач.

7 дней бесплатно
Мнение авторов гостевого поста может не совпадать с позицией редакции и специалистов компании Serpstat.

Оцените статью по 5-бальной шкале

4.53 из 5 на основе 17 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Поделитесь статьей с вашими друзьями

Вы уверены?

Знакомство с Serpstat

Узнайте об основных возможностях сервиса удобным способом!

Отправьте заявку и наш специалист предложит вам варианты обучения: персональную демонстрацию, пробный период или материалы для самостоятельного изучения и повышения экспертизы. Все для комфортного начала работы с Serpstat.

Имя

Email

Телефон

Будем рады вашему комментарию
Я принимаю условия Политики конфиденциальности.

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить
Открыть чат технической поддержки
mail pocket flipboard Messenger telegramm