seo-review

SEO レビュー

アプリケーションの検索エンジン最適化と見つけやすさを評価します。このレビューでは、通常の開発中には見えにくい SEO の問題を検出します。メタタグの不足、構造化データの不備、クロールされにくい状態、サイトマップの欠如、ソーシャル共有の問題などです。多くの SPA は、SEO をまったく考慮せずに公開されています。

使用するタイミング

次の場合に /seo-review を使用します。

• 一般公開するウェブサイトやアプリケーションの公開前
• ウェブサイトの再設計や移行の後
• オーガニックトラフィックが成長のチャネルである場合
• SPA フレームワーク（React、Vue、Angular）への切り替え後
• ソーシャル共有（Open Graph）が重要な場合
• コンテンツマーケティングのページを設定する場合

参照する標準

• Google Search Central — SEO のベストプラクティスとガイドライン
• Schema.org — 構造化データの語彙
• Open Graph Protocol — ソーシャル共有用のメタタグ
• Twitter Card — Twitter 共有用のマークアップ
• W3C Semantic HTML — アクセシビリティと SEO のセマンティクス
• Web.dev SEO Guidelines — Google の SEO 推奨事項

フェーズの概要

Phase 1: EDUCATE   → Why SEO matters and what we check
Phase 2: SCOPE     → Identify key pages, content types, SEO goals
Phase 3: ANALYZE   → Browser-based SEO validation
Phase 4: REPORT    → Findings with impact assessment and priority
Phase 5: REMEDIATE → Fix guidance + YAML regression tests

---

フェーズ 1：理解

重要な理由： ウェブサイトのトラフィック全体の 53% はオーガニック検索から発生しています（BrightEdge）。Google 検索結果の 1 位は全クリック数の 27.6% を獲得し、10 位は 2.4% です（Backlinko）。SPA はクローラーに空の HTML を返すことが多く、何百万ものページが検索対象から見えなくなります。適切な SEO に小手先の手法は不要です。検索エンジンがコンテンツを発見し、理解できるようにすることが重要です。

このレビューでは、技術的な SEO の基盤、つまりコンテンツ戦略が重要になる前に正しく整えておくべき項目を確認します。

---

フェーズ 2：範囲の設定

コンテキストを収集する

1. コードベースから自動検出する項目：

   • フレームワークとレンダリング方式（SSR、SSG、CSR、ISR）
   • メタタグの管理方法（react-helmet、next/head、vue-meta など）
   • サイトマップの生成
   • robots.txt の設定
   • 構造化データ（JSON-LD、microdata）
   • i18n/hreflang の設定
   • canonical URL の処理
   • ルート構造とページの種類

2. ユーザーに確認する項目（一度に 1 つずつ）：

   • 対象 URL：アプリはどこで稼働していますか？（実際のクロールに近づけるため、本番環境を推奨）
   • 重要なページ：検索で特に重要なページはどれですか？（ホームページ、製品ページ、ブログ記事、ランディングページ）
   • 対象キーワード：上位表示を目指す主要なキーワードはありますか？（任意。コンテンツの評価に使用）
   • ソーシャル共有の重要性：Open Graph／Twitter Cards は必要ですか？（デフォルトでは、一般公開サイトに必要です）
   • 多言語対応：サイトは複数の言語に対応していますか？（自動検出）

3. ページの種類を特定する：

   • ホームページ
   • コンテンツページ（ブログ、ドキュメント、概要）
   • 製品／一覧ページ
   • 動的ページ（検索結果、ユーザープロフィール）
   • ユーティリティページ（ログイン、404、利用規約）

---

フェーズ 3：分析

record_evidence: true を指定して new_session でブラウザーセッションを開始します。重要な各ページで、すべてのチェックカテゴリを実行します。

カテゴリ A：メタタグとヘッド要素（META）

チェック ID	チェック項目	標準	方法
META-01	固有で内容を適切に表す <title>（50～60 文字）	Google ガイドライン	<title> を抽出し、長さと固有性を確認
META-02	メタディスクリプションが設定されている（120～160 文字）	Google ガイドライン	<meta name="description"> を確認
META-03	正規 URL が正しく設定されている	Google ガイドライン	<link rel="canonical"> を確認
META-04	viewport メタタグが設定されている	モバイル SEO	<meta name="viewport"> を確認
META-05	文字セットが宣言されている	HTML 標準	<meta charset> を確認
META-06	メタタグが重複していない	SEO のベストプラクティス	タイトルとディスクリプションの重複を確認
META-07	ファビコンが設定されている	ブランディング／SEO	<link rel="icon"> を確認
META-08	言語が宣言されている	SEO／アクセシビリティ	<html lang=""> を確認
META-09	重要なページに meta robots noindex が設定されていない	インデックス登録	<meta name="robots"> を確認
META-10	多言語対応の場合、hreflang タグが設定されている	国際 SEO	<link rel="alternate" hreflang=""> を確認

ブラウザーでの検証： inspect_page を使って DOM を読み取ります。JavaScript ですべての <head> 要素を抽出します。

カテゴリ B：構造化データ（SCHEMA）

チェック ID	チェック項目	標準	方法
SCHEMA-01	JSON-LD 構造化データが設定されている	Schema.org	<script type="application/ld+json"> を確認
SCHEMA-02	スキーマのタイプがページの内容と一致している	Schema.org	タイプ（Organization、Product、Article など）を検証
SCHEMA-03	必須プロパティが設定されている	Schema.org	タイプの要件に照らして検証
SCHEMA-04	JSON-LD が有効な JSON である	Schema.org	JSON を解析して検証
SCHEMA-05	廃止されたスキーマプロパティがない	Schema.org	廃止されたフィールドを確認
SCHEMA-06	パンくずリストの構造化データが設定されている	Schema.org	内部ページに BreadcrumbList があるか確認
SCHEMA-07	FAQ の構造化データが設定されている（該当する場合）	Schema.org	FAQ セクションに FAQPage があるか確認
SCHEMA-08	レビュー／評価の構造化データが設定されている（該当する場合）	Schema.org	AggregateRating を確認

ブラウザーでの検証： JavaScript ですべての JSON-LD スクリプトを抽出します。構造を解析して検証します。ページの内容とスキーマの記述を照合します。

カテゴリ C：Open Graph とソーシャル共有（OG）

チェック ID	チェック項目	標準	方法
OG-01	og:title が設定され、内容を適切に表している	Open Graph	<meta property="og:title"> を確認
OG-02	og:description が設定されている	Open Graph	<meta property="og:description"> を確認
OG-03	og:image が設定され、アクセス可能である	Open Graph	<meta property="og:image"> を確認し、URL が読み込めることを検証
OG-04	og:image のサイズが十分である（1200x630 を推奨）	Open Graph	画像サイズを確認
OG-05	og:url が正規 URL と一致している	Open Graph	og:url と正規 URL を比較
OG-06	og:type が正しく設定されている	Open Graph	og:type の値を確認
OG-07	Twitter カードのメタタグが設定されている	Twitter Cards	twitter:card、twitter:title などを確認
OG-08	ソーシャル共有のプレビューが正しく表示される	UX	OG タグからプレビューを構成

ブラウザーでの検証： すべての OG タグと Twitter のメタタグを抽出します。og:image の URL にアクセスできることを確認します。プレビューを構成します。

カテゴリ D：クロール可能性とインデックス登録（CRAWL）

