Vue.js и SEO: как оптимизировать реактивные сайты для поисковых систем и ботов

Современные JavaScript-фреймворки (такие как React, Vue.js и Angular) облегчают создание сайтов. Но как фреймворки влияют на показатели SEO?

В этой статье специалисты компании ДСТ Глобал расскажут об опыте использования Vue.js и его влиянии на поисковую оптимизацию веб-страниц. Но большая часть изложенной информации будет актуальна и для других фреймворков.

Корни проблемы

Как работает индексация

Чтобы Google проиндексировал сайт, его должен просканировать Googlebot, пройдя по ссылкам на каждой странице. Поисковый робот также ищет на сайтах специальные файлы Sitemap XML, чтобы получить корректную информацию о структуре ресурса.

Немного истории

Еще несколько лет назад Google индексировал весь контент сайтов. Но, кроме того, который формировался с помощью Java Script.

С точки зрения SEO было очевидно, что важные ссылки и контент не следует прописывать с помощью JavaScript. Ведь Google не сможет их проиндексировать. А также могло повлечь за собой поисковые санкции. Для поисковика это выглядело так, будто владелец сайта пытается предоставить пользователям скрытую с помощью JS информацию. Google всегда предостерегал от этой практики.

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

Затем, учитывая резкий рост популярности AJAX как средства доставки динамического контента на сайты, Google предложил «схему сканирования AJAX». Но она была слишком сложная, потому что до появления Node.js требовалось, по крайней мере, частично дублировать одну и ту же логику рендеринга на двух разных языках программирования: JavaScript для фронтенда и PHP, Java, Python, Ruby для бэкенда.

Это называется рендеринг на стороне сервера. Из-за него обслуживание контента становится проблематичным. Если внести изменения в способ рендеринга контента на фронтенде, придется дублировать эти изменения и на бэкенде.

Чтобы избежать этого, можно выполнить парсинг собственного сайта с помощью браузера (выполняющего JavaScript) сохранить результаты на своем сервере и передать их Googlebot. Этот процесс похож на современный предварительный рендеринг.

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

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

Как Google на самом деле индексирует страницы, созданные с помощью frontend-фреймворков?

Эксперимент

Чтобы увидеть, как Google на самом деле индексирует сайты, созданные с помощью frontend-фреймворков, проведем небольшой эксперимент.

Мы создали небольшой сайт на основе Vue.js. При этом разные части текста рендерил по-разному:

Размещенный в статическом HTML за пределами основного контейнера Vue.js.

Часть текста рендерится в Vue.js. Контент содержится в переменных, которые определены в объекте data.

Некоторый текст рендерится в Vue.js из объекта data, но с задержкой в 300 мс;

Биографии персонажей взяты из набора API, которые я специально создал с помощью Sandbox. Я предположил, что Google выполнит код сайта и через некоторое время остановится, чтобы сделать снимок текущего состояния страницы. Поэтому я установил возрастающую задержку в ответе для каждого веб-сервиса: для первого 0 мс, для второго 300 мс, для третьего 600 мс и так далее до задержки в 2700 мс.

Биографии каждого персонажа сокращены и содержат ссылку на подстраницу, которая доступна только через Vue.js. URL-адреса генерируются Vue.js с использованием API истории.

Мы предположили, что они не будут проиндексированы. Так как это некорректные ссылки, которые рендерятся на стороне сервера. Поэтому Google не сможет направлять пользователей по этим ссылкам напрямую.

Мы опубликовали этот небольшой тестовый сайт на Github и запустил индексирование – взгляните.

Результаты

Ниже представлены результаты эксперимента (относительно домашней страницы):

Google индексирует контент, который уже находится в статическом HTML-контенте.

Google всегда индексирует контент, сгенерированный с помощью Vue в режиме реального времени.

Google также индексирует контент, сгенерированный Vue, но рендеринг которого выполняется через 300 мс.

Google может индексировать контент, предоставляемый веб-сервисом с задержкой, но не всегда. Контент, рендеринг которого выполняется быстро, индексируется в большинстве случаев. Это зависит от того, какой бюджет рендеринга Google предоставляет для каждой страницы и сайта.

Его значение может сильно отличаться в зависимости от рейтинга сайта и текущего состояния очереди рендеринга Googlebot. Поэтому нельзя полагаться на индексацию контента, поступающего из внешних веб-сервисов.

