Войти Регистрация

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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политикой конфиденциальности

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

Отменить
1196 30 3
Новости Читать 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. Что видит пользователь:
Как видно из второго скриншота, в исходном коде страницы нет контента, который видит пользователь на странице.

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

Персональная демонстрация
Хотите узнать, как с помощью Serpstat найти и устранить ошибки на сайте? Оставьте заявку, и наши специалисты проконсультируют вас по развитию проекта, поделятся учебными материалами и предложат тестовый доступ к Serpstat!

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

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

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

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

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

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

Кейс

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

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

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

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

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

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

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

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

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

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Optional
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов