「ヘッドレスCMS」を使うことの利点やSEOへのアプローチの違いについて、今回のホワイトボード・フライデーで学んでいこう。
Mozファンのみんな、こんにちは。ホワイトボード・フライデーへようこそ。今回はヘッドレスSEOを取り上げよう。「ヘッドレスSEO」とは、「ヘッドレスCMSを採用したサイトでSEOを行う際に用いる一連の特殊なテクニック」のことだ。
ヘッドレスCMSとは
最初に、ヘッドレスCMSとは何かを考えよう。従来型のCMS、たとえば、その典型であるWordPressと比較して定義してみる。
- 従来型のCMS: コンテンツ保存・コンテンツ管理・HTML表示まですべて担当
- ヘッドレスCMS: コンテンツ保存・コンテンツ管理は担当するが、HTML表示は担当しない(コンテンツデータ取得用のAPIだけ提供し、表示は専用のプログラムに任せる)
従来型のCMSの特徴
従来型のCMSは3つの部分で構成され、それぞれが緊密に連携している:
- データベース ―― コンテンツ情報を保存する
- 管理 ―― コンテンツの編集や画像の追加、タイトルを変更できるようにする
- 表示 ―― データベース内のコンテンツをルールに従って表示するHTMLを構築する
従来型のCMSでは、「表示」といえばウェブサイトのことだ。アクセスしてくるデバイスがモバイルであれデスクトップであれば、URLでの切り分けやレスポンシブデザインで対応できていた。
しかしユーザーの行動は進化しており、今のユーザーは、さまざまなデバイスやチャネルでコンテンツを検索して消費するようになっている。たとえばスマートウォッチやアプリなどだ。さらには他のシステムとのコンテンツデータ連携なども増えてきている。
ヘッドレスCMSの特徴
そうした「コンテンツは管理していくが、コンテンツ表示はチャネルやデバイスごとに最適化」したい場合に役に立つのが「ヘッドレスCMS」だ。
ヘッドレスCMSでも、データベースのレイヤーと管理のレイヤーがあって緊密に連携しているという意味では、従来型のCMSに似ている。ただし、表示のレイヤーに関しては、ヘッドレスCMSは直接担当しない。ヘッドレスCMSが提供するのは「API」と呼ばれる、コンテンツ情報を取得する仕組みだけだ。
アプリやWebサイト用のシステムなど各チャネル向けのフロントエンドシステムが、APIを通じてコンテンツの情報を取得し、そのチャネルに最適化した表示を作るのだ。
そのため、スマートウォッチ向けアプリを開発したり、コンテンツをマーケットプレイスに提供したり、独自のモバイルアプリを開発したり、もちろんウェブサイトを運用したりもできる。
ウェブサイト用ならば、ReactやVue.jsを使ったSPAを利用するクライアント側レンダリングにしたり、もう1台サーバーを挟んでレンダリング専用のプログラムを実行するプロキシ型のサーバー側レンダリングを採用したりする。
ヘッドレスCMSを使うことの利点
SEOにはヘッドレスCMSの方が良いのかとよく聞かれる。実際のところ、それは状況による。
具体的には、次のような場合にはヘッドレスCMSを導入するほうが良い結果になる可能性が高いだろう:
- 当然のことながら、複数のチャネルでコンテンツを使い回すことが多い場合は、ヘッドレスCMSが有利になることもあるだろう。
- 相互接続性が非常に高く、リアルタイムで連携させるシステムを利用している場合は、ヘッドレスCMSのAPI機能を使うと便利になる。たとえばECサイトの「在庫情報」は変動が激しいデータだが、既存のCMSよりもAPI型の連携のほうがより適切かつ高パフォーマンスで管理・表示しやすい。
- 世界規模のSEOプロジェクトに取り組む場合にも、ヘッドレスCMSは有効だ。
ヘッドレスCMSによるSEOの違い
では、ヘッドレスCMSでSEOを行う場合、具体的に何が違うのだろうか? 従来型CMSでのSEOとの違いとしては、主に次の3つがある:
- コンテンツのモデリングが重要になる
- 複数チャネルでコンテンツを使い回しやすくなる
- CMSのプラグインに頼れなくなっていく
それぞれ説明していこう。
1. コンテンツのモデリングが重要になる
1つ目は少し理解しにくいかもしれないが、「ヘッドレスCMSは“コンテンツを構築する”ものであって、“ページを構築する”わけではない」ということだ。
「コンテンツを構築する」場合、その中身をどう管理するかを検討する際には、公開するチャネルから一歩引いてコンテンツを眺め、コンテンツモデリングを始めることになる。誰もが頭の中ではコンテンツモデルを持っているが、それを明確にしていることは少ない。
ここで例を見てみよう。君がコンサートホールを運営していると仮定した場合、次のケースが考えられる:
- 会場には何組もの出演アーティストたちが決められた日時にやって来る
- 君はその公演のチケットを販売しようとしている
- チケットには価格と座席番号が割り当てられる
時には、アーティストとコラボしたグッズを販売することもあるだろう。これがコンテンツモデルで、扱うコンテンツタイプであり、それらが相互にどう関連しているかが分かる。扱う属性とコンテンツタイプを用いて、これまでに挙げたすべてのチャネルにわたり、コンサートホール向けのコンテンツをどう作成して展開するかをイメージできる。
もちろん、こうした「コンテンツのモデリング」は既存のCMSでも重要だった。しかし、ヘッドレスCMSでは、さらにその必要性が高まる。「さまざまなチャネルに、それぞれ必要なデータだけをスムーズに届ける」ためには、「そのコンテンツにはどんな情報が付随・紐付けされるのか」を整理して、それに応じたデータ構造にしておくことが重要になるのだ。
2. 複数チャネルでコンテンツを使い回しやすくなる
すでに触れたが、オムニチャネルコンテンツの利用は非常に重要で、この時代におけるユーザーの意図を満たすものであると言っても異存はないだろう。ユーザーはもうGoogleだけではなく、TikTok、Instagramでも検索している。
自分のオーディエンスがいる場所ならどこでもコンテンツを出しておきたい。ヘッドレスCMSを使えば、「コンテンツはチャネルに依存しないものとして作っておいて」「表示をチャネルごとに最適化する」ことをやりやすくなる。
つまり、オーディエンスが見つかるこうしたチャネルにコンテンツを出す方法について、より柔軟に対応できるようになり、よりチャネルに最適化したコンテンツ表示を作れるようになるというわけだ。
3. CMSのプラグインに頼れなくなっていく
最後に重要なこととして、プラグインの数は限られている点を知っておいてほしい。これまでは皆、多くの難しい作業をやってくれる「Yoast」などのプラグインを使って、サイト制作にかなりの力を注いできたと思う。しかし、ヘッドレスSEOでは、機能を追加するプラグインをCMS側で使うことは少なくなっていく。
既存のCMSではコンテンツ管理もコンテンツ表示も1つのシステムで行っていたため、表示を制御するプラグインをCMSに追加するのは当然だった。
しかしヘッドレスCMSでは、そうした機能をプラグインでCMS(つまり全体のコンテンツを保持して管理するシステム)に追加する必要はない。表示レイヤーには他のシステムを使うのだから、表示側のシステムでその機能を実現していくことになる。
そして、各チャネルへの最適化は「WordPressプラグインをインストールする」ように簡単な作業ではなくなる。個別に開発リソースが必要になることも想定しておくべきだろう。
以上、参考になれば幸いだ。私はリディア・インファンテ。モダンなヘッドレスCMSを手がけるSanityでシニアSEOマネージャーを務めている。ほとんどのソーシャルメディアでは「LidiaInfanteM」でフォローしてもらえるほか、個人サイト「Lidia-Infante.com」でもコンテンツを公開している。


