B-148計画: #21 SEOテスト追加

B-148のうち#21(SEOテスト追加)の実施計画を立案してください。

背景

調査結果は以下のメモを参照:

• 初回調査: 19ca9dd345f
• #21追加調査: 19ca9e31105

作業の目的

• OGP/canonical等のSEOメタデータが全公開ルートに存在することを自動テストで保証する
• 今後のリグレッションを防止する

スコープ

• src/lib/tests/seo.test.ts への未テストファクトリ関数テスト追加
• 全公開ルートのmetadata横断テスト新規作成
• テストで検証する項目: canonical URL存在、og:url存在、canonical/og:url一致、og:title存在、og:description存在、siteName存在

注意点

• このタスクは#20(OGP/canonical修正)の完了後に実施する
• generateMetadataを直接呼び出すVitestアプローチを採用（E2Eは不要）
• 静的metadataルートはmetadataオブジェクトをimportしてテスト
• 動的ルートはgenerateMetadataを直接呼び出してテスト
• seo.tsの共通ファクトリのテストと、各ルート固有のテストの2層構造

計画には以下を含めること:

• テストファイルの構成（どのファイルに何を追加するか）
• 各テストの検証項目
• テストデータの管理方法
• 完了条件

B-148 #21 SEOテスト追加 実施計画

前提条件

• #20 (OGP/canonical修正) が完了し、全公開ルートにcanonical/og:url/og:title/og:description/siteNameが設定済みであること
• テストは #20 で修正された状態を検証するものであり、テスト追加時点で全テストがpassすること

---

全体方針

2層構造でテストを構成する:

1. Layer 1: src/lib/__tests__/seo.test.ts - seo.tsの共通ファクトリ関数のユニットテスト追加 (未テスト関数をカバー)
2. Layer 2: src/app/__tests__/seo-coverage.test.ts - 全公開ルートのmetadataを横断的に検証する統合テスト (新規作成)

---

Layer 1: src/lib/tests/seo.test.ts への追加

既存ファイルに以下の 7つのdescribeブロック を追加する。各共通ファクトリ関数に対して、SEO必須項目の検証を行う。

1-1. describe("generateToolMetadata")

テストデータ:

{ slug: "json-formatter", name: "JSON整形", nameEn: "JSON Formatter", description: "JSONを...", shortDescription: "JSON整形", keywords: ["JSON"], category: "developer", relatedSlugs: [], publishedAt: "2026-01-01", trustLevel: "verified" }

テストケース:

• test("titleにツール名とサイト名を含む")
  • result.title が "JSON整形 - tools | yolos.net" と一致
• test("canonical URLが絶対URLで正しいパスを含む")
  • result.alternates.canonical が "https://yolos.net/tools/json-formatter" を含む
• test("og:urlが存在しcanonicalと一致する")
  • result.openGraph.url が result.alternates.canonical と一致
• test("og:titleが存在する")
  • result.openGraph.title が定義されていること
• test("og:descriptionが存在する")
  • result.openGraph.description が定義されていること
• test("og:siteNameがyolos.netである")
  • result.openGraph.siteName が "yolos.net" と一致

1-2. describe("generateBlogPostMetadata")

テストデータ:

{ title: "テスト記事", slug: "test-article", description: "テスト記事の説明です。", published_at: "2026-02-15", updated_at: "2026-02-16", tags: ["テスト"] }

テストケース:

• test("titleに記事タイトルとサイト名を含む")
• test("canonical URLが絶対URLで正しいパスを含む")
• test("og:urlが存在しcanonicalと一致する")
• test("og:titleが存在する")
• test("og:descriptionが存在する")
• test("og:siteNameがyolos.netである")
• test("openGraph.typeがarticleである")

1-3. describe("generateMemoPageMetadata")

テストデータ:

{ id: "abc123", subject: "テストメモ", from: "pm", to: "builder", created_at: "2026-02-15T10:00:00+09:00", tags: ["test"] }

テストケース:

• test("titleにsubjectとサイト名を含む")
• test("canonical URLが絶対URLで正しいパスを含む")
• test("og:urlが存在しcanonicalと一致する")
• test("og:titleが存在する")
• test("og:descriptionが存在する")
• test("og:siteNameがyolos.netである")

