Vue.js Бразилия - Статьи на английском о Vue.js

1. Другие важные настройки

Одной из наиболее обсуждаемых тем при использовании одностраничных (SPA) приложений и поисковой оптимизации (SEO) является сложность индексации страниц в индексе и заставить ботов распознавать метатеги, которые были динамически изменены с помощью приложения. Javascript.

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

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

Я оставил альтернативные методы и использовал плагин вю головки динамически изменять описание страницы и заголовок на соответствующем маршруте.

Посмотрите этот пример кода: (Обновлен синтаксис v2.0 +)

// компоненты / страницы / contact.vue ... экспорт по умолчанию {// опущен ... head: {title: {inner: 'будет мое удовольствие'}, цель: [{name: 'description', content: '. ..My description ... ', id:' description '}]}} ...

Vue-head предоставляет объект в каждом компоненте, и с его помощью мы можем определить диапазон метатегов, ссылку, заголовок и так далее. В приведенном выше примере мы использовали фиксированную информацию, но эта информация может быть загружена через сервер (API), который также будет работать правильно.

Мы видим, что заголовок страницы был определен:

title: {inner: 'Это будет удовольствие'}

И метатег описания:

meta: {name: [{name: 'description', content: '... My description ...', id: 'description'}}}

При таком доступе к URL-адресу контакта в блоге заголовок и описание будут изменены, что придаст больше смысла контексту, в котором просматривает пользователь.

После того, как все настроено, я отправился на поиски и протестировал несколько возможностей, и одну из них я нашел сам Консоль поиска Google ,

• Перейдите в меню Trace> Search as Google.
• Введите URL, который вы хотите отправить в индекс
• Нажмите кнопку «Поиск и рендеринг»

• Пожалуйста, подождите, пока он не станет доступным, потому что в ходе процесса вы увидите статус ссылки как Ожидающий
• Когда процесс завершится, нажмите кнопку «Отправить в индекс»

Появится следующее окно:

Используйте самые важные страницы, чтобы «отслеживать этот URL и ваши прямые ссылки», это более эффективно, поэтому неудивительно, что Google предлагает только 10 ежемесячных вставок

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

Другие важные настройки

Использовать режим HTML5
Если вы используете Vue.js, вы, вероятно, будете использовать Vue-router , с его помощью вы можете настроить более дружественный режим для URL.

const router = new VueRouter ({history: true})

Узнайте больше на http://router.vuejs.org/en/options.html#history

Файлы Sitemap в вашем приложении необходимы
Правильно структурируйте все ссылки на вашем сайте в sitemap.xml и сделайте его доступным в вашем приложении, он сообщает механизмам все URL-адреса, которые вы хотите проиндексировать.

Вы также можете отправить каждое обновление ссылки, по своему усмотрению Google Search Console

• При доступе зайдите в меню Trace> Sitemaps
• Перейдите к кнопке Добавить / проверить карту сайта
• Добавьте URL, который содержит файл sitemap.xml

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

Vue-head использовался в Vue.js, но в любом другом фреймворке, чистом lib или Javascript, можно изменять метаинформацию страницы.

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

Похожие

Комментарии