mcpField
B
browse-seo

browse-seo

github.com/ulpi-ioマーケティング・グロース5111 回インストール9 週間前に更新
リポジトリ

browse-seo について

browse-seoは、browse CLIを使ったページ内SEO監査をAIエージェントに案内するスキルです。メタデータ、構造化データ、パフォーマンス、リンク、モバイル表示を確認し、優先度付きレポートにまとめます。

主な機能

  1. 01メタデータと見出し構造の抽出
  2. 02構造化データとパフォーマンスの確認
  3. 03リンクとモバイル表示の分析
  4. 04JavaScriptによるカスタムチェック
  5. 05問題の評価と修正優先度の設定

活用シーン

  1. 01対象URLのページ内SEOを監査
  2. 02メタデータやSchemaの問題を特定
  3. 03モバイル表示とページ性能を確認
  4. 04技術SEOの修正順を決定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/ulpi-io/skills --skill browse-seo

インストール後、Claude Code で/browse-seoを入力して読み込まれたか確認します。

詳細

browse-seo：AI エージェント向け SEO 監査

目標

browse CLI を使用して、対象 URL のオンページ SEO 監査を完全に実行します。技術的な SEO シグナルを抽出して分析し、調査結果と推奨事項を含むレポートを作成します。

ステップ 0：ステルス設定を検討する（任意）

監査対象がボット検出（Cloudflare、競合サイトなど）の背後にある場合は、camoufox を使用します。

browse --runtime camoufox --headed goto <url>

ほとんどの一般公開ページでは、デフォルトの Chromium ランタイムで十分です。ブロックに遭遇しない限り、スキップしてください。

ステップ 1：対象 URL に移動する

browse goto <url>
browse wait --network-idle

ページが読み込まれたことを確認します。リダイレクトがあれば記録してください。リダイレクトチェーンは SEO に影響します。ページが 403 またはチャレンジを返す場合は、camoufox に切り替えます（ステップ 0）。

ステップ 2：メタタグを抽出する

browse meta

タイトル、説明、canonical、OG タグ、Twitter Card、robots、viewport が返されます。次の点を確認します。

  • タイトル：設定されていること、60 文字未満であること、対象キーワードが含まれていること
  • 説明：設定されていること、120～160 文字であること、魅力的で独自性があること
  • Canonical：設定されていること、URL が正しいこと（末尾のスラッシュ、www と non-www の違いなど）
  • Robots：意図しない noindex や nofollow がないこと
  • Viewport：モバイル向けに width=device-width, initial-scale=1 が設定されていること
  • OG タグ：og:title、og:description、og:image、og:url がすべて設定されていること
  • Twitter Card：twitter:card、twitter:title、twitter:description が設定されていること

ステップ 3：見出し構造を確認する

browse headings

H1～H6 の階層と各見出しの数が返されます。次の点を確認します。

  • H1 が 1 つだけであること：H1 が複数あると、主要なトピックのシグナルが弱まります
  • H1 がトピックに合っていること：主要キーワードを含める必要があります
  • 論理的な入れ子構造：H1 の下に H2、H2 の下に H3 を配置し、階層を飛ばさないこと
  • キーワードの有無：対象キーワードが H1 タグと H2 タグに含まれていること

ステップ 4：構造化データを抽出する

browse schema

ページから JSON-LD、Microdata、RDFa を抽出します。次の点を確認します。

  • 有無：少なくとも 1 つのスキーマタイプ（Article、Product、Organization など）があること
  • 必須プロパティ：各タイプに、Google のドキュメントに記載された必須フィールドが設定されていること
  • 有効な JSON-LD：構文エラーや不正なオブジェクトがないこと
  • 正しい @type：実際のページコンテンツと一致していること
  • 追加できる項目：コンテンツに適している場合、FAQ、HowTo、Breadcrumb、Review があること

ステップ 5：パフォーマンスを確認する

browse perf

ナビゲーションのタイミング（DNS、TTFB、DOM の読み込み、完全な読み込み）が返されます。次の点を確認します。

  • TTFB：200ms 未満なら良好、600ms を超える場合は問題です
  • DOM Content Loaded：1.5 秒未満なら許容範囲です
  • 完全な読み込み：快適な UX のためには 3 秒未満が目安です
  • DNS：適切なプリフェッチを設定している場合は、ほぼゼロであること

