Начните искать ключевые слова
Используйте Serpstat, чтобы находить лучшие ключи
Как найти ошибки на страницах с JavaScript:
в Аудите сайта теперь доступен рендеринг JS
в Аудите сайта теперь доступен рендеринг JS
Совсем недавно у нас вышло два крутых обновления: мы покрыли API модуль «Аудит сайта» и выпустили инструмент «Пересечение доноров» для поиска новых источников ссылок. Не устали еще от хороших новостей? Тогда я поделюсь с вами еще одной фишкой Serpstat — рендеринг JS в Аудите.
Раньше оптимизаторы не могли проверить страницы с JS-скриптами на наличие ошибок нашим Аудитом, поскольку он не «видел» контент на них. Теперь же инструмент «умеет» рендерить JS-страницы и проверять их на ошибки. Подробнее об обновлении и том, зачем оно нужно, читайте ниже.
Раньше оптимизаторы не могли проверить страницы с JS-скриптами на наличие ошибок нашим Аудитом, поскольку он не «видел» контент на них. Теперь же инструмент «умеет» рендерить JS-страницы и проверять их на ошибки. Подробнее об обновлении и том, зачем оно нужно, читайте ниже.
Что такое рендеринг?
Перед тем как говорить о новой функции Аудита, давайте пробежимся по тому, как сам Google индексирует контент страниц, который прячется в JS-скриптах.
Рендеринг JavaScript — это создание HTML-слепка страницы, который учитывает изменения, внесенные JavaScript.
Небольшая предыстория. Раньше краулеры поисковика сканировали и индексировали только контент, который передавался в статическом исходном коде HTML. Сегодня же многие сайты используют JavaScript-фреймворки и библиотеки (Angular, React, Vue.js и Polymer).
Сайты, написанные на JS не отдают контент страницы сервером. Контент грузится с помощью JS в браузере пользователя. Пример:
Вот главная страница Serpstat, которая использует скрипты на React. Что видит пользователь:
Рендеринг JavaScript — это создание HTML-слепка страницы, который учитывает изменения, внесенные JavaScript.
Небольшая предыстория. Раньше краулеры поисковика сканировали и индексировали только контент, который передавался в статическом исходном коде HTML. Сегодня же многие сайты используют JavaScript-фреймворки и библиотеки (Angular, React, Vue.js и Polymer).
Сайты, написанные на JS не отдают контент страницы сервером. Контент грузится с помощью JS в браузере пользователя. Пример:
Вот главная страница Serpstat, которая использует скрипты на React. Что видит пользователь:
Как видно из второго скриншота, в исходном коде страницы нет контента, который видит пользователь на странице.
Поэтому реальность такова, что «творение разработчиков» не всегда можно адаптировать под требования поисковика. Хотя Google заявляет, что поисковый робот хорош в рендеринге JavaScript, действительное положение дел несколько отличается. И вот почему:
Поэтому реальность такова, что «творение разработчиков» не всегда можно адаптировать под требования поисковика. Хотя Google заявляет, что поисковый робот хорош в рендеринге JavaScript, действительное положение дел несколько отличается. И вот почему:
Что происходит в коде:
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 в Аудите одной страницы.
Однако у этого метода есть и минусы, если вы хотите проверить свой сайт на наличие ошибок, то многие краулеры не справятся с этой задачей, так как не будут находить метатеги из исходного кода сервера. Для решения этой задачи как раз и подойдет Рендеринг JS в Аудите одной страницы.
Вместо выводов
Прелесть этой функции в том, что ее не нужно подключать дополнительно, она доступна всем сразу же. Поэтому нужно совершить всего несколько простых действий:
1
Перейти на дашборд Аудитов страниц.
2
Создать новый проект.
3
Удивиться, что ничего дополнительно запускать не нужно :D
4
Получить результат.
Благодаря новой фиче Аудита сайта SEO-специалисты смогут сканировать сайт с учетом изменений, которые внесены в код JavaScript-элементами. Это поможет избегать серьезных ошибок, препятствующих ранжированию, которые ранее невозможно было выявить.
Если у вас остались вопросы, не стесняйтесь задавать их в онлайн-чате.
Serpstat — набор инструментов для поискового маркетинга!
Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.
Набор инструментов для экономии времени на выполнение SEO-задач.
Мнение авторов гостевого поста может не совпадать с позицией редакции и специалистов компании Serpstat.
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Рекомендуемые статьи
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити :)
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.