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. В них отсутствуют технические термины и ключевые слова. Текст загружается динамически, когда посетитель прокручивает страницу.

Vue.js и 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-код для каждой из них.

Заключение

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

  1. Если ориентироваться только на Google, то не обязательно использовать предварительный рендеринг для полной индексации веб-сайта.
  2. Не полагайтесь на сторонние веб-службы в вопросе индексации контента. Особенно если они не отвечают на поступающие запросы действительно быстро.
  3. Тот содержимое, который вы мгновенно вставляете в HTML, используя рендеринг Vue.js, успешно индексируется. Но не следует использовать анимированный текст.
  4. Убедитесь, что JavaScript- программный код тщательно протестирован на ошибки. Поскольку они могут привести к тому, что целые страницы, разделы или весь веб-сайт не будет проиндексирован.
  5. Если на различных страницах нужны различные описания и превью картинок для социальных сетей, эту проблему необходимо решить либо на стороне сервера или путем компиляции статических страниц для каждого URL-адреса.
  6. Если необходимо, чтобы веб-сайт выводился не только в Google, но и в иных поисковых системах, то необходимо использовать предварительный рендеринг.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *