Vue.js SEO-Friendly SPA: пример, инструменты и пример

1. Общие SEO советы
2. → Метатеги 🏷️
3. → Мобильная оптимизация 📱
4. → HTTPS 🛡️
5. → Скорость страницы 🚀
6. → Карта сайта 🗺️
7. → Создание ссылок ⛓️
8. Специфические проблемы Vue.js SPA SEO
9. Рендеринг на стороне сервера
10. Предварительная визуализация
11. Vue.js SEO технический пример с использованием предварительной визуализации
12. 1. Установка prerender-spa-плагина
13. 2. Настройка Vue.js для prerender
14. 3. Создание вашего SEO-дружественного сайта Vue.js
15. Живая демоверсия, репозиторий Github и видеоурок
16. Заключительные мысли

В спешке? Пропустить Vue.js учебник по предварительной обработке или же живое демо ,

Знаете ли вы о неудачной истории JavaScript Hulu?

Еще в 2016 году онлайн-сервис потокового видео испытал Падение видимости 56% из-за плохой обработки JS ,

Кошмар, без бизнеса не хочет пройти.

Чтобы избежать таких бедствий, вы должны знать, что вы делаете при работе с современными JavaScript-фреймворками.

Здесь, в Snipcart, мы любим Vue.js , но полностью осведомлены о проблемах SEO с приложением на одной странице Vue.js.

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

Я пройду через:

• Общие советы по SEO, которые вы всегда должны применять.
• Специфические проблемы Vue.js SPA SEO.
• Инструменты, чтобы исправить их с помощью сервера рендеринга и предварительной визуализации.
• Технический пример SEO Vue.js с использованием prerender-spa-plugin.

Это полностью обновленная версия нашего SEO-ресурса Vue.js. За оригинальной версией последовали две другие статьи о проблемах SEO в рамках JS, для реакции , а также угловатый , Есть также видео версия этого контента, которую вы можете найти на конец этого поста.

Общие SEO советы

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

Этот короткий список вдохновлен некоторыми из крупнейших игроков SEO, таких как Moz, Backlinko и Ahrefs. Я добавил ссылки на их ресурсы, если вы хотите копать глубже.

→ Метатеги 🏷️

Мета-теги - это низко висящие фрукты. Они позволяют вам показывать поисковым системам именно то, о чем ваш контент.

Однако не все теги рождаются равными. Вы должны сосредоточить свою энергию только на нескольких из них, а именно:

• Тип мета контента - Должен присутствовать на каждой странице, объявляет ваш набор символов для страницы.
• Заголовок - выберите уникальный заголовок, который привлекает внимание искателей при точном описании содержимого страницы. Держите это сжатым!
• Мета-описание - это должно убедить посетителей SERP (Страница результатов поисковой системы) нажать на вашу ссылку, чтобы найти ответы на свои конкретные исследовательские задачи.
• Viewport - необходим для хорошего мобильного опыта.

Учить больше: SEO мета-теги Моз.

вя-мета является надежным инструментом для управления метаинформацией страницы в компонентах Vue 2.0.

Социальные теги также могут оказать существенное влияние на SEO, поскольку они помогают распространять ваш контент на социальных платформах, тем самым увеличивая ваши социальные сигналы SEO. Существуют специальные теги для всех крупных платформ (Facebook, Twitter, Pinterest, Google+).

Учить больше: Обязательные социальные мета-теги для Twitter, Google+, Facebook и т. Д. Моз.

→ Мобильная оптимизация 📱

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

Учить больше: Мобильный SEO: полное руководство Бэклинко.

NativeScript кросс-плататор Vue.js мобильных приложений.

→ HTTPS 🛡️

Отсутствие сертификата HTTPS или неработающая конфигурация могут оштрафовать ваш сайт. Разве не понятно, что поисковые системы в конце концов склонны выдвигать сайты, которым доверяют и которые сертифицированы?

Даже если бы это было не для SEO, вы, вероятно, захотите предложить платформу, максимально безопасную для ваших пользователей. Так что нет причин не соответствовать этому критерию!

Учить больше: HTTP против HTTPS для SEO: что нужно знать, чтобы остаться в благодати Google от Ahrefs.

→ Скорость страницы 🚀

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

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

Учить больше: SEO на месте: скорость страницы Моз.

→ Карта сайта 🗺️

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

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

Учить больше: XML Sitemaps: наиболее неправильно понятый инструмент в наборе инструментов SEO Моз.

Вы можете создать sitemap.xml конфигурация vue-router ,

→ Создание ссылок ⛓️

Создание авторитета вашего домена остается ключевой тактикой SEO. Как Google узнает, что вы стали авторитетным ресурсом? Наличие других соответствующих доменов, ссылающихся на ваш.

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

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

Учить больше: Создание ссылок для SEO: полное руководство Бэклинко.

Специфические проблемы Vue.js SPA SEO

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

Хотя это визуально отличная работа, в идеале она не настроена на SEO. Это полный SPA, который поисковым системам может быть трудно сканировать и индексировать.

Это почему?

Одностраничное приложение динамически добавляет контент на страницы, что имеет свои преимущества, но приносит две существенные проблемы:

1. Мы действительно не знаем, в какой степени Google может сканировать и корректно отображать JS . Уже несколько лет они говорят, что роботы Google способны на это. Однако за этими утверждениями всегда следует «но» или два.
2. Google не единственная поисковая система там . Если что-то все еще шатко на его стороне, мы точно знаем, что другие игроки там еще не сканируют JS, таким образом, не сталкиваясь с фактическим содержанием страницы.