Подстраницы (не доступные в виде прямой ссылки) не индексируются должным образом.

Получается, что Google индексирует динамически генерируемый контент, даже если он поступает из внешнего веб-сервиса. Но если поставляется быстро.

Конкурентное SEO

Но какой сайт, скорее всего, предпочтет Google: со статическим контентом или с динамически сгенерированным?

Исходя из личного опыта могу сказать, что динамический контент может занять верхние позиции в поисковой выдаче. Я создал сайт для новой модели авто с помощью Vue.js.

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

Анимированный текст

Google не индексирует анимированный текст. На сайте компании Rabbit Hole Consulting много текстовых анимаций, которые появляются по мере прокручивания страницы вниз. Поэтому текст разбит на несколько частей.

Тексты, размещенные на главной странице сайта, не предназначены для индексации. Так как они не оптимизированы для SEO. В них отсутствуют технические термины и ключевые слова. Текст загружается динамически, когда пользователь прокручивает страницу.

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

Текст, размещенный в футере, индексируется и отображается в результатах поиска, даже если пользователи не видят его сразу после перехода на сайт. Это еще раз подтверждает, что контент индексируется, даже если пользователь не увидит его на странице сразу. Но при условии, что будет выполнен рендеринг HTML без длительной задержки.

Как насчет предварительного рендеринга?

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

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

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

Другие соображения

Совместимость

До недавнего времени Googlebot использовал старую (41) версию браузерного движка Chromium. Из-за этого Google некорректно рендерил некоторые новые функции JavaScript и CSS (например, IntersectionObserver, синтаксис ES6 и т.д.).

Недавно Google объявил, что Googlebot теперь использует актуальную версию Chromium. То, что Google использовал Chromium 41, имело большое значение для сайтов, которые из-за этого не учитывали совместимость с Internet Explorer 11 и другими устаревшими браузерами.

Здесь приводится сравнение поддержки функций в Chromium 41 и Chromium 74. Но для обеспечения кроссбраузерности лучше использовать полифилы.

Ошибки JavaScript

Следует избегать серьезных ошибок в JavaScript, которые могут привести к прекращению рендеринга контента. Если в JavaScript будет допущена ошибка, которая препятствует загрузке контента, Google не сможет проиндексировать его.

Имейте в виду, что ошибки Javascript могут возникать из-за возникновения непредсказуемых ситуаций. Например, в случае неправильной обработки ошибок в ответах API.

Во время тестирования лучше использовать платформы для проверки ошибок в режиме реального времени (Sentry или LogRocket). Они предупредят о любой критичной ошибке, которую не получится обнаружить при модульном или ручном тестировании.

Другие поисковые системы

Другие поисковые системы не работают с динамическим контентом так же хорошо, как Google. Похоже, что Bing, DuckDuckGo и Baidu вообще не индексирует динамический контент. Поэтому необходимо настроить предварительный рендеринг.

Другие роботы

Помните, что сайт могут посещать и другие поисковые боты. Основные из них – это Twitter, Facebook и другие роботы социальных сетей, которым нужно получить метаинформацию о страницах сайта. Эти роботы не будут индексировать динамический контент, а будут отображать только метаинформацию, найденную в статическом HTML.

Подстраницы

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

Заключение

На основе результатов проведенных экспериментов я пришел к следующим выводам:

Если ориентироваться только на Google, то не обязательно использовать предварительный рендеринг для полной индексации вашего сайта.

Не полагайтесь на сторонние веб-службы в вопросе индексации контента. Особенно если они не отвечают на поступающие запросы действительно быстро.

Тот контент, который вы мгновенно вставляете в свой HTML, используя рендеринг Vue.js, успешно индексируется. Но не следует использовать анимированный текст.

Убедитесь, что JavaScript- код тщательно протестирован на ошибки. Так как они могут привести к тому, что целые страницы, разделы или весь сайт не будет проиндексирован.

Если на разных страницах нужны разные описания и превью изображений для социальных сетей, эту проблему нужно решить либо на стороне сервера или путем компиляции статических страниц для каждого URL-адреса.

Если нужно, чтобы сайт отображался не только в Google, но и в других поисковых системах, то нужно использовать предварительный рендеринг.

Полный комплекс услуг по SEO-продвижению Вы всегда можете заказать в Веб-студии DST Global (dstglobal.ru), наши специалисты максимально эффективно и качественно выведут Ваш ресурс в ТОП поисковых систем.