SEO Optimization

概要

このスキルは、Next.js App Router の Metadata API を活用した SEO 最適化の ベストプラクティスを提供します。検索エンジン可視性の向上とソーシャル シェア時の表示最適化を実現します。

核心哲学:

• Discoverable: 検索エンジンに正しく理解されるコンテンツ
• Shareable: ソーシャルメディアで魅力的に表示される
• Accessible: すべてのユーザーとクローラーがアクセス可能

主要な価値:

• Metadata API による型安全なメタデータ管理
• 動的メタデータ生成による個別ページ最適化
• 構造化データによるリッチリザルト獲得

リソース構造

seo-optimization/
├── SKILL.md                                    # 本ファイル（概要とワークフロー）
├── resources/
│   ├── metadata-api-guide.md                   # Metadata APIガイド
│   ├── ogp-twitter-cards.md                    # OGP/Twitter Card設定
│   ├── structured-data.md                      # 構造化データ
│   └── sitemap-robots.md                       # サイトマップ/robots.txt
├── scripts/
│   └── analyze-seo.mjs                         # SEO分析スクリプト
└── templates/
    ├── metadata-template.md                    # メタデータテンプレート
    └── structured-data-template.md             # 構造化データテンプレート

コマンドリファレンス

リソース読み取り

# Metadata APIガイド
cat .claude/skills/seo-optimization/resources/metadata-api-guide.md

# OGP/Twitter Card設定
cat .claude/skills/seo-optimization/resources/ogp-twitter-cards.md

# 構造化データ
cat .claude/skills/seo-optimization/resources/structured-data.md

# サイトマップ/robots.txt
cat .claude/skills/seo-optimization/resources/sitemap-robots.md

スクリプト実行

# SEO分析
node .claude/skills/seo-optimization/scripts/analyze-seo.mjs <app-directory>

テンプレート参照

# メタデータテンプレート
cat .claude/skills/seo-optimization/templates/metadata-template.md

# 構造化データテンプレート
cat .claude/skills/seo-optimization/templates/structured-data-template.md

いつ使うか

シナリオ 1: ページメタデータ設定

状況: 新しいページに SEO メタデータを設定する

適用条件:

• ページの title、description が必要
• OGP 画像の設定が必要
• 検索エンジン表示を最適化したい

期待される成果: 検索結果とソーシャルシェアで最適な表示

シナリオ 2: 動的メタデータ生成

状況: 動的ルート（[slug]等）のメタデータを生成する

適用条件:

• 動的パラメータに基づくメタデータが必要
• データベースや API からメタデータを取得
• 各ページ固有の OGP 画像が必要

期待される成果: 動的コンテンツに対応した SEO 最適化

シナリオ 3: リッチリザルト実装

状況: 検索結果でリッチスニペットを表示したい

適用条件:

• 記事、製品、FAQ などの構造化データが必要
• パンくずリストの構造化データが必要
• レビュー、評価の表示が必要

期待される成果: 検索結果でのリッチリザルト表示

知識領域

領域 1: Metadata API

静的メタデータ:

export const metadata: Metadata = {
  title: "Page Title",
  description: "Page description...",
};

動的メタデータ:

export async function generateMetadata({ params }): Promise<Metadata> {
  const data = await fetchData(params.id);
  return {
    title: data.title,
    description: data.description,
  };
}

詳細は: resources/metadata-api-guide.md を参照

領域 2: OGP/Twitter Card

必須設定:

• og:title: ページタイトル
• og:description: 説明文
• og:image: 1200x630px の画像
• twitter:card: summary_large_image

詳細は: resources/ogp-twitter-cards.md を参照

領域 3: 構造化データ

主要なスキーマ:

• Article: ブログ記事、ニュース
• Product: 商品ページ
• BreadcrumbList: パンくずリスト
• FAQPage: よくある質問

詳細は: resources/structured-data.md を参照

領域 4: サイトマップ/robots

sitemap.ts:

export default async function sitemap() {
  const pages = await getPages();
  return pages.map((page) => ({
    url: `https://example.com${page.path}`,
    lastModified: page.updatedAt,
  }));
}

詳細は: resources/sitemap-robots.md を参照

ワークフロー

Phase 1: 要件分析

1. SEO 目標を確認（検索順位、CTR 等）
2. 対象ページを特定
3. 競合分析を実施

Phase 2: メタデータ設計

1. タイトル戦略を決定
2. description 最適化
3. OGP 画像を準備

Phase 3: 実装

1. Root Layout のデフォルトメタデータ
2. 各ページの静的/動的メタデータ
3. 構造化データの追加

Phase 4: 検証

1. メタデータの表示確認
2. OGP プレビュー確認
3. 構造化データテスト

Phase 5: 監視

1. Search Console で監視
2. CTR の改善
3. 定期的な更新

設計原則

ユニーク性の原則

各ページには固有の title と description を設定する。

階層的継承の原則

Root Layout でデフォルトを設定し、子ページで上書きする。

データ駆動の原則

動的コンテンツには必ず動的メタデータを生成する。

検証の原則

実装後は必ずプレビューと構造化データテストを実行する。

関連スキル

• .claude/skills/nextjs-app-router/SKILL.md - ルーティング構造
• .claude/skills/server-components-patterns/SKILL.md - データフェッチ
• .claude/skills/web-performance/SKILL.md - パフォーマンス最適化

変更履歴

バージョン	日付	変更内容
1.0.0	2025-11-25	初版リリース