Nuxt SEO

npx nuxi module add @nuxtjs/seo

使用する場合

以下の作業を行う場合に使用します:

• SEO設定 (サイトURL、名前、インデックス可能性)
• Robots.txt とsitemap.xml の生成
• 動的OG画像の生成
• JSON-LD構造化データ (schema.org)
• パンくずリストと正規URL

ファイルの読み込み

タスクに基づいて、以下のリファレンスファイルの読み込みを検討してください:

• references/site-config.md - サイトURL、名前、またはSEO基盤を設定する場合
• references/crawlability.md - robots.txt またはsitemap.xml をセットアップする場合
• references/og-image.md - 動的OG画像を生成する場合
• references/schema-org.md - JSON-LD構造化データを追加する場合
• references/utilities.md - パンくずリスト、正規URL、またはリンク確認を操作する場合

すべてのファイルを一度に読み込まないでください。 現在のタスクに関連するファイルのみを読み込みます。

サイト設定

すべてのSEOモジュール用の基盤です。nuxt.config.ts で site を設定し、useSiteConfig() でアクセスします。完全なオプションについては references/site-config.md を参照してください。

モジュール概要

モジュール	目的	キーAPI
nuxt-site-config	共有設定	useSiteConfig()
@nuxtjs/robots	robots.txt	useRobotsRule()
@nuxtjs/sitemap	sitemap.xml	defineSitemapEventHandler()
nuxt-og-image	OG画像	defineOgImage()
nuxt-schema-org	JSON-LD	useSchemaOrg()
nuxt-seo-utils	メタユーティリティ	useBreadcrumbItems()
nuxt-link-checker	リンク検証	ビルド時チェック

Nuxt Content v3

フロントマターから自動的にサイトマップ、OG画像、schema-orgを生成するために asSeoCollection() を使用します:

// content.config.ts
import { defineCollection, defineContentConfig } from '@nuxt/content'
import { asSeoCollection } from '@nuxtjs/seo/content'

export default defineContentConfig({
  collections: {
    posts: defineCollection(asSeoCollection({ type: 'page', source: 'posts/**' }))
  }
})

重要: モジュール配列で @nuxtjs/seo を @nuxt/content の前に読み込んでください:

export default defineNuxtConfig({
  modules: ['@nuxtjs/seo', '@nuxt/content']
})

フロントマターフィールド: ogImage、sitemap、robots、schemaOrg。

関連スキル

• nuxt-content - SEOフロントマター付きのMDCレンダリング用

リンク

• ドキュメンテーション
• GitHub

トークン効率

メインスキル: 約250トークン。各サブファイル: 約400〜600トークン。現在のタスクに関連するファイルのみを読み込んでください。