add-seo

プラグインの確認：node "${PLUGIN_ROOT}/scripts/check-version.js" を実行してください。メッセージが出力された場合は、続行する前にユーザーに表示してください。

SEO の追加

Power Pages SPA サイトに、robots.txt、sitemap.xml、メタタグなどの重要な SEO アセットを追加します。

前提条件： このスキルでは、/create-site を使って作成済みの Power Pages SPA サイトが必要です。サイトがまだない場合は、先にそのスキルを実行してください。

基本原則

• まずはクロール可能にする： ほかの SEO 作業を行う前に、有効な robots.txt と sitemap.xml を使って、すべての公開ページを検索エンジンが見つけられるようにする必要があります。
• 正確なメタデータ： メタタグ（タイトル、説明、Open Graph）はページのコンテンツを正確に表す必要があります。誤解を招くメタデータはランキングに悪影響を及ぼします。
• フレームワークに応じた配置： SEO アセットは、検出されたフレームワークに適した場所（public ディレクトリ、レイアウトコンポーネントなど）に配置する必要があります。
• ローカライズされたメタデータを維持する： ${PLUGIN_ROOT}/references/site-modification-integrity.md を読み込んでください。ローカライズがある場合は、言語ごとのタイトル、説明、ソーシャルメタデータ、代替リンク、静的なロケールルートを同期させ、利用できないロケールを公開しないようにしてください。

最初のリクエスト： $ARGUMENTS

ワークフロー

1. フェーズ 1：サイトの存在を確認 → Power Pages プロジェクトを特定します
2. フェーズ 2：SEO 設定を収集 → サイト URL、ページ、設定を確認します
3. フェーズ 3：計画と承認 → 追加する SEO 項目をインラインで提示し、ユーザーの承認を得ます
4. フェーズ 4：robots.txt を追加 → public ディレクトリに robots.txt を作成します
5. フェーズ 5：sitemap.xml を追加 → サイトのルートから sitemap.xml を生成します
6. フェーズ 6：メタタグを追加 → index.html にタイトル、説明、viewport、Open Graph、ファビコンを追加します
7. フェーズ 7：検証とコミット → Playwright で検証し、変更をコミットします

---

フェーズ 1：サイトの存在を確認

目標： Power Pages SPA サイトが存在することを確認し、その構造を把握します。

アクション

1.1 プロジェクトを特定

現在のディレクトリまたは直下のサブディレクトリで powerpages.config.json を探し、プロジェクトのルートを特定します。シェル固有のコマンドではなく、ファイル検索ツール（例：powerpages.config.json および */powerpages.config.json パターンを使った Glob）を使用してください。

見つからない場合： 先に /create-site でサイトを作成するようユーザーに伝えてください。

1.2 既存の設定を読み込む

powerpages.config.json を読み込み、サイト名と設定を取得します。

1.3 フレームワークを検出してルートを調べる

package.json を読み込んでフレームワークを特定し、主要なファイルを探します。フレームワーク、public ディレクトリ、index HTML の対応関係、およびルートの検出方法については、${PLUGIN_ROOT}/references/framework-conventions.md を参照してください。

すべてのルートの一覧を作成します（例：/、/about、/contact、/blog）。

出力

• 特定したプロジェクトのルートパス
• 検出したフレームワーク（React、Vue、Angular、または Astro）
• 検出可能なルートの全一覧

---

フェーズ 2：SEO 設定を収集

目標： 変更を加える前に、ユーザーから SEO に関するすべての設定を収集します。

アクション

AskUserQuestion を使って SEO の設定を収集します。

呼び出し 1

質問	ヘッダー	選択肢
サイトの本番 URL は何ですか？（例：https://contoso.powerappsportals.com）	サイト URL	(自由入力 — ユーザーが「その他」から入力できるよう、汎用の選択肢を 1 つだけ使用)
検索エンジンのインデックスから除外するページはどれですか？	除外対象	なし — すべてのページをインデックスに登録（推奨）、管理者／認証ページのみ、自分で指定

呼び出し 2

質問	ヘッダー	選択肢
検索結果に表示するメタディスクリプションは何ですか？	説明	(自由入力 — ユーザーが「その他」から入力できるよう、汎用の選択肢を 1 つだけ使用)
ソーシャルメディアでの共有用に Open Graph タグを追加しますか？	OG タグ	はい — Open Graph タグと Twitter Card タグを追加（推奨）、いいえ — ソーシャルタグを省略

出力

• 本番 URL の確認
• 除外リストの確定
• メタディスクリプションのテキスト
• Open Graph タグの設定（はい／いいえ）

---

フェーズ 3：計画と承認

目標： SEO 計画の全容をユーザーに提示し、変更を加える前に明示的な承認を得ます。

アクション