チェック ID	チェック項目	標準	方法
CRAWL-01	robots.txt が存在し、有効である	Google のガイドライン	/robots.txt を取得
CRAWL-02	Sitemap.xml が存在し、有効である	Google のガイドライン	/sitemap.xml を取得し、形式を検証
CRAWL-03	robots.txt でサイトマップが参照されている	ベストプラクティス	robots.txt に Sitemap ディレクティブがあるか確認
CRAWL-04	重要なページがサイトマップに含まれている	SEO	主要ページとサイトマップの URL を照合
CRAWL-05	内部リンクにリンク切れがない	クロール可能性	主要ページにあるすべての内部リンクを確認
CRAWL-06	リダイレクトチェーンがない（2 ホップ超）	クロール効率	リダイレクトをたどり、ホップ数を数える
CRAWL-07	URL 構造が簡潔である（過剰なパラメーターがない）	SEO	URL パターンの簡潔さを確認
CRAWL-08	404 ページが正しい HTTP ステータスを返す	SEO	存在しない URL にアクセスし、ステータスを確認
CRAWL-09	孤立したページがない（ナビゲーションからアクセス可能）	クロール可能性	主要ページがホームページ／ナビゲーションからリンクされていることを確認
CRAWL-10	JavaScript がなくても SSR/SSG コンテンツが表示される	SPA SEO	JS を無効にし、コンテンツがレンダリングされるか確認
CRAWL-11	クローラー向けのページ読み込み時間	クロールバジェット	サーバーの応答時間を測定

ブラウザーでの検証： robots.txt と sitemap.xml にアクセスします。内部リンクをたどります。JavaScript を無効にして、サーバー側でレンダリングされたコンテンツをテストします。HTTP ステータスコードを確認します。

カテゴリ E：セマンティック HTML とコンテンツ（SEM）

チェック ID	チェック項目	標準	方法
SEM-01	ページごとに <h1> が 1 つだけある	SEO のベストプラクティス	h1 要素の数を数える
SEM-02	見出しの階層が論理的である（h1→h2→h3）	SEO/a11y	見出しの順序を確認
SEM-03	画像に内容を説明する alt テキストがある	SEO/a11y	alt 属性が内容を適切に説明しているか確認
SEM-04	内部リンクに内容がわかるアンカーテキストを使用している	SEO	リンクに「ここをクリック」や URL のみのテキストが使われていないか確認
SEM-05	セマンティック HTML 要素（nav、main、article、section）が使用されている	SEO	セマンティックなランドマークがあるか確認
SEM-06	コンテンツと HTML の比率が適切である	SEO	テキストコンテンツと HTML マークアップを比較して算出
SEM-07	ページ間でコンテンツが重複していない	SEO	ページ間の主要なコンテンツセクションを比較
SEM-08	URL が人間にとって読みやすい	SEO	説明的なスラッグか、ID／ハッシュかを確認

ブラウザーでの検証： JavaScript を使って見出し、リンク、画像、セマンティック要素を抽出します。コンテンツの構造を分析します。

カテゴリ F：テクニカル SEO（TECH）

チェック ID	チェック項目	標準	方法
TECH-01	すべてのページで HTTPS を使用している	Google のランキングシグナル	プロトコルを確認
TECH-02	HTTP → HTTPS のリダイレクトが機能する	SEO	HTTP URL のリダイレクトをテスト
TECH-03	www → 非 www（またはその逆）のリダイレクトに一貫性がある	SEO	両方の URL をテスト
TECH-04	モバイルフレンドリーである（レスポンシブ）	Google のモバイルファースト	viewport とレスポンシブ動作を確認
TECH-05	Core Web Vitals が「Good」のしきい値を満たしている	Google のランキングシグナル	LCP、INP、CLS を測定
TECH-06	レンダリングをブロックするリソースがない	ページ速度	スクリプト／スタイルの読み込みを確認
TECH-07	移動したコンテンツに適切な 301 リダイレクトが設定されている	SEO	該当する場合、既知の古い URL を確認
TECH-08	国際ターゲティングが正しい（複数地域に対応している場合）	国際 SEO	hreflang と地域ターゲティングを確認

ブラウザーでの検証： リダイレクトをテストし、パフォーマンス指標を測定して、モバイルでの表示を確認します。

---

フェーズ 4：レポート

