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

Vue.​js ー это популярный JavaScript фреймворк, который используется для разработки реактивных веб-приложений.​ Однако, такие сайты могут столкнуться с проблемой оптимизации для поисковых систем и ботов;

Проблема с индексацией

Одной из основных проблем при использовании Vue.​js является то, что содержимое компонентов генерируется на стороне клиента с использованием JavaScript.​ Это означает, что поисковые системы и боты, которые не исполняют JavaScript, не смогут проиндексировать такие страницы.​ Как результат, сайт может получить меньше органического трафика.​

Решение ― SSR (Server-Side Rendering)

Один из способов решить проблему с индексацией ー это использовать SSR.​ SSR предполагает предварительную генерацию содержимого на стороне сервера, а не на стороне клиента таким образом, позволяя поисковым системам и ботам видеть полноценное содержимое страницы.​

Vue.js предлагает инструменты для реализации SSR.​ Вы можете использовать фреймворк Nuxt.​js, который облегчает разработку Vue.​js приложений на сервере, предварительно генерируя HTML для каждой страницы.​ Таким образом, загружаемая страница будет содержать полное содержимое и будет индексироваться поисковыми системами.​

Установка метатегов и отображение контента

Когда используется SSR, вы также имеете возможность управлять метатегами, которые отображаются в поисковых результатах.​ Вы можете задать метатеги для каждой страницы, указывая заголовок, описание и другую мета информацию.​

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

Асинхронная загрузка компонентов

Vue.​js также поддерживает асинхронную загрузку компонентов. Это позволяет разделить приложение на независимые модули, которые могут загружаться по мере необходимости.​ Таким образом, вы можете улучшить производительность и время загрузки страницы.​

Одна из техник асинхронной загрузки компонентов в Vue.​js ― это использование динамического импорта.​ Вы можете использовать функцию import для загрузки компонента только в тот момент, когда он действительно необходим.​ Это помогает уменьшить размер инициализационого бандла, что приводит к более быстрой загрузке страницы.​

Оптимизация производительности

Помимо перечисленных выше способов оптимизации для поисковых систем и ботов, важно также уделить внимание оптимизации производительности вашего Vue.​js приложения.​ Быстрая загрузка страницы и плавная работа приложения ― это важные факторы для повышения позиции в поисковой выдаче.

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

Также рекомендуется использовать Vue Devtools для анализа и профилирования вашего приложения, чтобы выявить узкие места и оптимизировать его производительность.​

Vue.​js является мощным фреймворком для разработки реактивных веб-приложений, но требует особых усилий для оптимизации для поисковых систем и ботов.​ Использование SSR, установка метатегов, асинхронная загрузка компонентов и оптимизация производительности помогут улучшить видимость вашего сайта в результатах поиска и опыт пользователей.​

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

В этой статье я расскажу вам о своем опыте работы с Vue.js и его влиянии на SEO. Но многое из того, что я пишу, будет иметь значение и для других фреймворков.

Основная причина

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

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

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

Несколько лет назад 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 на самом деле индексирует страницы, созданные с помощью интерфейсных фреймворков?

Эксперимент

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

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

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

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

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

Результаты

Ниже представлены результаты эксперимента (относительно домашней страницы): Google индексирует контент, который уже находится в статическом HTML контенте.Google CAN Контент индекса, предоставленный сетевой службой с задержкой, но не всегда. Оказанный контент будет быстро указан в большинстве случаев. Это зависит от того, как бюджет рендеринга Google предоставляет для каждой страницы и сайта. Это значение может значительно варьироваться в зависимости от ранжирования сайта и текущего состояния очереди рендеринга GoogleBot. Следовательно, вы не можете рассчитывать на содержание индексации от внешних веб-сайтов. Содержание страницы (к которому нет прямой справки), не указан правильно. Оказывается, что индексы Google динамически сгенерировали от внешних интернет-сайтов. Но если это приходит быстро.

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

Но на какую страницу есть лучший шанс на пользу Google: со статическим контентом или с динамически сгенерированным контентом?

Я могу сказать вам из личного опыта, который динамический контент может промыть в рейтинге поисковой системы Forefront. Я создал веб-сайт для новой модели автомобиля, используя Vue.js.

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

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

Индексы Google анимированный текст. COLLIP COLE CONSULTING имеет много текстовых анимаций, которые появляются вместе со стороны прокрутки вниз. Следовательно, текст разбивается на несколько частей.

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

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

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

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

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

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

До недавнего времени , Googlebot не использовал старую версию (41) двигателя браузера хрома. По этой причине, Google неправильно оказали некоторые новые функции JavaScript и CSS (например IntersectionObserver, синтаксис ES6 и т.д.). Недавно Google объявила о , который Googlebot теперь использует текущую версию Хром. Тот факт, что Google использовал Хром 41 сделал большую разницу для веба-сайтов, которые по этой причине не принимать во внимание совместимости с Internet Explorer 11 и другими старыми браузерами. Вот сравнение функции поддержка хрома 41 и хрома 74. Тем не менее, для поддержки между браузерами, то лучше использовать polyfiles .

Ошибки JavaScript

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

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

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

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

Другие поисковые системы сделать не иметь дело с содержанием Dynamic, а также Google. Bing, DuckDuckGo и Baidu, кажется, не индексировать контент динамического вообще. Вот почему вы должны установить предварительную визуализацию.

Другие Боты

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

Страница

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

Выводы

Я вытащил следующие выводы из моих экспериментов:  Если смотреть только на Google, а затем не обязательно использовать пред- Rendering , чтобы полностью проиндексировать ваш сайт. не полагайтесь на услуги третьих лиц для индексирования контента. Особенно, если они не реагируют быстро. Intrepit, что вы сразу же вставить в ваш HTML, с использованием vue.js рендеринга, будет индексироваться. Но вы не должны использовать анимированный текст. Убедитесь, что JavaScript — Код тщательно проверяется на наличие ошибок . Если разные страницы нужны разные описания и проверки для социальных медиа, то это должно быть исправлено или на стороне сервера, или путем компиляции статической страницы для каждого URL. Если вы хотите, чтобы ваш сайт появится не только Google, но и в других поисковых системах вам необходимо применить для предварительной визуализации.