seo-rendering について
seo-rendering は、HTML の初期状態と JavaScript 実行後を比較し、JavaScript を実行しないクローラーから主なコンテンツが見えるかを調べる SEO 監査スキルです。ビルドやサーバーのコードは自動変更せず、構成上の助言を行います。
主な機能
- 01初期 HTML と描画後の内容を比較
- 02CSR・SSR・SSG・ISR を判別
- 03ハイドレーション阻害と遅延読み込みを確認
- 04JavaScript 実行後のみの内容を検出
- 05フレームワーク別の描画方法を提案
活用シーン
- 01初期 HTML に主要コンテンツが乏しいページの調査
- 02構造化データの JavaScript 依存を確認
- 03スクロールや操作後に読み込む主コンテンツの評価
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ hainrixz/ claude-seo-ai --skill seo-renderingインストール後、Claude Code で/seo-renderingを入力して読み込まれたか確認します。
詳細
seo-rendering (M4)
ハイドレーション後にしか存在しないコンテンツは、JavaScriptを実行しないコンシューマーからは見えません。GoogleはJSをレンダリングします(公式ドキュメントあり)。一方、ほとんどのサードパーティ製AIクローラーはレンダリングしないと報告されています(傾向を示す情報です。Honestyを参照)。そのため、CSRのみのシェルは主にAIからの可視性とクロール効率の問題です。JSへの依存はファーストペイントも遅らせます。これがLCP/INPにどう影響するかは、references/cwv-thresholds.mdを参照してください。
入力
ディスパッチ用エンベロープで指定されたPageSnapshotを使用します。<run_dir>/pages/<slug>.jsonからparsedとparsed_rendered、およびrender{needed,signals,used,confidence,hint,delta}ブロックを読み取ります。スクリプトはrawとrenderedの差分をすでに計算しています。raw_html_path/rendered_html_pathにはディスク上のファイル名が記載されています。pages/<slug>.htmlをGrepして逐語的な根拠を確認します。サイトのアーティファクトは<run_dir>/site/{robots.json,sitemaps.json,discovery.json}にあります。audit.mjsがすでに出力した決定的な検出結果は<run_dir>/findings.deterministic.jsonに記載されています。これらのIDは再出力せず、モデルが判定した検出結果のみを追加してください。スナップショットがなく、URL/パスを直接指定して呼び出された場合は、まずnode "${CLAUDE_PLUGIN_ROOT}/scripts/snapshot.mjs" <target> --out "${CLAUDE_PLUGIN_DATA}/runs"を実行し、表示されたスナップショットパスを使用してください。
監査
PageSnapshot(render.usedがnoneでなければparsed_rendered、そうでなければparsed)と、スクリプトが計算したrender.deltaを使用して、次の項目を確認します。
- コンテンツの差分:
raw_html_pathとrendered_html_pathを比較し、主要テキスト、内部リンク、見出し(h1~h3)、<script type="application/ld+json">ブロックのうち、JavaScript実行後にのみ現れる割合を測定します。 - 戦略の分類:CSRのみ(rawシェルが空またはほぼ空で、コンテンツがクライアント側で挿入される)/SSR/SSG(事前レンダリングされた静的コンテンツ)/ISR(事前レンダリング後に再検証)。raw HTMLの完全性とフレームワークのシグナル(
__NEXT_DATA__、ハイドレーションマーカー、data-reactroot、ビルドマニフェスト)を使用します。 - ハイドレーションでブロックされるテキスト:raw HTMLには存在するが、ハイドレーションまで非表示または空である主要コンテンツ、あるいはクライアント専用のアイランドにのみレンダリングされるコンテンツ。
- 遅延読み込みされるメインコンテンツ:スクロール、インターセクション、操作が必要なファーストビュー内または主要コンテンツ。操作しないクローラーには見えません。
- AIゲート:h1、主要本文、またはJSON-LDが
rendered_html_pathにのみ存在する場合、そのページは非JS AIクローラーが確実に利用できないものとしてフラグを立てます。
修正(修正可能性:助言のみ)
レンダリング戦略は破損リスクが高いフレームワーク/アーキテクチャ上の判断であるため、M4は助言のみです。診断と優先順位付けを行いますが、ビルド/サーバーコードを自動編集することはありません。
- フレームワーク固有のガイダンスを提示します。例:CSRのみのルートをSSG/ISRまたはSSRに移行する(Next.js App Routerのサーバーコンポーネント/
generateStaticParamsとrevalidate、またはNuxt/Astro/SvelteKitの同等機能)。 - 主要コンテンツには事前レンダリングまたは部分的な事前レンダリングを推奨し、クライアント専用のアイランドは真にインタラクティブなウィジェットに限定します。
- 適切な戦略がデータの鮮度やスナップショットからは分からない制約に左右される場合は、ユーザー向けに明確なTODOを残します。
revalidateの間隔を決して捏造せず、戦略の選択を断定しないでください。すべての検出結果にはfixable: advisoryを設定します。
検証
render_diff:raw_html_pathとrendered_html_pathのコンテンツ差分率を算出します(renderedには存在するがrawには存在しない主要テキスト/リンク/見出し/JSON-LDの割合)。主要コンテンツの差分が大きければ、JSへの依存が確認できます。- 正確な
rendered_html_pathのレンダリングには、ヘッドレスブラウザーのデータティアが必要です。そのティアを利用できない場合、ステータスはneeds_apiです。誤ってpassにしないでください。
Findings
schema/finding.schema.json に従って findings を出力します。重大度ポリシー:5 は、サイト/テンプレートのスコープで、適格性を失わせる壊滅的な事実にのみ使用します。4 は重大、3 は中程度、2 は軽微、1 は表面的、0 は情報提供のみです。スコアを上限設定できるのは、有効なカテゴリにおける established の重大度 5 の fail のみです(references/scoring-model.md)。例:
M4.render.csr_only_primary_content— H1 と本文テキストはrendered_html_pathにのみ存在し、raw HTML は空のシェルです(fail、重大度 5、軸both、fixable: advisory、信頼度established)。これはこのモジュールで唯一スコアに上限を設定する finding であり、テンプレート/サイトのスコープでのみ適用されます。M4.render.jsonld_js_injected— JSON-LD ブロックはハイドレーション後にのみ表示されるため、非 JS のコンシューマーには構造化データが見えません(warn、重大度 3、軸ai、fixable: advisory、信頼度established)。M4.render.lazy_main_content— メインコンテンツはスクロールまたは操作後にのみ読み込まれます(warn、重大度 3、軸both、fixable: advisory、信頼度directional)。M4.render.needs_renderer— ページには CSR の兆候がありますが、レンダラーを利用できなかったため、差分を測定できませんでした(needs_api、重大度 3、軸both)。 各 finding では、evidence.observedにそのページの raw と rendered の差分を引用します。verification.reproduceは実行可能なrender_diffアサーションとします。expected_impactは区分と信頼度タグを付けます(単独の % は使用しません)。
誠実性
- Googlebot は JavaScript をレンダリングします。Google が文書化しているとおり、二段階目の処理としてキューに登録されたレンダリングを行うため、適切に構築された CSR アプリでもインデックスに登録され、ランキングされる可能性があります。この点は
establishedです。CSR のみの構成は、自動的に Google で失敗するものではなく、AI コンシューマーとクロール効率に対するリスクとして扱ってください。 - 「ほとんどの AI クローラーは JavaScript を実行しない」は文書化された事実ではなく、
directionalです。 ベンダーが公開しているのはユーザーエージェントのトークンであり、レンダリング機能ではありません。「これらのクローラーが JS を実行することは確認できず、公開されている動作からは実行しないと考えられます」と表現してください。ベンダーの発言として述べてはいけません。 - ランキング要因として「SSR は CSR より上位にランクされる」と主張しないでください。実際に重要なのは、非 JS コンシューマーに対するコンテンツの可用性と初回描画の高速化であり、レンダリングモードによる優遇ではありません。ページが本質的にインタラクティブで、メインコンテンツが引き続きサーバーから配信される場合は、CSR を維持してください。
- 実際のヘッドレスブラウザーを使わずに測定したレンダリング差分は、測定とは言えません。レンダラーの階層を利用できなかった場合は、フレームワークのマーカーだけから差分を推測せず、
needs_apiとしてください。