Улучшите SEO, предварительно представив ваше приложение VueJS с помощью Gitlab-CI

  1. 1. Установите плагин
  2. 3. Настройте Gitlab-CI

Вы, возможно, везде читали, что индексные боты Google теперь могут запускать javascript. Теоретически это означает, что одностраничные приложения, созданные с помощью VueJS или Angular, должны корректно отображаться роботами Google.

Правда немного сложнее.

В поисковой консоли Google есть инструмент под названием Исследовать, например, Google, который показывает вам, как индексирующие боты Google видят ваш сайт.

Вот как выглядит приложение Vue:

Ничего такого. Пустота.

Беглый взгляд на HTML-код, который был прочитан Google, показывает, что приложение VueJS просматривается до того, как оно может отобразить страницу:

<body> <div id = "app"> </ div> </ body>

Здесь есть только базовый тег <div id = "app"> </ div>, и у Vue не было времени заменить его фактическим содержимым страницы.

Время является ключевым фактором здесь.

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

Как вы можете догадаться, SEO для этого приложения не собирается надрать задницу.

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

И потому что мы специализируется на автоматизации программного обеспечения давайте автоматизируем все это с помощью Gitlab-CI!

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

  • происходит во время сборки
  • можно настроить практически без усилий
  • и ноль изменений инфраструктуры

Так почему бы и нет?

Если в вашем приложении есть страницы, которые имеют отношение к SEO, например, целевая страница или документация, предварительный рендеринг является идеальным.

Если вы используете VueJS с веб-пакетом (возможно, сгенерированный вя-кли ), этот учебник для вас.

Мы собираемся использовать PreRender-спа-плагин модуль для заботы о предварительной визуализации определенных маршрутов.

1. Установите плагин

2. Настройте сборку веб-пакета

Откройте build / webpack.prod.conf.js в своем проекте и добавьте следующий код:

const PrerenderSpaPlugin = require ('prerender-spa-plugin') const buildFolder = path.resolve (__dirname, '../dist') const routToPrerender = ['/', '/ about', '/ enterprise'] const webpackConfig = слияние (baseWebpackConfig, {// ... plugins: [// ... new PrerenderSpaPlugin (buildFolder, routToPrerender,),

Измените routToPrerender с маршрутами VueJS, которые вы хотите предварительно отрендерить.

При необходимости измените buildFolder на папку, в которую webpacks помещает ваши собранные файлы (в моем случае это «./dist»)

3. Настройте Gitlab-CI

Откройте файл .gitlab-ci.yml внутри репозитория вашего проекта (или создайте его) и добавьте следующее содержимое ниже.

этапы: - build build: образ: cronobo / node-chrome-headless-puppeteer stage: сценарий сборки: - установка npm - запуск npm build - cp -R ./dist ./public артефакты: пути: - public

Эта стадия сборки просто запускает сборку веб-пакета, копирует сгенерированные файлы (с предварительно обработанными маршрутами в них) из папки ./dist в папку ./public.

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

Единственная хитрость состоит в том, чтобы использовать изображение докера, содержащее хром без головы и кукловода, чтобы управлять им. Мы создали образ докера, который делает именно это: cronobo / узел-хром-безголовый-кукольник ( GitHub )

Теперь этот gitlab-ci.yml только выполняет предварительную визуализацию маршрутов, но вам все равно необходимо впоследствии развернуть приложение. Если вы не знаете, как это сделать, посмотрите на наша статья это охватывает это!

Затем:

  1. Зафиксируйте ваши файлы
  2. Нажмите, чтобы Gitlab
  3. Перейти к поисковой консоли Google
  4. Запросите новое исследование любого из ваших предварительно отрендеренных маршрутов
  5. И наблюдать за результатом!

Зафиксируйте ваши файлы   Нажмите, чтобы Gitlab   Перейти к поисковой консоли Google   Запросите новое исследование любого из ваших предварительно отрендеренных маршрутов   И наблюдать за результатом

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

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

 

Категории

  • Новости

  • Новости



     


    © NFL24.RU | 2011.
    Использование материалов сайта NFL24.ru возможно при ссылке на сайт NFL24.ru (для интернет-изданий обязательно размещение активной гиперссылки).
    Официальные сайты команд NFL