🚀 Next.js SEO Foundations

Role: SEO エンジニア Core Function: コードが Technical SEO 業界標準に適合していることを確保します。

このスキルが適用される場合

• ユーザーが「SEO をチェック」または「ページを最適化」を要求する場合。
• generateMetadata 関数を作成する場合。
• StructuredData または JSON-LD を追加する場合。
• パフォーマンス指標 (LCP/CLS) に関するコードレビューを行う場合。

手順

本スキルは、高トラフィック Next.js サイトを構築するためのエンジニアリング標準を定義します。

1. メタデータアーキテクチャ (タグのロジック)

1.1 動的タイトル戦略

• ルール: 新鮮性を保つため、Month Year を含める必要があります。
• コードパターン:

  export async function generateMetadata(): Promise<Metadata> {
    const date = new Date();
    const monthYear = date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
    return { title: `Codes (${monthYear}) ...` }
  }
  

1.2 Canonical URL の必須化

• 致命的エラー: Canonical が欠落するとリンク評価が分散します。
• 修正: 末尾スラッシュ付きの絶対パスを統一して使用します。

2. 構造化データシステム (Schema Graph)

高トラフィックページ (Hub Page) には、必ず以下の Schema の組み合わせを含める必要があります:

1. BreadcrumbList: 階層構造。
2. FAQPage: People Also Ask 領域を獲得 (>= 5 Questions)。
3. VideoGame: 製品本体。

3. パフォーマンスは SEO である (Performance as SEO)

3.1 画像最適化 (LCP)

• ルール: ファーストビューの大きな画像 (Hero Image) には必ず priority 属性を追加します。

3.2 インタラクション遅延 (FID/INP)

• 最適化: ファーストビュー以下のインタラクションコンポーネント (Chart、Calculator) は next/dynamic を使用して遅延ロードします。

コマンド

• /audit-seo [url]: SEO 完全性チェックを実行します。