В наши дни вокруг SEO много споров. Некоторые люди склонны думать, что SPA (одностраничные приложения) дружественны к SEO, в то время как другие утверждают, что с другой стороны, SPA вообще не дружественны к SEO.

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

Я не буду слишком углубляться в то, что означает SEO и как оно работает, но вкратце это означает поисковую оптимизацию и представляет собой процесс влияния на видимость веб-сайта в поисковой системе. На практике это установленные правила и передовой опыт написания веб-сайтов, которые в конечном итоге влияют на видимость вашего веб-сайта в поисковых системах. Некоторые из этих методов в наши дни включают скорость загрузки страницы, метатеги, оболочку релевантного содержания в правильных html-тегах, правильные ссылки на вашем веб-страницы, имеющие https, что делает веб-сайт оптимизированным для мобильных устройств и т. д. Вы можете найти очень подробное объяснение в этом довольно недавнем видео с Google IO 2018.

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

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

SPA (одностраничные приложения)

В мире Vue.js это в большинстве случаев способ создания веб-приложений по умолчанию. Vue CLI 3 и некоторые старые официальные шаблоны веб-пакетов имеют конфигурацию SPA. Это означает, что ваше веб-приложение полностью построено на стороне клиента. Вы пишете .vue файлы, они преобразуются в javascript, и этот javascript используется для визуализации окончательной разметки (html).

SSR (рендеринг на стороне сервера)

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

SPA + Предварительный рендер

Также стоит упомянуть, что существуют плагины для предварительного рендеринга, такие как this one, или даже онлайн-сервисы, посвященные этому. Предварительный рендеринг помогает повысить индексируемость SPA за счет загрузки вашего веб-сайта и рендеринга окончательной разметки (html) для каждого маршрута. SPA + Pre-render - это что-то среднее между простыми SPA и SSR. Вы получаете все преимущества SPA + некоторые преимущества SEO от SSR. Однако для большого количества страниц или динамического контента SSR более масштабируемый и простой на практике.

Преимущества SPA

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

Недостатки SPA

  • У вас есть только 1 html-страница. Даже если у вас есть несколько маршрутов, вы получите один файл html. Это означает, что вы не можете проводить SEO для каждой страницы по-разному.
  • Может работать медленно, если плохо оптимизирован. Вы можете довольно быстро решить big bundle проблему, если не будете обращать на нее внимания. Даже если вы сохраните его очень маленьким, вы все равно можете столкнуться с некоторыми проблемами производительности на мобильных устройствах, потому что весь этот javascript должен быть проанализирован, оценен и преобразован в html на мобильном устройстве. На недорогих устройствах это может иметь довольно большое влияние.

Преимущества SSR

  • SEO не является проблемой для SSR. Каждый новый маршрут представляет собой новый файл html, и вы можете настроить метатеги, как хотите, для каждой страницы.
  • Может быть более производительным для более медленных устройств. Вся разметка отображается заранее на сервере, что означает, что устройство, запрашивающее страницу, получает весь HTML-код и не нуждается в дополнительной работе, как в случае со SPA.
  • Обеспечивает соблюдение некоторых правил, которые в конечном итоге помогают вам создавать более эффективные и эффективные веб-сайты.

Недостатки SSR

  • SSR более сложный. Обычно требуется дополнительная настройка, особенно если вы хотите встроить фреймворк javascript.
  • Сложнее развернуть. «Жесткий» - это субъективный термин, но веб-сайты SSR несколько сложнее развертывать по сравнению с SPA. Вам нужен сервер, который будет отображать ваш html. Вы больше не можете полагаться на статический хостинг.
  • Для развития требуется больше знаний. Вы должны немного знать бэкэнд, чтобы создать его самостоятельно.

Какой выбрать?

Если у вас есть веб-сайт администрирования, веб-сайт, который является статическим с точки зрения страниц (контент на страницах не является динамическим), тогда используйте SPA и плагин или службу предварительной визуализации. Это проще в управлении, развертывании и обслуживании. С другой стороны, если у вас есть интернет-магазин, веб-сайт с множеством страниц или динамическим контентом для каждой страницы, и вам нужно, чтобы каждая страница была проиндексирована Google, тогда обязательно используйте SSR.

