SEO

Настройте общие метаданные сайта, SEO-теги страниц, favicon, robots.txt и генерацию sitemap для Nuxt проекта.

Установка

npx alixan-ui-nuxt add seo

Эта команда копирует app/config/site/site.ts, app/config/site/favicon.ts and app/composables/usePageMeta.ts. После копирования замените значения из примера в site.ts на свой домен, название проекта, заголовок по умолчанию, описание и OG-изображение.

Sitemap

Установите Nuxt Sitemap до добавления sitemap-настроек в nuxt.config.ts.

npx nuxt module add @nuxtjs/sitemap

Sitemap помогает поисковым роботам найти доступные маршруты и понять, какие страницы нужно обходить. После деплоя проверьте, что sitemap доступен по URL, который указан в robots.txt.

Для более подробной информации перейдите в документацию Nuxt Sitemap.

Конфиг сайта

app/config/site/site.ts

export const siteConfig = {
  // Replace with your production domain.
  url: 'https://nuxt.ui.alixan.kz',
  // Replace with your project name.
  name: 'Alixan UI',
  // Replace with your default page title.
  title: 'Alixan UI - Nuxt UI Components',
  // Replace with your default SEO description.
  description:
    'Modern, minimal and production-ready UI components for Nuxt 4, Vue 3 and TypeScript.',
  // Replace with your default Open Graph image.
  ogImage: 'https://nuxt.ui.alixan.kz/og-image.png',
}

nuxt.config.ts

import { siteConfig } from './app/config/site/site'

export default defineNuxtConfig({
  site: {
    url: siteConfig.url,
    name: siteConfig.name,
  },
  modules: ['@nuxtjs/sitemap'],
  sitemap: {
    autoLastmod: true,
  },
})

Начальный head

Для генерации favicon-файлов смотрите гайд IconKitchen .

app/config/site/favicon.ts

export const favicon = [
	{
		rel: 'icon',
		href: '/favicon.ico',
		sizes: 'any',
	},
	{
		rel: 'apple-touch-icon',
		href: '/icons/apple-touch-icon.png',
	},
	{
		rel: 'manifest',
		href: '/site.webmanifest',
	},
]

app.vue

<script setup lang="ts">
import { favicon } from './config/site/favicon'

const { locale } = useI18n()

usePageMeta() // initialize default SEO meta

useHead({
  htmlAttrs: { lang: locale.value }, // initialize lang attr for html
  link: favicon, // initialize favicon
})
</script>

Мета страницы

app/composables/usePageMeta.ts

usePageMeta централизует title, description, Open Graph и Twitter теги. Страницы передают только значения, которые отличаются от дефолтов. Он использует useI18n().t внутри, поэтому значения страницы могут быть ключами переводов, а дефолты siteConfig могут оставаться обычными строками при отключенном missingWarn.

import { siteConfig } from '~/config/site/site'

interface PageMetaOptions {
  title?: string
  description?: string
  img?: string
}

export const usePageMeta = (payload?: PageMetaOptions): void => {
  const { t } = useI18n()
  const route = useRoute()
  const metaTitle = t(payload?.title || siteConfig.title)
  const metaDescription = t(payload?.description || siteConfig.description)
  const metaImage = payload?.img || siteConfig.ogImage

  useSeoMeta({
    title: metaTitle,
    description: metaDescription,
    ogType: 'website',
    ogSiteName: siteConfig.name,
    ogTitle: metaTitle,
    ogDescription: metaDescription,
    ogUrl: siteConfig.url + route.path,
    ogImage: metaImage,
    twitterCard: 'summary_large_image',
    twitterTitle: metaTitle,
    twitterDescription: metaDescription,
    twitterImage: metaImage,
  })
}

pages/button.vue

Вызывайте usePageMeta на каждой странице. Если поле не передано, используется дефолт из siteConfig .

<script setup lang="ts">
usePageMeta({
  title: 'componentDocs.button.metaTitle',
  description: 'componentDocs.button.description',
})
</script>

Robots

Добавьте public/robots.txt чтобы поисковые роботы могли найти sitemap. Замените домен из примера на ваш production-домен.

public/robots.txt

User-Agent: *
Disallow:

# Replace this domain with your own.
Sitemap: https://nuxt.ui.alixan.kz/sitemap_index.xml