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

все о сети

Последние фреймы JavaScript (напримерРеакция., Vue.js иУгол) облегчают создание веб-сайтов.Но как коробки влияют на эффективность SEO??

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

Корень проблемы.

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

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

Небольшая история.

Еще несколько лет назад Google индексировал все содержимое сайта. Однако это исключает все, что создано с помощью сценариев Java.

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

Google мог читать сайты JavaScript в течение длительного времени. Однако он не проиндексировал этот контент.

Затем, учитывая растущую популярность AJAX как средства предоставления динамического контента для веб-сайтов, Google предложилДиаграмма сканирования AJAX.'Но это было очень сложно, потому что до появления Node.js нам нужна была хотя бы частичная итерация одной и той же разумной производительности на двух разных языках программирования, поэтому front-end и PHP, Java, Python и Ruby для BackEnd. JavaScript был необходим.

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

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

Однако.2015. Роботы поисковых систем научились создавать динамические страницы на основе JavaScript, похожие на современные рекламные проспекты. Впоследствии Google стал рекомендовать все сайты с динамическим контентом к обнаружению.

ЧИТАТЬ ЕЩЁ:  15 лучших JavaScript-плагинов календарей и событий в 2021 году

Это означает, что выходы JavaScript индексируются и используются в результатах поиска.

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

Эксперимент.

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

Мы создали небольшой сайт на основе vue.js. Таким образом, различные части текста были атрибутированы по-разному.

Текстовые фрагменты приписываются vue.js.Текстовые фрагменты приписываются vue.js, которые размещаются в статическом HTML вне основного корабля. Содержимое содержится в переменных, определенных в объекте данных. Некоторый текст передается в vue.js из объекта данных, но с задержкой в 300 мс.Песочница.. Мы предполагали, что Google будет запускать код сайта, вскоре останавливаться и получать снимок текущей страницы страниц. Это привело к увеличению задержки ответа для каждой веб-службы. 0 мс для первого, 300 мс для второго, 600 мс для третьего и т.д. До задержки в 2700 миллисекунд.

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

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

Мы опубликовали этот небольшой тестовый сайт на Github и начали его индексировать — иСм..

Результат.

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

Google индексирует контент, который уже есть в HTML Google статический контентВсегда.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 и другими старыми браузерами.

ЧИТАТЬ ЕЩЁ:  SEO SEM SMO и другие типы оптимизации

ЧТО. это сравнение поддержки функций Chromium 41 и Chromium 74. Однако для кроссбраузерной совместимости лучше всего использоватьПолифилы..

Ошибки JavaScript

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

Обратите внимание, что ошибки JavaScript могут возникать в силу непредвиденных обстоятельств. Например, если ошибки ответа API обрабатываются неправильно.

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

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

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

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

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

Рис.

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

Заключение.

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

Если вы сосредоточитесь исключительно на Googleнет необходимости использовать предварительное формирование конверсии для полной индексации сайта.Сторонние веб-сервисы в отношении индексирования контента. Особенно если они не реагируют быстро на поступающие запросы.Они быстро входят в ваш HTML и производительности vue.js, он будет успешно проиндексирован. Однако не используйте движущийся текст.JavaScript-. Код был тщательно протестирован на наличие ошибок. Они могут вызвать индексацию целых страниц, частей или целых сайтов.Различные объяснения иПредварительный просмотр Изображение. Если разные социальные сети требуют разных описаний и предварительных просмотров, это может быть необходимо исправить либо на стороне сервера, либо путем создания статической страницы для каждого URL.Google, а также других поисковых систем.Затем вам нужно будет использовать предварительный портинг.

Оцените статью