Как?

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

  • <title> Это будет отображаться как заголовок вкладки в браузере. Поместите этот тег в <head>tag вашей html-страницы.
  • <meta name="description" content="Your content"> Это будет описание вашего веб-сайта или конкретной страницы. Этот контент используется поисковыми системами и обычно отображается под заголовком вашего веб-сайта при поиске. Это также можно использовать для самого поиска, поэтому не забудьте указать здесь релевантное описание.
  • <meta name="author" content="Author> Этот тег определяет автора страницы.
  • <link rel="icon" href="iconPath"> Это будет ваш значок. Этот значок отображается на вкладке вашего браузера при переходе на ваш сайт. Убедитесь, что у вас есть четкий, понятный и актуальный значок.
  • <link rel="canonical" href="url"> Этот тег обычно используется, когда вы хотите распространять контент на разных веб-сайтах, но сохранить единый источник правды. Одним из таких примеров может быть сообщение в блоге, которое вы публикуете на своем веб-сайте, а также хотите разместить его на нескольких других веб-сайтах. Размещение такого тега на всех других веб-сайтах гарантирует, что поисковые системы будут уделять приоритетное внимание «источнику правды», которым будет URL, который вы укажете здесь.
  • <meta name="keywords" content="keywords, separated, by, comma"> Вы можете указать здесь не менее 10 ключевых слов, имеющих отношение к вашему веб-сайту. Это гарантирует, что поисковые системы смогут отображать ваш веб-сайт в результатах поиска по некоторым из перечисленных здесь ключевых слов.
  • <meta itemprop="name" content="">, <meta itemprop="description" content=""> Они похожи на title и meta name="description", но предназначены для Google+ на тот случай, если вы хотите разместить там свой веб-сайт. Вам также понадобится meta itemprop="image"
  • Теги Twitter <meta twitter:card content="">, а также twitter: site, twitter: description, twitter: title, twitter: creator и twitter: image помогут вам получить хороший предварительный просмотр Twitter, когда вы поделитесь своим сайт в твиттере. Самые важные из них - изображение, заголовок и описание.
  • Теги Facebook: <meta property=”og:title" content=””>, а также og: type, og: url, og: description, og: image и og: site_name помогут получить очень хороший предварительный просмотр при публикации. ваш сайт на фейсбуке.
  • Другие метатеги, которые менее актуальны или слишком специфичны.

Как это сделать в Vue CLI 3? (SPA)

  • Перейдите в свой public/index.html файл и добавьте соответствующие теги
  • Вдобавок к этому вы можете использовать плагин предварительного рендеринга для фактического предоставления некоторого релевантного HTML-кода непосредственно поисковым роботам вместо того, чтобы иметь пустой body. Для этого вам нужно будет добавить этот фрагмент кода внутрь vue.config.js
const path = require('path') const PrerenderSPAPlugin = 
require('prerender-spa-plugin')
module.exports = {
 configureWebpack: {
  plugins: [
    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, 'dist'),
      // Required - Routes to render.
      routes: [ '/', '/about', '/some/deep/nested/route' ],
    })
  ]
 }
}

Как это сделать в Nuxt.js? (SSR)

  • На каждой из ваших страниц Nuxt предоставляет свойство head, которое вы можете редактировать. Подробности документации вы можете увидеть здесь. Вот пример того, как это будет выглядеть:
head () {
 return {
    title: "My page title",
    meta: [
     { name: ‘description’, content: ‘My page description’ }
   ]
  }
}
  • Сделайте это для каждой страницы в pages каталоге, которую вы хотите проиндексировать. Например, страница продукта будет иметь динамический заголовок и описание, которое будет получено из базы данных. Вы также можете указать data свойства в этом разделе head.

Как это сделать с настраиваемой настройкой SSR?

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

Выводы

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