Nuxt で SEO を強化する

メタ情報の設定

Nuxt では useSeoMeta を使うと、タイトル・description・OGP を型安全に設定できます。

<script setup lang="ts">
useSeoMeta({
  title: 'ページタイトル',
  description: 'このページの説明文（160文字以内）',
  ogTitle: 'ページタイトル',
  ogDescription: 'OGP 用の説明文',
  ogImage: 'https://example.com/og.png',
  twitterCard: 'summary_large_image',
})
</script>

サイトマップの自動生成

@nuxtjs/sitemap を使うと sitemap.xml が自動生成されます。

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/sitemap'],
  site: { url: 'https://your-site.com' },
  sitemap: {
    sources: ['/api/__sitemap__/urls'], // 動的ルートを追加
  },
})

robots.txt の設定

@nuxtjs/robots を @nuxtjs/sitemap と一緒に使うと、Sitemap: 行が自動で追記されます。

robots: {
  groups: [
    { userAgent: '*', allow: '/', disallow: ['/admin'] }
  ]
}

Canonical URL の設定

動的ルートでは useHead で canonical を設定して重複コンテンツを防ぎます。

const route = useRoute()
useHead({
  link: [{ rel: 'canonical', href: `https://your-site.com${route.path}` }]
})

まとめ

SEO 対策は「コンテンツが HTML に含まれているか（SSR/SSG）」「メタ情報が適切か」「サイトマップが存在するか」の3点が基本です。Nuxt はこれらをすべてサポートしています。