browse network を使用して、レンダリングをブロックするリソース、大きなアセット、リクエスト数を調べます。

ステップ 6：リンク構造を分析する

browse links

テキストと href を含むすべてのアンカー要素が返されます。次の点を確認します。

  • 内部リンク：クロール可能性を確保するのに十分なリンクがあること
  • アンカーテキスト：「ここをクリック」や URL のみではなく、内容が分かること
  • 外部リンク：適切な外部リンクであり、必要に応じて nofollow が設定されていること
  • リンク切れ：404 やエラーページを指すリンクがないこと

ステップ 7：モバイルでの表示を確認する

browse responsive

モバイル（375px）、タブレット（768px）、デスクトップ（1440px）のスクリーンショットを撮影します。次の点を確認します。

  • モバイルレイアウト：横スクロールがなく、拡大しなくても読みやすいこと
  • タップ領域：タッチ操作では最小 48px であること
  • コンテンツの同等性：モバイルにもデスクトップと同じ重要なコンテンツがあること
  • フォントサイズ：ベースフォントが 16px 以上であること

必要に応じて、browse screenshot を使用してページ全体のスクリーンショットを 1 枚撮影します。

ステップ 8：JavaScript によるカスタムチェック

組み込みコマンドではカバーされない項目を対象に、チェックを実行します。

# Image alt tags
browse js "const imgs=[...document.querySelectorAll('img')]; const missing=imgs.filter(i=>!i.alt&&!i.getAttribute('role')); JSON.stringify({total:imgs.length,missingAlt:missing.length,examples:missing.slice(0,5).map(i=>i.src.slice(-60))})"

# Duplicate meta tags
browse js "JSON.stringify({titles:document.querySelectorAll('title').length,descriptions:document.querySelectorAll('meta[name=description]').length,canonicals:document.querySelectorAll('link[rel=canonical]').length})"

# Hreflang tags
browse js "JSON.stringify([...document.querySelectorAll('link[rel=alternate][hreflang]')].map(t=>({lang:t.hreflang,href:t.href})))"

# Lazy images without dimensions
browse js "const lazy=[...document.querySelectorAll('img[loading=lazy]')]; const noDims=lazy.filter(i=>!i.width&&!i.height&&!i.getAttribute('width')); JSON.stringify({lazyImages:lazy.length,missingDimensions:noDims.length})"

robots.txt と sitemap を確認します。

browse goto <origin>/robots.txt
browse text
browse goto <origin>/sitemap.xml
browse text

ステップ 9：監査レポートを生成する

ステップ 2～8 でデータを収集した後、構造化されたレポートを作成します。

  1. 概要：合格／不合格／警告の件数を含む、1 段落の概要
  2. メタタグ：title、description、canonical、robots、OG、Twitter をそれぞれ評価
  3. 見出し構造：H1 の数、階層の問題、キーワードの有無
  4. 構造化データ：検出されたスキーマの種類、不足している機会、検証の問題
  5. パフォーマンス：TTFB、読み込み時間、ブロッキングリソース
  6. リンク分析：内部／外部リンクの比率、リンク切れ、アンカーテキストの品質
  7. モバイル対応：viewport タグ、レスポンシブ表示のスクリーンショット、タップ対象の問題
  8. 画像：alt タグの対応率、遅延読み込み、寸法属性
  9. 推奨事項：優先度を付けた修正案（重大、重要、あれば望ましい）

各セクションを PASS、WARNING、FAIL のいずれかで評価します。推奨事項は影響度の高いものから優先します。

重要なルール

  • ブラウザーの状態はコマンド間で保持されます。Cookie、タブ、セッションの状態は引き継がれます。
  • goto の実行後は、データを抽出する前に必ず wait --network-idle を実行します。
  • 結果はすべてエージェントが解釈します。Browse は生データを抽出しますが、分析はあなたの役割です。
  • 自動で何かをインストールしないでください。
  • スクリーンショットは .browse/ ディレクトリに保存します。
  • ボットをブロックするサイトでは、--runtime camoufox --headed を使用します。

コメント

Markdown 対応