SEO

Nuxt жобасы үшін ортақ сайт метадеректерін, бет SEO тегтерін, favicon сілтемелерін, robots.txt және sitemap генерациясын баптаңыз.

Орнату

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.config.ts ішіне sitemap баптауларын қоспас бұрын Nuxt Sitemap орнатыңыз.

npx nuxt module add @nuxtjs/sitemap

Sitemap іздеу роботтарына қолжетімді маршруттарды табуға және қай беттерді қарау керегін түсінуге көмектеседі. Деплойдан кейін sitemap robots.txt ішінде көрсетілген URL арқылы ашылатынын тексеріңіз.

Толық ақпарат үшін: 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 қолданады, сондықтан missingWarn өшірілгенде бет мәндері translation keys бола алады, ал siteConfig defaults жай мәтін болып қала алады.

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