SEOが実際に機能する場所で、ヘッドレスCMSサイトを監査する.

ヘッドレスCMSはSEOにとって良いのでしょうか、それとも悪いのでしょうか?

ヘッドレスCMSそのものがSEOに良いか悪いかは、一概には言えません。決めるのはフロントエンドの実装です。サーバー側でHTMLを生成して返せばSEOの土台になりますが、クライアントサイド完結のアプリとして配信すると悪影響が出ます。記事のURLをどれか1つ開き、「ソースを表示」でタイトル、カノニカルタグ、本文があるか確認してください。HTMLにあれば、クローラーはすぐに取得できます。しかし、空のdivタグやスクリプトバンドルしか見当たらないなら、クローラーはページがレンダリングされるまで何も取得できません。しかも、その待機時間は非常に長いのが現実です。

ヘッドレス構成に移行しただけで、SEOが有利になるとは限りません。むしろ実装次第です。カノニカルタグ、メタデータ、構造化データ、内部リンク、レンダリング方式の選定まで、すべて開発チームが書いて保守するコードに委ねられます。テクニカルSEO専任のいない現場でクライアントサイドレンダリングを採用すると、インデックス登録されるページ数が少なくなる傾向があります。ご自身のサイトに当てはまるか、確認してみてください。そして、ランキングが下がるまで損失に気づかないことも多く、その段階では手遅れになったダメージの修復に追われます。本ツールの評価はページが実際に提供しているHTMLを採点するため、どちら側にあるかがはっきりわかります。

ヘッドレスまたはJamstackスタックにおいて、SEOはどの位置づけにあるのでしょうか?

SEOが存在する場所は、CMSではなくフロントエンドです。CMSの役割は、構造化データを保持し、APIで渡すことだけです。一方、レンダリング、ルーティング、そしてクローラーがページから読み取るあらゆる要素を管理しているのは、デプロイしたNext.js、Astro、またはRemixのコードです。まず、任意のページを1つ選んで、タイトルをたどってみてください。CMSのSEOタイトルフィールドを見つけ、テンプレート内でそれを出力している行を探します。見つからなければ、管理画面で入力したそのデータは飾りにすぎません。

APIとレンダリングの接合部分は、特に注意して確認してください。ここで崩れます。ヘッドレス構成でSEOが崩れる原因は、たいていこの周辺に集まっています。テンプレートで一度も参照されていないフィールドがあるかもしれません。フロントエンドがカノニカルタグを出力するときに、エディターの上書き設定を無視してしまうこともあります。そのうえ、テンプレート側のデフォルト設定に頼ると、責任の所在が曖昧になりがちです。CMSはHTMLを生成しなくなり、フロントエンド側はSEOの処理をCMSが担当していると思い込んでしまいます。その結果、従来のCMSならUIから自動で処理されていたメタデータ、サイトマップ、構造化データ、内部リンクを、開発者が自分で作り直すことになります（誰もロードマップに入れていなかった作業です）。

フロントエンドのレンダリングは、クローラーが受け取る内容をどのように決めるのでしょうか?

レンダリング戦略によって、クローラーがサイトから受け取るものが決まります。完成したHTMLでしょうか。それとも、JavaScriptを実行して中身を埋める必要のある空のシェルでしょうか。まず、JavaScriptを無効にした状態でページを取得してみてください。レスポンスに見出し、本文、ナビゲーションリンク、メタディスクリプション、カノニカルタグが入っているかを確認します。どれかが欠けているなら、すべてのクローラーがJavaScriptを正しく実行してくれることに賭けている状態です（実際には、そううまくいかない日もあります）。そして、その賭けが静かに外れることはめったにありません。

Googleは、JavaScriptを使ったWebアプリを「クロール」「レンダリング」「インデックス作成」の3段階で処理します。順番があります。ただ、コンテンツがレンダリング後にしか現れない場合、開発者はパイプラインの中で最も制御しにくい中間の段階に頼ることになります。手元のコードで動かせない段階に依存していることになります。テンプレートの実装がその状況を作っていないか、確認してください。

テンプレートで確認できる重要な点が2つあります。まずカノニカルタグです。Googleによると、カノニカルタグはHTMLに書くのが最適で、JavaScriptで設定する場合は元のHTMLにあるものと一致させる必要があります。ページにnoindexタグがあると、Googleはレンダリング自体を省くことがあり、そのタグを消すJavaScriptが実行される機会は一度もないかもしれません。ただ、動的レンダリングは、使うとしても一時的な回避策にすぎず、根本的な解決にはなりません。Googleが推奨しているのは、サーバーサイドレンダリング、静的レンダリング、またはハイドレーションを用いたクライアントサイドレンダリングです。他人の言葉を鵜呑みにせず、ご自身のソースコードを開いて、実際に何を使っているか確かめてみてください。