Так что нет никакого способа обойти это. Если вы хотите убедиться, что ваш веб-сайт / приложение Vue.js входит в список поисковой выдачи, вы должны принять меры.

Ваши варианты?

Рендеринг на стороне сервера

При настройке SSR логика рендеринга выполняется непосредственно в бэкэнде, в среде Node.js. HTML-представления затем возвращаются клиенту, готовые для обслуживания поисковыми роботами.

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

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

Предварительная визуализация

Однако иногда рендеринг на стороне сервера может показаться излишним, как в случае с моей демонстрацией. Для небольшого СПА, содержащего всего несколько страниц, предварительный рендеринг отлично подойдет. Тем более, если ваша единственная забота - это SEO.

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

• Prerender.io - Совместим со всеми наиболее популярными средами JS, включая Vue.js.
• PreRender-спа-плагин - Плагин веб-пакета, который скомпилирует ваши страницы в статические. Делает весь контент доступным в источнике, и индексация на одном дыхании.

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

Vue.js SEO технический пример с использованием предварительной визуализации

Время исправить блог Vue.js, показанный ранее. С помощью PreRender-спа-плагин , У меня будет Vue.js SPA, который в хороших благодать Google в кратчайшие сроки.

Предпосылки

• Базовые знания Vue.js
• Установки Node.js & npm

1. Установка prerender-spa-плагина

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

Начните с установки плагина из npm.

npm установить prerender-spa-плагин

Затем откройте файл build / build.js. Там вы найдете нестандартные вещи для производственной сборки. Вам нужно будет импортировать плагин и добавить эти строки вверху файла:

// /build/build.js const PrerenderSPAPlugin = require ('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

Почему PrerenderSPAPlugin.PuppeteerRenderer? Потому что вам нужно настроить визуализатор. Вам нужно ввести некоторые данные, чтобы приложение знало, когда оно будет отображаться. Существуют такие вещи, как комментарии Disqus, которые вы не сможете предварительно отобразить.

В 100% SEO-ориентированном приложении предпочтительнее использовать эти комментарии в качестве контента на ваших страницах. Если вы работаете с генератором статического сайта, вы должны рассмотреть Staticman для статического пользовательского контента.

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

Прочитайте файл feed.json и создайте ваши маршруты:

// /build/build.js const fileContent = fs.readFileSync (path.resolve (__dirname, '..', 'static', 'api', 'feed.json')); const feed = JSON.parse (fileContent); const prenderedRoutes = feed.results.map (x => `/ read / $ {x.id}`); prenderedRoutes.unshift ( '/');

Добавьте плагины в конфигурацию веб-пакета:

// /build/build.js webpackConfig.plugins.push (новый PrerenderSPAPlugin ({staticDir: path.resolve (__dirname, '..', 'dist')), маршруты: prenderedRoutes, средство визуализации: новый модуль визуализации ({injectProperty: '__PRERENDER_INJED) ', inject: {prerendered: true}, renderAfterDocumentEvent:' app.rendered '})}));

У вас будет доступ к переменной окна .__ PRERENDER_INJECTED.prerendered, когда сайт выполняет предварительную визуализацию. Это будет полезно для исключения контента, который вы не хотите предварительно отображать.

Вам также нужно указать ожидание события app.rendered.

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

2. Настройка Vue.js для prerender

Затем вам нужно будет внести некоторые незначительные изменения в некоторые компоненты. Для этого я изменил способ запуска Pace. Я избавился от файла startup.cs и поместил все в main.js.

Откройте файл main.js и измените порядок включения компонентов приложения:

// /main.js new Vue ({router, render: h => h (App), mount () {Pace.start () Pace.on ('hide', () => {document.dispatchEvent (new Event ('app.rendered'));})}}). $ mount ('# app')

Как только ваш основной компонент смонтирован, запустите Pace и отправьте событие app.rendered, когда начальная загрузка будет завершена.

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

Откройте файл BlogPost.vue, в который вы добавите компонент Disqus.

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

Обновите метод showComments следующим образом:

// /BlogPost.vue showComments () {// Это внедряется prerender-spa-plugin во время сборки, мы не передаем комментарии disqus. if (window .__ PRERENDER_INJECTED && window .__ PRERENDER_INJECTED.prerendered) {return; } setTimeout (() => {this.commentsReady = true}, 1000)}

3. Создание вашего SEO-дружественного сайта Vue.js

Теперь вы готовы построить свой сайт. В вашем терминале используйте эту команду:

npm run build

Затем, если вы посмотрите на папку dist, вы должны увидеть все записи в папке read. Статический HTML-файл был создан для каждого сообщения:

Это оно! Насколько легко это было, верно?

Живая демоверсия, репозиторий Github и видеоурок

Посмотреть демо Вот

Посмотреть репозиторий GitHub Вот

Для наглядного представления этого контента:

Заключительные мысли

prerender-spa-plugin - это аккуратный плагин. Это легко настроить и достаточно гибко, чтобы обрабатывать асинхронные сценарии использования, подобные тому, который мы использовали в Pace.

Я потратил около 2 часов, чтобы выяснить, как соединить все эти вещи вместе и обновить наше первоначальное приложение для поддержки предварительного рендеринга.

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

Если вам понравился этот пост, пожалуйста, уделите секунду поделиться этим в твиттере , Есть комментарии, вопросы? Хит раздел ниже!

Похожие

Комментарии