1-4. describe("generateKanjiPageMetadata")

テストデータ:

{ character: "山", meanings: ["やま", "mountain"], onYomi: ["サン"], kunYomi: ["やま"], category: "nature" }

テストケース:

• test("titleに漢字とサイト名を含む")
• test("canonical URLが絶対URLでエンコード済みパスを含む")
• test("og:urlが存在しcanonicalと一致する")
• test("og:titleが存在する")
• test("og:descriptionが存在する")
• test("og:siteNameがyolos.netである")

1-5. describe("generateYojiPageMetadata")

テストデータ:

{ yoji: "一期一会", reading: "いちごいちえ", meaning: "一生に一度の出会い", category: "life" }

テストケース:

• test("titleに四字熟語とサイト名を含む")
• test("canonical URLが絶対URLでエンコード済みパスを含む")
• test("og:urlが存在しcanonicalと一致する")
• test("og:titleが存在する")
• test("og:descriptionが存在する")
• test("og:siteNameがyolos.netである")

1-6. describe("generateColorCategoryMetadata")

テストデータ: category = "red", label = "赤系"

テストケース:

• test("titleにカテゴリ名とサイト名を含む")
• test("canonical URLが絶対URLで正しいパスを含む")
• test("og:urlが存在しcanonicalと一致する")
• test("og:titleが存在する")
• test("og:descriptionが存在する")
• test("og:siteNameがyolos.netである")

1-7. describe("generateQuizMetadata")

テストデータ:

{ slug: "kanji-quiz", title: "漢字力診断", description: "漢字力を診断します。", shortDescription: "漢字力テスト", type: "knowledge", questionCount: 10, icon: "漢", accentColor: "#ff0000", keywords: ["漢字", "クイズ"], publishedAt: "2026-02-01", trustLevel: "curated" }

テストケース:

• test("titleにクイズタイトルとサイト名を含む")
• test("canonical URLが絶対URLで正しいパスを含む")
• test("og:urlが存在しcanonicalと一致する")
• test("og:titleが存在する")
• test("og:descriptionが存在する")
• test("og:siteNameがyolos.netである")

Layer 1 補足: 既存テストとの重複回避

• generateColorPageMetadata は既にテストが存在するが、og:url/canonical一致やsiteNameの検証がない。既存のdescribeブロックにテストケースを追加する形で対応する:
  • test("og:urlが存在しcanonicalと一致する")
  • test("og:siteNameがyolos.netである")
• generateCheatsheetMetadata のテストは seo-cheatsheet.test.ts にあるが、同様にog:url/canonical一致とsiteNameの検証が不足している。こちらにも追加:
  • test("og:urlが存在しcanonicalと一致する")
  • test("og:siteNameがyolos.netである")

---

Layer 2: src/app/tests/seo-coverage.test.ts (新規作成)

全公開ルートのmetadataを横断的にテストする統合テストファイル。

2-1. ファイル構成

import { describe, test, expect } from "vitest";
import { BASE_URL, SITE_NAME } from "@/lib/constants";
// 各ルートの static metadata / generateMetadata をimport

2-2. 共通ヘルパー関数

ファイル冒頭に、テスト用の共通アサーション関数を定義する:

function assertSeoMetadata(
  meta: Metadata,
  expectedPath: string,
  label: string
) {
  // canonical URLの存在チェック
  // og:urlの存在チェック
  // canonical と og:url の一致チェック
  // og:title の存在チェック
  // og:description の存在チェック
  // og:siteName === SITE_NAME のチェック
}

この関数は Next.js の Metadata 型を受け取り、6つのアサーションをまとめて実行する。各テストケースで個別にexpectを並べる必要がなくなり、テストコードの可読性を向上させる。

2-3. 静的metadataページのテスト

以下のページは export const metadata で静的にメタデータを定義しているため、直接importしてテストする。

describe("静的metadataページのSEO検証")

