Framework Nuxt позволяет нам гибко добавлять метатеги к нашим страницам, и сделать это можно несколькими способами.

Глобальные метатеги

Первый способ — это глобальное добавление метатегов через файл nuxt.config.ts сайта. Добавляем в нем следующую конструкцию:

export default defineNuxtConfig({
    app: {
        head: {
            charset: 'utf-8',
            viewport: 'width=device-width, initial-scale=1',
        }
    }
})

Таким образом мы добавили 2 метатэга: кодировку сайта и мета-тэг viewport.

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

Таким образом, если вам нужно добавить глобальные метатеги, вы можете сделать это в данном файле.

Локальные метатеги для каждой страницы

Кроме глобальных метатегов, вы также можете добавлять их отдельно на каждую страницу. Для этого в Nuxt.js используется компонент Head, в котором можно прописать метатеги, необходимые для конкретной страницы.

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

useHead({title: "Главная страница"})

Добавление других метатегов

Точно так же через Head можно добавлять и другие метатеги, например, description, а также классы к элементу body, скрипты и любую другую служебную информацию, которая может понадобиться на странице.

В документации Nuxt.js можно найти примеры того, как добавлять такие метатеги. Например, для социальных сетей часто используется метатег og:title.

Таким образом, добавление метатегов в Nuxt.js легко реализуется как на глобальном уровне, так и на уровне отдельных страниц.