なぜ、CMSとサイトの間でカノニカルURLやスラグがずれてしまうのでしょうか?

カノニカルURLやスラグがずれてしまうのは、CMSが1つの値を保存し、ルートが別の値を生成しているにもかかわらず、スタック内のどこにもこの2つを比較する仕組みがないためです。3つの商品ページのソースコードにあるカノニカルタグを確認してみてください。もし3つすべてが同じURLを指しているなら、テンプレートでそのURLがハードコーディングされているか、継承されていることになります。 また、編集者の方々は従来の管理機能も失っています。従来のCMSでは、チケットを発行することなく、canonicalタグ、リダイレクト、メタディスクリプション、スキーマを変更することができました。しかし、ヘッドレス環境では、こうした組み込みの管理機能が知らぬ間に削除されている可能性があります。

CMSでの上書きが効くのは、テンプレートがその設定を読んでいる場合だけです。Sanityのコースでは、任意のSEOオブジェクトがモデル化されていて、SEOタイトルがあればページタイトルフィールドを上書きし、Next.jsのgenerateMetadataでレンダリングします。この手順がなければ、そのフィールドは飾りです。信頼する前に、テンプレートにその呼び出しがあるか確認してください。そして、サイトマップも同期が取れていません。デプロイ時に生成していると、1時間前に変更した記事は反映されません。サイトマップがいつ生成されたかを確認してみてください。

どのヘッドレス構成が、プレビューおよびステージングのURLをインデックスに漏らしてしまうのでしょうか?

プレビューやステージング用のビルドが、noindexヘッダーもログインもないままパブリックホストに置かれていると、情報が漏れます。典型的なのは、カスタムドメイン上のステージング用サブドメインです。まずそこから確認してください。ステージング用のURLにリクエストを送り、レスポンスヘッダーに「X-Robots-Tag: noindex」が入っているか見てみましょう。Vercelのプレビューデプロイメントには、デフォルトでこのヘッダーが付きます。ただし、非本番ブランチにstaging.example.comのようなカスタムドメインを割り当てると、Vercelはこのヘッダーを付けなくなります（見落としやすい点です）。つまり、その場合はご自身で追加するしかありません。

noindexはリクエストであって、ロックではありません。URLを知っている人なら、誰でもプレビューを開けます。ページが読み込まれる前に認証をかけたい場合は、Vercelの「Deployment Protection」を使ってください。ヘッドレスCMSのプレビューURLにも、同じ対策が必要です。noindexメタタグか認証ヘッダーを加えて、下書きのコンテンツが公開済みページとしてインデックス登録されないようにしてください。ただ、robots.txtだけに頼るのは禁物です。Googleがnoindexを認識するにはページをクロールする必要があり、robots.txt内のnoindexはサポートされていないため、このファイルだけでは守れません。

ヘッドレスサイトを外部からどのように監査すればよいでしょうか?

クローラーが読み取るのは、配信されたページだけです。だからヘッドレスサイトを外部から監査するには、そのページを分析するしかありません。ホームページで無料評価を実行すると、さらに最大8ページがサンプリングされます。読み取るのは、レスポンスヘッダー、マークアップ、構造化データ、見出し、スクリプトや画像の容量、そしてrobots.txtとcanonicalタグのシグナルです。そして結果として、サイト全体の100点満点のスコアが出て、8つの重要指標それぞれに、根拠となるデータが付きます。

所要時間は約2分で、費用はかかりません。職場のメールアドレスを入力するとレポートのリンクが1回送られ、1接続あたり1時間に3回チェックを実行できます。ただし、読み取れる範囲には限りがあります。このツールは、貴社のサイトへのログイン、アナリティクスの読み取り、フィールドパフォーマンスデータの分析、チームへのインタビューを行いません。つまり、出てくるのは構築の裏にあるプロセスではなく、ページそのものについてのレポートです。確認できるのは、サンプリングした各ページが、独自のカノニカルタグ、メタディスクリプション、スキーマ、サーバーでレンダリングされた本文を持っているかどうかです。そのうえで、それぞれを貴社のテンプレートと照らし合わせてください。

よくある質問.

次に読む.

1. 01Next.js SEO監査レンダリングモード、メタデータ、ハイドレーションコスト。
2. 02Astro SEOチェックアイランド、コンテンツコレクション、構造化データ、Web Vitals。
3. 03ウェブサイト修復ダウン、ハッキング、故障：何が残り、何を作り直すか。