追加する SEO 項目を、わかりやすいインラインの要約として提示します。

1. robots.txt の内容 — 許可または禁止するパス
2. sitemap.xml の内容 — 検出したすべてのルート、公開 URL、優先度の割り当て
3. index.html に追加するメタタグ — title、description、viewport、charset、Open Graph、Twitter Card
4. ファビコン — リンクタグとプレースホルダー SVG

🚦 ゲート（計画 · add-seo:3.plan-approval）： robots.txt／sitemap.xml／index.html に書き込む前に、SEO 追加項目の最終承認を得ます。

トリガー： フェーズ 3 で計画全体（robots.txt、sitemap.xml、メタタグ、ファビコン）をインラインで提示したとき。 確認する理由： SEO アセットは、公開 URL の誤り、除外設定の誤り、または不要な OG タグがある状態でディスクに保存される可能性があります。修正はできますが、Git の履歴が煩雑になります。 キャンセルした場合： 何も残りません。ファイルへの書き込みはまだありません。

計画を提示した後、AskUserQuestion を使用して承認を得ます。

質問	ヘッダー	選択肢
SEO 計画はこちらです。どのように進めますか？	SEO 計画の承認	承認して進める（推奨）、変更したい

ユーザーが「変更したい」を選択した場合は、変更したい内容を尋ね、それに応じて計画を更新し、修正版の計画を再度提示して承認を得ます。

出力

• 実装の準備が整った、ユーザー承認済みの SEO 計画

---

フェーズ 4：robots.txt の追加

目標： 検索エンジンにクロールするページを伝える、有効な robots.txt を作成します。

アクション

公開ディレクトリに robots.txt を作成します（<PROJECT_ROOT>/public/robots.txt）。

User-agent: *
Allow: /

Sitemap: <PRODUCTION_URL>/sitemap.xml

ユーザーが除外するページを指定した場合は、Disallow ディレクティブを追加します。

User-agent: *
Allow: /
Disallow: /admin/
Disallow: /auth/

Sitemap: <PRODUCTION_URL>/sitemap.xml

出力

• 適切なディレクティブを含む public/robots.txt を作成

---

フェーズ 5：sitemap.xml の追加

目標： 発見可能なすべてのルートを適切な優先度で列挙した、完全な sitemap.xml を生成します。

アクション

公開ディレクトリに sitemap.xml を作成します（<PROJECT_ROOT>/public/sitemap.xml）。

公開 URL を使用し、検出した各ルートのエントリを生成します。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc><PRODUCTION_URL>/</loc>
    <lastmod><TODAY_DATE></lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc><PRODUCTION_URL>/about</loc>
    <lastmod><TODAY_DATE></lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  
</urlset>

優先度のルール：

• ホームページ（/）：1.0
• トップレベルのページ：0.8
• サブページ：0.6

