Reactサイト監査
Scanverraはブラウザと同じ方法であなたのReactアプリを読み込み、JavaScriptの実行前後で実際にページに何が存在するかをチェックします。クライアントレンダリング型のSPAでは、そのギャップこそがSEO上の問題の大半が潜む場所だからです。
Reactに対するチェック項目
シングルページアプリケーションのレンダリングとコンテンツ配信の仕組みに特化した5つのチェックです。
JavaScript実行前に表示されるコンテンツ
初回のHTMLレスポンスが空の<div id="root"></div>とscriptタグだけなのか、それともJSエンジンを持たないクローラーでも読み取れる実質的なコンテンツを持っているかです。
バンドルサイズとコード分割
すべてのルートで配信される単一の大きなJavaScriptバンドルか、それともルート単位で分割されているか - 不必要に重い初回読み込みJSは、ページがインタラクティブになるまでの時間を遅らせます。
クライアント側でしか更新されないメタタグ
マウント後にdocument.titleやクライアント側のheadマネージャーで設定されたタイトルやdescriptionは、あなたのJavaScriptを先に実行しないものにとっては見えない状態です。
コンソールエラーとエラーバウンダリ
失敗した箇所の周りをバウンダリで捕捉・封じ込めるのではなく、ビュー全体を巻き込んで落ちる未処理のレンダリングエラーです。
クライアント側ナビゲーション時のレイアウトの安定性
スペースを確保しないままコンテンツを入れ替えるルート遷移で、ページが一度落ち着いて見えた後にレイアウトシフトが発生するケースです。
How it works
URLの入力からSPA特化の修正提案まで、たった3ステップです。
アプリのURLを貼り付け
公開されているReactアプリであれば、Viteビルド、Create React App、自前構成のいずれでも同じように動作します。
生のHTMLとレンダリング後のページを比較
初回レスポンスと、Reactがマウントした後に画面に表示される内容を比較します。ここがまさにSPA特有のSEO問題が潜む場所です。
SPA特化の修正提案を取得
サーバーがレンダリングを肩代わりしていることを前提とした一般論ではなく、クライアントレンダリング型アプリ向けに書かれた提案です。
Frequently asked questions
私のReactアプリはサーバーフレームワークを持たない純粋なクライアントレンダリング型のSPAですが、Scanverraで監査できますか?
できます。監査は実際のブラウザ環境でページを読み込み、訪問者が体験するのと同じようにあなたのJavaScriptを実行させてからスコアリングします。動作にサーバーレンダリングは必要ありません。
空の<div id="root">は問題として検出されますか?
JavaScriptが実行される前のHTMLに意味のある内容が存在しない場合、それはコンテンツの可視性とSEOの問題として表示されます。空のroot divそれ自体が本質的に誤りだからではなく、あなたのJSを実行できない、あるいは実行しないものにとっては何も見えないからです。
ScanverraはCreate React AppとViteのどちらを使っているか判別できますか?
id="root"のマウントポイント、既知のバンドルファイル名パターン、開発ツール用フックなど、幅広いシグナルからReact自体を検出します。どのビルドツールが生成したものかは問いません。結果に特定のツールチェーン名は表示されません。
監査は実際にJavaScriptを実行しますか、それとも単にHTMLを取得するだけですか?
静的なHTML取得ではなく、完全なブラウザレンダリングを実行します。そのため、完全にマウント・ハイドレートされたページを見たうえで、そのJavaScriptが実行される前に何が存在していたかを別途チェックします。
Reactのコンソール警告やエラーはスコアに影響しますか?
はい。コンソールエラーはベストプラクティススコアの一部であり、エラーバウンダリのないコンポーネントで発生した未捕捉のレンダリングエラーは、それがよく表面化する原因の一つです。
他の技術別監査
JavaScriptが実行される前に何が欠けているかを確認
バンドルの重さ、メタタグ、エラーバウンダリ、レイアウトの安定性 - クローラーが実際に見る通りにスコア化します。
Run free audit