Содержание

1. Режим SSR

2. Установка meta-тэгов по умолчанию

3. Добавление тэгов в секцию head на отдельную страницу

4. Определяем SEO мета-тэги на странице

5. Изменение SEO тэгов из компонента страницы

Фреймворк Nuxt имеет мощный встроенный функционал для работы с SEO (поисковым продвижением).

Режим SSR

Главное преимущество Nuxt для SEO в том, что по умолчанию в нем включен режим SSR (Server Side Rendering). Это позволяет формировать HTML-код страницы на сервере и выдавать поисковым системам уже готовую HTML разметку, а не скрипты, которые формируют эту разметку. Поисковые системы это любят.

Убедится, что в вашем приложении включен режим SSR можно в файле nuxt.config.ts

export default defineNuxtConfig({
  ssr: true, // Если стоит true, SSR включен, если false, выключен
})

Если параметр не указан, режим ssr включен по умолчанию.

Подробнее про настройки Nuxt проекта можно посмотреть в базовом видеокурсе по Nuxt здесь:

https://webkyrs.info/category/osnovy-nuxt

Установка meta-тэгов по умолчанию

Сразу для всего приложения (сайта), который мы разрабатываем, мы можем добавить мета тэги по умолчанию. Сделать это можно все в том же файле настроек nuxt.config.ts. Для этого можно использовать опцию head. В этой секции вы можете указать заголовки, которые будут применяться ко всем страницам вашего сайта.

export default defineNuxtConfig({
  app: {
    head: {
      meta: [
        { name: 'description', content: 'Описание вашего сайта' },
        { name: 'keywords', content: 'ключевые, слова, сайта' },
        { name: 'author', content: 'Ваше имя или компания' },
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ],
      title: 'Название сайта по умолчанию'
    }
  }
})

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

Добавление тэгов в секцию head на отдельную страницу

Для добавления уникальных мета-тегов и других тэгов в секцию <head> на отдельной странице в Nuxt 3, вы можете использовать функцию useHead в компоненте страницы. Это позволяет переопределять или дополнять заголовки, указанные в глобальной конфигурации.

Пример использования в компоненте страницы:

<script setup lang="ts">
useHead({
  title: 'Уникальный заголовок для страницы',
  meta: [
    { name: 'description', content: 'Описание для этой страницы' },
    { name: 'keywords', content: 'ключевые, слова, страницы' },
  ]
})
</script>


<template>
  <div>
    <h1>Это страница с уникальными мета-тегами</h1>
  </div>
</template>

Вы также можете добавлять любые другие теги, такие как <link>, <script>, и т. д., используя этот же подход. Например, добавление favicon или подключения сторонних библиотек:

useHead({
  link: [
    { rel: 'icon', type: 'image/png', href: '/custom-favicon.png' }
  ],
  script: [
    { src: 'https://example.com/script.js', async: true }
  ]
})

или так

script: [
    { src: 'https://example.com/script.js', async: true },
    { innerHTML: 'console.log("Встроенный скрипт работает!")', type: 'text/javascript' }
  ],
  bodyAttrs: {
    class: 'custom-body-class',
    'data-theme': 'dark' // можно добавить любые атрибуты к body
  }

Определяем SEO мета-тэги на странице

В Nuxt 3 можно определить SEO мета-теги на странице с помощью специального хука useSeoMeta. Этот хук автоматически добавляет основные мета-теги, такие как description, og:title, og:description и другие.

Вот пример, как можно использовать useSeoMeta на странице:

<script setup lang="ts">

useSeoMeta({
  title: 'Уникальный SEO-заголовок для страницы',
  description: 'SEO-описание этой страницы',
  ogTitle: 'Уникальный заголовок для Open Graph',
  ogDescription: 'Описание для социальных сетей через Open Graph',
  ogImage: '/path-to-image.jpg',
  ogUrl: 'https://example.com/page-url',
  twitterCard: 'summary_large_image',
  twitterSite: '@your-twitter-handle'
})
</script>


<template>
  <div>
    <h1>Это страница с SEO-мета-тегами</h1>
  </div>
</template>

title: Устанавливает SEO-заголовок страницы.

description: Добавляет мета-описание страницы.

ogTitle и ogDescription: Устанавливают заголовок и описание для Open Graph, который используется при публикации ссылки на страницу в социальных сетях.

ogImage: Указывает изображение для Open Graph (отображается при шаринге страницы).

ogUrl: Устанавливает URL-адрес страницы для Open Graph.

twitterCard: Определяет тип карточки для Twitter (например, summary_large_image для карточек с большим изображением).

twitterSite: Указывает аккаунт Twitter, который связан с этим сайтом.

Используя useSeoMeta, вы легко можете установить основные SEO-мета-теги для улучшения видимости вашего сайта в поисковых системах и социальных сетях.

Изменение SEO тэгов из компонента страницы

Кроме того, что мы можем указывать seo тэги в элементе script страницы, мы можем также указать их напрямую в шаблоне (template). Выглядеть это может примерно так.

<script setup lang="ts">
import { ref, computed } from 'vue'


const title = ref('Мой блог о программировании')
const description = ref('Здесь я делюсь своими мыслями о веб-разработке, JavaScript и Vue.js')
const keywords = ref(['программирование', 'веб-разработка', 'JavaScript', 'Vue.js'])
const themeColor = ref('#41b883')


const structuredData = computed(() => {
  return JSON.stringify({
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "headline": title.value,
    "description": description.value,
    "keywords": keywords.value.join(', '),
    "author": {
      "@type": "Person",
      "name": "Иван Иванов"
    }
  })
})
</script>


<template>
  <div>
    <Head>
      <Title>{{ title }} | Мой технический блог</Title>
      <Meta name="description" :content="description" />
      <Meta name="keywords" :content="keywords.join(', ')" />
      <Meta name="theme-color" :content="themeColor" />
      <Link rel="canonical" href="https://example.com/blog" />
      <Style type="text/css">
        body { 
          font-family: Arial, sans-serif; 
          line-height: 1.6; 
          color: #333; 
        }
        h1 { color: v-bind(themeColor); }
      </Style>
      <NoScript>
        <Meta name="robots" content="noindex, nofollow" />
      </NoScript>
      <script type="application/ld+json" v-html="structuredData"></script>
    </Head>
    
    <main>
      <h1>{{ title }}</h1>
      <p>{{ description }}</p>
      <ul>
        <li v-for="keyword in keywords" :key="keyword">{{ keyword }}</li>
      </ul>
    </main>
  </div>
</template>

Компонент <Head> используется для группировки метатегов и других элементов, которые обычно находятся в <head> HTML-документа.

Продолжить знакомиться со всеми возможностями Nuxt можно здесь:

https://webkyrs.info/razdel/nuxt