除外： ユーザーが除外を選択したルート（例：/admin/*、/auth/*）は含めないでください。

出力

• すべてのルートと正しい URL を含み、プレースホルダーのない public/sitemap.xml を作成

---

フェーズ 6：メタタグの追加

目標： サイトの HTML に、包括的なメタタグ、Open Graph タグ、ファビコンを追加します。

アクション

6.1 必須メタタグ

サイトの index.html にメタタグを追加または更新します（場所はフレームワークによって異なります。フェーズ 1.3 を参照）。

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><SITE_TITLE></title>
  <meta name="description" content="<META_DESCRIPTION>" />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="<PRODUCTION_URL>/" />
  <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
</head>

6.2 Open Graph タグ（ユーザーが選択した場合）

<head> 内に Open Graph および Twitter Card のメタタグを追加します。

<meta property="og:type" content="website" />
<meta property="og:title" content="<SITE_TITLE>" />
<meta property="og:description" content="<META_DESCRIPTION>" />
<meta property="og:url" content="<PRODUCTION_URL>/" />
<meta property="og:site_name" content="<SITE_TITLE>" />


<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="<SITE_TITLE>" />
<meta name="twitter:description" content="<META_DESCRIPTION>" />

6.3 ファビコン

公開ディレクトリにファビコンがすでに存在するか確認します。存在しない場合は、シンプルな SVG ファビコンのリンクを追加します。

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

サイトのメインカラーを使用して、最小限のプレースホルダー public/favicon.svg を作成します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" rx="20" fill="<PRIMARY_COLOR>"/>
  <text x="50" y="70" font-size="50" text-anchor="middle" fill="white" font-family="system-ui, sans-serif" font-weight="bold"><FIRST_LETTER></text>
</svg>

<FIRST_LETTER> はサイト名の最初の文字、<PRIMARY_COLOR> はサイトの設定におけるテーマカラーです。

6.4 Astro 固有の処理

Astro サイトの場合、メタタグはルートの index.html ではなく、ベースレイアウトコンポーネント（例：src/layouts/Layout.astro）に追加してください。Astro ではコンポーネントベースで <head> を管理します。

出力

• index.html（または Astro の同等のレイアウト）にメタタグを追加
• Open Graph および Twitter Card タグを追加（選択した場合）
• ファビコン SVG を作成してリンク（すでに存在する場合を除く）

---

フェーズ 7：検証とコミット

目標： すべての SEO アセットが配置されていることを確認し、Playwright で検証して、変更をコミットします。

アクション

7.1 ファイルの存在確認

以下のファイルが作成または更新されたことを確認します。

• public/robots.txt
• public/sitemap.xml
• public/favicon.svg（作成した場合）
• index.html または同等のファイル（メタタグを追加）

7.2 Playwright による検証

開発サーバーが実行中の場合は（または起動して）以下を行います。

1. サイトルートに移動し、browser_snapshot を使用してページソースにメタタグが存在することを確認します
2. /robots.txt に移動し、読み込まれることを確認します
3. /sitemap.xml に移動し、読み込まれることを確認します

7.2b 最終的なサイト整合性ゲート

すべての SEO ソースおよびメタデータの変更とブラウザー検証が完了したら、次を実行します。

node "${PLUGIN_ROOT}/scripts/validate-site-integrity.js" --projectRoot "<PROJECT_ROOT>"

完了を記録したり最終コミットを作成したりする前に、すべてのブロッキングエラーを修正してください。双方向かつ 拡張された内容でレビュー所見を調査して報告します。後でソースを変更した場合は、このゲートを再実行してください。

7.3 スキル使用状況の記録

参照: ${PLUGIN_ROOT}/references/skill-tracking-reference.md

参照内のスキル追跡手順に従って、このスキルの使用状況を記録します。--skillName "AddSeo" を使用します。

7.4 Git コミット

重要 — このステップは必須です。完了する前に SEO の変更を必ずコミットする必要があります。このステップをスキップしないでください。

特定の SEO ファイルをステージしてコミットします。

git add public/robots.txt public/sitemap.xml public/favicon.svg index.html
git commit -m "Add SEO: robots.txt, sitemap.xml, meta tags, favicon"

実際に作成された内容に基づいてファイルパスを調整します（例: Astro サイトの場合は index.html ではなく src/layouts/Layout.astro を含める、作成されていない場合は favicon.svg を省略する）。このスキルによって作成または変更されたファイルのみをステージしてください。

7.5 サマリーの提示

追加された内容のサマリーを提示します。

アセット	ステータス	詳細
robots.txt	作成済み	すべてのクローラーを許可し、サイトマップを参照
sitemap.xml	作成済み	X 個の URL を優先度付きでマッピング
メタタグ	追加済み	title、description、viewport、canonical、robots
Open Graph	追加済み/スキップ	og:title、og:description、og:url、Twitter Card
Favicon	作成済み/スキップ	サイトの頭文字を使用した SVG favicon

7.6 次のステップの提案

サマリーの後、以下を提案します。

• サイトをデプロイして SEO の変更を反映: /deploy-site
• データモデルが必要な場合: /setup-datamodel
• より高度な SEO の場合: 構造化データ（JSON-LD）、パフォーマンス最適化、アクセシビリティ監査を検討

出力

• すべてのファイルをディスク上で検証済み
• Playwright 検証に合格
• すべての SEO の変更を含む Git コミットを作成済み

---

重要な注意事項

進捗の追跡

開始時に TaskCreate を使用して各フェーズを追跡します。

タスク	説明
フェーズ 1	サイトの存在を確認し、フレームワークを検出
フェーズ 2	ユーザーから SEO 設定を収集
フェーズ 3	計画を提示し、ユーザーの承認を取得
フェーズ 4	robots.txt を作成
フェーズ 5	sitemap.xml を生成
フェーズ 6	メタタグ、Open Graph、favicon を追加
フェーズ 7	Playwright で検証し、コミット

各タスクが完了したら TaskUpdate で更新します。

重要な判断ポイント

• フェーズ 1: powerpages.config.json が見つからない場合は、停止してユーザーを /create-site にリダイレクトします。
• フェーズ 2: ユーザーがカスタム除外を指定した場合は、続行する前に正確なパスを確認します。
• フェーズ 3: ユーザーが計画を明示的に承認するまで、実装に進まないでください。
• フェーズ 6.4: フレームワークが Astro の場合、メタタグは index.html ではなくレイアウトコンポーネントに配置します。
• フェーズ 7.2: Playwright 検証が失敗した場合（例: robots.txt が読み込まれない）、コミットする前に診断して修正してください。

フェーズ 1 から開始します: サイトの存在を確認