ページ	import元	expectedPath
/ (トップ)	@/app/page (※#20で追加される想定)	/
/about	@/app/about/page	/about
/games	@/app/games/page	/games
/games/kanji-kanaru	@/app/games/kanji-kanaru/page	/games/kanji-kanaru
/games/irodori	@/app/games/irodori/page	/games/irodori
/games/nakamawake	@/app/games/nakamawake/page	/games/nakamawake
/games/yoji-kimeru	@/app/games/yoji-kimeru/page	/games/yoji-kimeru
/tools	@/app/tools/page	/tools
/blog	@/app/blog/page	/blog
/memos	@/app/memos/page	/memos
/quiz	@/app/quiz/page	/quiz
/cheatsheets	@/app/cheatsheets/page	/cheatsheets
/dictionary	@/app/dictionary/page	/dictionary
/dictionary/kanji	@/app/dictionary/kanji/page	/dictionary/kanji
/dictionary/yoji	@/app/dictionary/yoji/page	/dictionary/yoji
/dictionary/colors	@/app/dictionary/colors/page	/dictionary/colors

各ページに対して以下を検証:

• test("[path]: canonical URLが存在する")
• test("[path]: og:urlが存在しcanonicalと一致する")
• test("[path]: og:title が存在する")
• test("[path]: og:description が存在する")
• test("[path]: siteNameがyolos.netである")

実装方法: test.each を使って全ページを一括テスト。

const staticPages = [
  { path: "/", importMeta: () => import("@/app/page").then(m => m.metadata) },
  { path: "/about", importMeta: () => import("@/app/about/page").then(m => m.metadata) },
  // ...
];

describe("静的metadataページのSEO検証", () => {
  test.each(staticPages)("$path: SEO必須項目が存在する", async ({ path, importMeta }) => {
    const meta = await importMeta();
    assertSeoMetadata(meta, path, path);
  });
});

注意: トップページ(/)は現状 metadata export がないが、#20で追加される想定。もし#20で追加されない場合は、このテストで検出される。

2-4. 動的generateMetadataページのテスト

以下のページは generateMetadata 関数で動的にメタデータを生成するため、関数を呼び出してテストする。

describe("動的generateMetadataページのSEO検証")

サンプルデータで代表テスト (各ルートにつき1つのパラメータで検証):

ページ	パラメータ	expectedPath
/tools/[slug]	seo.tsのgenerateToolMetadataでカバー済み。Layer 1で担保	-
/blog/[slug]	seo.tsのgenerateBlogPostMetadataでカバー済み。Layer 1で担保	-
/memos/[id]	seo.tsのgenerateMemoPageMetadataでカバー済み。Layer 1で担保	-
/dictionary/kanji/[char]	seo.tsのgenerateKanjiPageMetadataでカバー済み。Layer 1で担保	-
/dictionary/yoji/[yoji]	seo.tsのgenerateYojiPageMetadataでカバー済み。Layer 1で担保	-
/dictionary/colors/[slug]	seo.tsのgenerateColorPageMetadataでカバー済み。Layer 1で担保	-
/dictionary/colors/category/[category]	seo.tsのgenerateColorCategoryMetadataでカバー済み。Layer 1で担保	-
/cheatsheets/[slug]	seo.tsのgenerateCheatsheetMetadataでカバー済み。Layer 1で担保	-
/quiz/[slug]	seo.tsのgenerateQuizMetadataでカバー済み。Layer 1で担保	-

seo.ts経由ではないがgenerateMetadataを持つルート (直接呼び出してテスト):

ページ	パラメータ例
/memos/thread/[id]	実際のthread IDをgetAllThreadRootIds()から1件取得
/blog/page/[page]	{ page: "2" }
/blog/category/[category]	実際のカテゴリをALL_CATEGORIESから1件取得
/blog/category/[category]/page/[page]	実際のカテゴリ + { page: "2" }
/tools/page/[page]	{ page: "2" }
/dictionary/kanji/category/[category]	実際のカテゴリをgetKanjiCategories()から1件取得
/dictionary/yoji/category/[category]	実際のカテゴリをgetYojiCategories()から1件取得
/quiz/[slug]/result/[resultId]	実際のquizSlugとresultIdをregistryから1件取得

各ページに対して assertSeoMetadata を実行。

describe("動的metadataページのSEO検証", () => {
  test("/memos/thread/[id]: SEO必須項目が存在する", async () => {
    const { generateMetadata } = await import("@/app/memos/thread/[id]/page");
    const threadIds = getAllThreadRootIds();
    if (threadIds.length === 0) return; // データがなければスキップ
    const id = threadIds[0];
    const meta = await generateMetadata({ params: Promise.resolve({ id }) });
    assertSeoMetadata(meta, `/memos/thread/${id}`, "/memos/thread/[id]");
  });

  test("/blog/page/[page]: SEO必須項目が存在する", async () => {
    const { generateMetadata } = await import("@/app/blog/page/[page]/page");
    const meta = await generateMetadata({ params: Promise.resolve({ page: "2" }) });
    assertSeoMetadata(meta, "/blog/page/2", "/blog/page/[page]");
  });
  // ... 同様に他のルートも
});

注意: ページネーションページ(page/2)はデータ量に依存するため、該当ページが存在しない場合(記事数が少なくpage 2がない場合など)はテスト内で条件分岐してスキップする。

---

テストデータの管理方法

1. seo.tsファクトリ関数テスト (Layer 1): 各テストブロック内にインラインでモックデータを定義する。既存のseo.test.tsと同じスタイルを踏襲。型安全性を確保するため、各インターフェース (ToolMeta, QuizMeta 等) に準拠したオブジェクトを使用する。

2. 静的metadataテスト (Layer 2-3): テストデータ不要。各ページの metadata オブジェクトを直接importして検証する。

3. 動的generateMetadataテスト (Layer 2-4): 実際のregistryやデータソースから代表的なパラメータを1件取得して使用する。これにより、テストデータとプロダクションデータの乖離を防ぐ。データが存在しない場合はテストをスキップする (test内でearly return)。

---

完了条件

1. src/lib/__tests__/seo.test.ts に7つの新規describeブロックが追加され、全テストがpassすること
2. src/lib/__tests__/seo-cheatsheet.test.ts に og:url/canonical一致、siteName の2テストが追加され、passすること
3. src/lib/__tests__/seo.test.ts の既存 generateColorPageMetadata ブロックに og:url/canonical一致、siteName の2テストが追加され、passすること
4. src/app/__tests__/seo-coverage.test.ts が新規作成され、全公開ルート(静的16ページ + 動的8ルート)のSEO必須項目テストがpassすること
5. npm run test で既存テストを含むすべてのテストがpassすること
6. npm run lint && npm run format:check がpassすること

テスト数の見込み

• Layer 1 (seo.test.ts 追加): 7 describe x 6 tests = 約42テスト + 既存テストへの4テスト追加 = 約46テスト追加
• Layer 2 (seo-coverage.test.ts): 静的16ページ + 動的8ルート = 約24テスト
• 合計: 約70テスト追加

実装上の注意

1. openGraphの型キャスト: Next.jsのMetadata型ではopenGraphが複数の型のunionになっているため、テスト内では (meta.openGraph as Record<string, unknown>)?.url のようにキャストする必要がある。既存のseo-cheatsheet.test.tsがこのパターンを採用しているので、同じ方法を使うこと。

2. canonical URLの形式: #20完了後は全ルートで ${BASE_URL}/path 形式の絶対URLが使われる想定。テストでは expect(canonical).toContain(expectedPath) と expect(canonical).toMatch(/^https:\/\//) の両方で検証する。ただし、metadataBase経由で相対パスが絶対URLに展開される場合もあるため、相対パスのままの場合もpassさせる。assertSeoMetadata関数内で、canonicalが絶対URLか相対パスかに関わらずパスが含まれていることを検証する。

3. トップページ(/)の扱い: 現状page.tsxにmetadata exportがない。#20で追加される想定だが、もし追加されない場合はlayout.tsxのmetadataがフォールバックとして使われる。テストでは、page.tsxにmetadata exportが存在するかどうかを確認し、存在しない場合は明示的にスキップまたはfailさせて問題を検出できるようにする。

4. test.eachの活用: 静的metadataページのテストでは、test.eachを使って各ページの情報を配列で管理し、テストを一括実行する。これにより、新しいページが追加された際にも配列に1行追加するだけでテストをカバーできる。