shiplight/reports/seo-review-{date}.md に保存する、構造化されたレポートを生成します。

# SEO Review Report
**Date:** {date}
**URL:** {url}
**Pages reviewed:** {list}
**Rendering:** {SSR/SSG/CSR/ISR}

## Overall Score: {X}/10 | Confidence: {X}%

## Score Breakdown
| Category | Score | Findings |
|----------|-------|----------|
| Meta Tags (META) | 7/10 | 1 high, 2 medium |
| Structured Data (SCHEMA) | 4/10 | 1 critical, 1 high |
| Social Sharing (OG) | 6/10 | 2 high |
| Crawlability (CRAWL) | 5/10 | 1 critical, 1 high |
| Semantic HTML (SEM) | 8/10 | 1 medium |
| Technical SEO (TECH) | 7/10 | 1 high |

## Page-by-Page Summary
| Page | Title | Description | OG Image | Schema | H1 | Score |
|------|-------|-------------|----------|--------|----|-------|
| / | ✅ | ✅ | ❌ missing | ❌ none | ✅ | 6/10 |
| /blog | ✅ | ⚠️ too short | ✅ | ✅ Article | ✅ | 8/10 |

## Findings
(structured findings with evidence and impact)

信頼度スコア

• 90-100%：ブラウザーで検証済み — タグの有無、URL のアクセス可否
• 70-89%：コンテンツ分析から問題が示唆される（例：内容の薄いコンテンツ、一般的すぎる alt テキスト）
• 50-69%：明確な違反はないものの、ベストプラクティスを推奨
• 50% 未満：報告しない

---

フェーズ 5：修正

1. 修正ガイダンス（例）

#### CRAWL-10: Content not visible without JavaScript
**Impact:** Search engines may not index your content (especially Google Discover, Bing, social crawlers)
**Current:** Client-side rendered React app, empty HTML shell
**Fix:** Implement SSR or SSG:
- Next.js: Use `getServerSideProps` or `getStaticProps`
- Nuxt: Default SSR mode
- Gatsby: Static generation
- Or: Add prerendering service (prerender.io, rendertron)
**Quick win:** Ensure critical content is in initial HTML response

2. YAML 回帰テスト

- name: meta-01-title-present
  description: Verify each key page has a unique, properly-sized title tag
  severity: high
  standard: Google-SEO-Guidelines
  steps:
    - URL: /
    - description: Assert the page title is present and 20-60 characters
      js: |
        const title = await page.title();
        if (!title || title.trim() === '') {
          throw new Error('Page has no title');
        }
        if (title.length < 20) {
          throw new Error(`Title too short (${title.length} chars): "${title}"`);
        }
        if (title.length > 60) {
          throw new Error(`Title too long (${title.length} chars): "${title}"`);
        }
        console.log(`Title OK (${title.length} chars): "${title}"`);
    - VERIFY: Page has a descriptive title between 20 and 60 characters

すべての YAML テストを shiplight/tests/seo-review.test.yaml に保存します。

---

深度レベル

• --quick：ホームページのメタタグ、canonical、robots.txt のみを確認します。約 2 分です。
• default：主要なページのすべてのカテゴリを確認します。約 8〜12 分です。
• --thorough：すべてのカテゴリ、サイト全体のクロール、すべてのページタイプ、コンテンツ分析を行います。約 20〜30 分です。

ヒント

• JavaScript を無効にしてテストし、検索エンジンから見える状態を確認します（特に SPA の場合）。
• inspect_page の DOM 出力を使うと、<head> の内容を効率よく抽出できます。
• sitemap.xml を手動で確認します。自動生成されたサイトマップには、インデックスに登録すべきでないページが含まれていることがよくあります。
• OG 画像には絶対 URL が必要です。相対 URL はソーシャル共有では機能しません。
• SPA の SEO で重要な問いは、「初期 HTML にコンテンツが含まれているか」です。
• close_session でセッションを終了し、証跡には generate_html_report を使用します。