従来のサイトアーキテクチャではなく、WordPressをヘッドレス化する場合、そのSEOの施策は大きく変わってきます。ヘッドレスCMSでは、サイトのフロントエンドとバックエンドを切り離すことで柔軟性とスピードが高まりますが、同時に新たなSEOの課題も生じます。
SEOは、サイトの可視性と検索トラフィックを大きく左右するのもの。そこで今回は、ヘッドレスWordPressサイト向けの高度なSEO戦略をご紹介します。
検索エンジンがサイトを適切にクロールできるようにする方法や、メタタグの調整方法など、さまざまな側面を取り上げます。サイトのコーディングにも、マーケティング戦略の立案にも役立つSEOの実践的なヒントを学びましょう。
ヘッドレスWordPressサイトのクロール
ヘッドレスWordPressサイトをクロールさせる（検索エンジンのボットに巡回してもらう）には、従来のサイトにはない課題をクリアする必要があります。まず第一に、ヘッドレスサイトのコンテンツが、JavaScriptを使用してクライアントサイドでレンダリングされるという点。
これについては、ダイナミックレンダリングやサーバーサイドレンダリングのような最新の技術を用いることで、簡単に対処できます。
ダイナミックレンダリング
ダイナミックレンダリングは、JavaScriptを多用するコンテンツと検索エンジンクローラーとの「橋渡し」を行なってくれます。検索エンジンには事前にレンダリングした静的HTMLコンテンツのスナップショットを表示し、引き続き動的でインタラクティブなバージョンをユーザーに提供します。
これにより、クローラーはJavaScriptを実行することなくサイトのコンテンツをインデックスできるようになり、サイトの可視性とSEOが即座に改善されます。
ヘッドレスWordPress環境でダイナミックレンダリングを実装するには、Prerender.ioのようなソリューションを使用するか、独自のサーバーサイドレンダリングメカニズムを構築します。
以下、もう少しダイナミックレンダリングを掘り下げてみましょう。
1. ユーザーエージェントの検出
ユーザー（ブラウザ）によるリクエストとクローラー（Googlebotなど）によるリクエストを区別する必要があります。これには、HTTPヘッダーのユーザーエージェントを確認します。
2. ボットへの静的コンテンツの提供
クローラーが検出されると、通常のJavaScriptを多用したコンテンツを提供する代わりに、サーバーが事前にレンダリングした静的なHTMLバージョンにリクエストをリダイレクトします。これには、事前レンダリング用のツールを使用するか、サーバーでセットアップを行い、コンテンツの静的なHTMLページをその場で生成するか、キャッシュから生成することで対処します。
3. WordPressでの設定
Prerender.ioのようなサービスは、サーバーに統合可能なミドルウェアを提供しています。このミドルウェアが、はじめにリクエストを解析し、クローラーから受信したものであるかどうかを確認。クローラーから来たものであれば、キャッシュから事前レンダリングされたページを提供し、キャッシュされていなければページのレンダリングを実行します。
独自のソリューションを構築する場合、通常はNode.js環境でPuppeteerを使ってページを事前レンダリングします。WordPress APIは、Node.jsサーバーにコンテンツを配信する際、ユーザーエージェントを確認し、クローラーであれば、Puppeteerがページをレンダリングし、静的HTMLを保存して、このバージョンを提供します。
クローラーからのリクエストごとに静的ページをレンダリングしないようにキャッシュすることで、最適化が可能です。
サーバーサイドレンダリング
サーバーサイドレンダリングはその名の通り、クライアントに届ける前に、ページのコンテンツをサーバー側でレンダリングします。これは、検索エンジンのボットがページをリクエストすると、レンダリング済みのHTMLページ、つまり即座にインデックス可能なページを受け取ることを意味します。
ReactやNode.jsなど、JavaScriptフレームワークやライブラリを使用して、サーバーサイドレンダリングを実装し、コンテンツをサーバー上で直接レンダリングすることが可能です。検索エンジンがコンテンツにアクセスしやすくなるだけでなく、ページの読み込み時間が短縮され、全体的なユーザー体験の改善にもつながります。
サーバーサイドレンダリングは、Next.jsのようなフレームワークをWordPressのREST APIやGraphQLと組み合わせることで効率化することができます。
GraphQLでデータを取得し、Next.jsを使ってサーバー上でページをレンダリングするのが一般的です。
URLの正規化
特にGatsbyやNext.jsのような分離されたフロントエンドでコンテンツを提供する場合、ヘッドレスWordPressサイトのURLにcanonicalタグを設定することで、SEOを強化することができます。
canonicalタグは、検索エンジンにコンテンツページのどのバージョンを評価してもらうかを指定するもので、重複コンテンツの問題を回避するのに役立ちます。コンテンツが複数のルートやエンドポイントからアクセスできる可能性のあるヘッドレス環境では不可欠です。
URLの正規化が重要な理由
ヘッドレスWordPressサイトは、フロントエンドとバックエンドが分離しているため、コンテンツの重複が生じる可能性が高くなります。canonicalタグを活用することで、検索エンジンが優先URLをインデックスするように誘導して、このリスクを軽減することができます。SEOの価値が同じコンテンツの複数のバージョンで希釈されることなく、メインページに集約されます。
時間をとってcanonicalタグの設定を適切に行い、どのバージョンのコンテンツを検索結果に表示するかを明確にすることが重要です。
URLを正規化する方法
ヘッドレスWordPress環境でcanonicalタグを設定するには、WPGraphQLを利用して、Yoast SEOプラグインとYoast SEOのデータをヘッドレスの設定に接続すると効率的です。
ウェブ開発者のAndrew Kepson氏は、人気プラグインを用いた以下の手順を紹介しています。
- Yoast SEOを使って、WordPress管理画面からコンテンツごとにcanonicalタグを指定、管理する。
- WPGraphQLを使用して、WordPressサイトにGraphQLエンドポイントを作成し、フロントエンドアプリケーション（GatsbyやNext.jsなどで構築）がYoast SEOが提供するデータを含むWordPressコンテンツにクエリできるようする。
- WPGraphQL Yoast SEO Addonを使って、Yoast SEOとWPGraphQLを連動し、前者のSEOフィールド（canonicalタグを含む）を後者のスキーマに接続。これにより、ヘッドレスフロントエンドがYoast SEOで設定されたcanonicalタグを照会して使用できるようになり、正しいcanonicalタグがページのhead内に表示されるようになる。
Yoast SEOと必要なWPGraphQLアドオンをインストール・有効化して、WordPressからSEOデータを管理することができます。
フロントエンドのアプリケーションを設定する際、WPGraphQLを通してcanonicalタグを含むこのSEOデータをクエリして、ページのheadに適切に表示します。これで、ヘッドレスサイトであっても、検索エンジンがURLのcanonicalタグを適切に認識しインデックスしてくれます。
メタタグの最適化
ヘッドレスWordPress環境でのメタタグの最適化は、特にReactのようなフロントエンド技術を使用している場合、SEOの強化に不可欠です。メタタグは検索エンジンにページの内容を伝えるため、SEOにおいて非常に重要な役割を果たします。タイトル、説明文、キーワード、その他ページに関する重要な情報を定義するのに役立ちます。
メタタグは、ページのコンテンツを簡潔に要約し、検索結果での表示方法やクリック率に影響を与えます。例えば、タイトルタグは、検索結果でクリック可能な見出しとして表示されるため、SEOとユーザーエンゲージメントの鍵を握る要素です。
同様に、メタディスクリプションは、検索結果で見出しの下に表示されるコンテンツの概要であり、サイトへのクリックを促すことができるため重要な要素です。
react-helmetを使用する
react-helmetは、文書のhead要素を管理する再利用可能なReactコンポーネントで、メタタグ、ページタイトルなどを動的に変更できます。ヘッドレスWordPressサイトで特に有用です。
react-helmetを使い始めるには、npmまたはyarnを使ってプロジェクトにインストールします。
npm install react-helmet
# or
yarn add react-helmetインストール後、react-helmetをコンポーネントにインポートし、必要なメタタグを設定します。例えば、ページのタイトルやメタディスクリプションを設定する場合は、以下のようになります。
import { Helmet } from 'react-helmet';
function MyPage() {
return (
<>
<Helmet>
<title>ページタイトル</title>
<meta name="description" content="ページの簡潔な説明文" />
</Helmet>
{/* Rest of your component */}
</>
);
}react-helmetは動的データにも対応しており、Reactアプリケーション内のpropsや状態に基づいてメタタグを設定することができます。この柔軟性が、SEOのメタデータを特定のページやコンテンツタイプに応じて動的に調整するための鍵となります。
他にも構造化データ（リッチスニペット用のJSON-LDを使用）、SNS共有用のOpen Graphタグ、さらにはアクセシビリティを高めるための要素などが管理可能です。
構造化データのマークアップ
構造化データの適切なマークアップは、従来のサイトでもヘッドレスサイトでもSEOの強化に重要です。
microdataの一種である構造化データのマークアップは、リッチスニペット（星評価や商品価格などの詳細情報を含む）を検索結果に表示できるようにすることで、検索結果を充実させることができます。これは当然、サイトの可視性とクリック率に大きな影響を与えます。
従来のWordPressサイトでは、Yoast SEOのようなSEOプラグインを使用して管理するのが一般的で、WordPressの管理画面で直接追加とカスタマイズを行うことができます。プラグインは、固定ページや投稿の内容に基づいて必要なコードスニペットを自動的に生成してくれるため、コーディングは一切必要ありません。
しかし、ヘッドレスWordPressサイトの場合、構造化データのマークアップ管理にはもう少し手間がかかります。基本的に（Reactで構築されたサイトのような）別のフロントエンドアプリケーションで作業を行うことになるため、サイトを開発しながら構造化データのマークアップを手動で統合しなければなりません。これには、JavaScriptを使用してHTMLに構造化データを動的に挿入したり、フロントエンドSEOツールを活用したりします。
ヘッドレスWordPressサイトでは、react-helmetなどを使って、構造化データの実装をはじめとするページのhead要素を管理することができます。先に触れた通り、react-helmetでメタタグやタイトル、そしてJSON-LD形式の構造化データをReactコンポーネント内で動的に設定可能です。
ヘッドレスサイトで構造化データのマークアップを管理するには、以下のような手順になります。
1. クライアントサイドライブラリを使用する
react-helmetのようなクライアントサイドライブラリは、構造化データをページに挿入するのに非常に便利です。JSON-LD形式の構造化データスニペットを作成して、ページのhead要素に追加することができます。
2. スクリプトを作成する
JSON-LD形式のスクリプトを作成するには、Googleや他の検索エンジンが理解できるJSON形式でコンテンツの構造を定義することから始めます。schema.orgのガイドラインに従い、Article、Person、Eventなどの型とそのプロパティを指定します。
3. ツールを使用する
次に、サーバーサイドレンダリングを使用して、これらのスクリプトをページのHTML、通常はhead内に埋め込みます。Googleの構造化データ マークアップ支援ツールは、正しいJSON-LD形式の生成をサポートしてくれます。
音声検索最適化（VSO）
ヘッドレスWordPressサイトの音声検索最適化（VSO）を行うには、SEOのベストプラクティスとヘッドレスアーキテクチャの技術的な側面の両方を考慮した戦略的なアプローチが求められます。ヘッドレスWordPressサイトのコンテンツを音声入力検索で上位に表示させるようにするには、以下のヒントを取り入れてみてください。
1. 構造化データを活用する
まず、ヘッドレスサイトのVSOには、構造化データの実装が不可欠です。
構造化データは、検索エンジンがサイトのコンテキストとコンテンツを理解し、音声クエリに応答して情報を表示するのに役立ちます。ヘッドレスの設定では、React（すでに触れた通り）、Vue、またはAngularコンポーネントに構造化データを手動で挿入する必要があるかもしれません。
2. 会話形式のコンテンツとキーワードに焦点を当てる
音声検索クエリは、話し言葉です。会話パターンを模倣し、会話的な言い回しが使用される傾向にあります。また、テキストベースの検索よりも長くなるのが通例です。サイトでコンテンツを作成する際には、自然な話し言葉を意識しましょう。音声検索でよく使われるロングテールキーワードや、質問ベースのクエリを重視することが大切です。
3. マルチサーチ「near me」検索のためのローカルSEO
音声検索は近くのお店やサービスを探すなど、現地で何かを見つける際に使用されるのが一般的です。ヘッドレスWordPressサイトで音声検索を最適化するには、コンテンツにローカルキーワードやフレーズを含めましょう。Google ビジネス プロフィールのリスティングを常に最新の状態に保ち、ローカルの構造化データを組み込み、ローカルの音声検索クエリに対する可視性を高めるのが得策です。
4. よくある質問ページとセクションを作成する
音声検索を行うユーザーは、傾向として特定の質問に対して即座に回答を得られることを期待しています。よくある質問に対する簡潔な回答を掲載したページやセクションを設けることで、これに応えることができます。
API経由でWordPressからコンテンツを取得し、簡単にアクセスできる形式でフロントエンドに表示する動的なよくある質問セクションの構築を検討してみてください。そしてこのページを見出しと構造化データでマークアップすることで、音声検索結果での可視性をさらに高めることができます。
5. リッチスニペットと強調スニペットをフル活用する
検索結果で視覚的に目立つリッチスニペット（リッチリザルトとも）や、強調スニペットの対象となるようなコンテンツ作りを目指しましょう。
例えば、コンテンツを明確に構造化し、構造化データをマークアップすることで、重要な情報を強調することができます。ヘッドレスWordPressサイトでは、コンテンツAPIが、フロントエンドアプリケーションがスニペットに適した形式を生成するために利用できるよう、構造化されたコンテンツを配信できるようにします。
タクソノミーの作成
ヘッドレスWordPressサイトのタクソノミー（分類）は、直感的かつ構造的に作成することで、サイト訪問者と検索エンジンの両方にメリットをもたらします。
ヘッドレスサイトで効果的なタクソノミーを作成するヒントは、以下のとおりです。
- オーディエンスとコンテンツを理解する：コンテンツを分析して主なテーマを特定し、オーディエンスが何を求めているかを理解すること。これにより、より関連性の高いカテゴリーとタグを作成することができる。
- カテゴリーを作成する：サイトで扱う幅広いトピックを包括的に表すものをよく考えて作成すること。カテゴリーはコンテンツをメインテーマに関連づけるための階層構造を作るため、明確に、なおかつ重複なくコンテンツを網羅することが大切。
- タグを使用して詳細を示す：タグを使用することでコンテンツの特定の側面を識別することができ、幅広いカテゴリの中から具体的なトピックに関するコンテンツを見つけるのに役立つ。
- ナビゲーションを簡素化＆最適化：サイトナビゲーションを強化し、ユーザーがコンテンツを見つけやすくすること。SEOに適したキーワードをカテゴリーやタグに組み込むことで、サイトの可視性を高めることができる。
- 明確性を保ち重複を避ける：訪問者を混乱させたり、SEOを損なったりしないよう、各カテゴリーやタグは一意のものを使用すること。定期的にチェックするようにすることで、重複するカテゴリーやタグを統合または削除して、タクソノミーの質を維持することができる。
- ヘッドレスでタクソノミーを統合する：カテゴリーとタグがAPIを通じてアクセスでき、フロントエンドのアプリケーションで動的に使用できるよう、タクソノミーを適切に実装すること。
- 定期的に見直しと更新を行う：サイトの成長に応じてタクソノミーを定期的に見直し、コンテンツが正確に反映されていることを確認すること。
また、実際にどのように表示されるかを想定することも重要です。例えば、さまざまなレシピを紹介する料理ブログの場合、整理されたタクソノミーは以下のようになります。
- カテゴリー：料理（イタリアン、メキシカン、和食）、食事の種類（朝食、昼食、夕食、おやつ）、特別食（ビーガン、グルテンフリー、ケトジェニック）など、ブログの主なコンテンツの柱を表す幅広いトピック
- タグ：「30分レシピ」や「クリスマスレシピ」のようなキーワード、「鶏肉」「パスタ」「アボカド」のような食材など、カテゴリーを横断することができるより具体的な記述
タクソノミーをこのように構成することで、訪問者が簡単にできる朝食のアイデア、ビーガンスイーツのレシピ、あるいは伝統的なイタリア料理など、興味のあるレシピに素早くアクセスできるようになります。また、検索エンジンもブログの内容を理解しやすくなり、特定のトピックに関する検索結果でのサイトの可視性が向上します。
把握すべきパフォーマンス指標
ヘッドレスCMSでサイトを運営する場合、パフォーマンス指標の理解も怠ってはなりません。フロントエンドの表示とバックエンドのコンテンツ管理が切り離されていることから、潜在的な速度低下の要因が多くなります。したがって、サイトのパフォーマンスを把握することが重要です。
可能な限りSEOを強化するため、Core Web Vitals（コアウェブバイタル）や読み込み時間などの主要なパフォーマンス指標に注意を払いましょう。
Core Web Vitals
サイトのパフォーマンスは、Core Web Vitalsなしでは語れません。Core Web Vitalsとは、Googleがサイトのユーザー体験を測定する指標で、以下3つの指標があります。
- LCP（Largest Contentful Paint）─ページのメインコンテンツがどれだけ速く読み込まれるかを測定。速ければ速いほど良い。
- FID（First Input Delay）─応答性に関する指標で、ページが読み込まれた後、ユーザーのインタラクションにどれだけ高速に反応できるかを測定。クリックしてもすぐに反応しないボタンなどの要素は、訪問者がサイトを離脱する要因になりかねない。
- CLS（Cumulative Layout Shift）─日本語では「累積レイアウトシフト」。最初の読み込み時にどれだけページのコンテンツが意図せず動いたり、ずれたりするかを測定。安定性に関する指標。
これらの指標を改善することで、より良いユーザー体験を構築することができ、結果的にGoogle検索での表示順位も上がります。
JavaScriptの圧縮と非同期読み込み
JavaScriptを圧縮し、非同期読み込みを使用することで、サイトの表示速度を改善することができます。必要なコードだけに絞り込み、ページの読み込みを妨げることなくスクリプトを同時に実行できるにすれば、バックエンドの処理が最適化され、フロントエンドのパフォーマンスが改善されます。
ヘッドレスCMS環境のパフォーマンス指標を改善することは、ただGoogleの推奨項目を潰していくということではありません。検索エンジンにコンテンツをクロールさせ、高く評価してもらいながら、シームレスで魅力的なユーザー体験を構築していくことを意味します。技術的な最適化とユーザー思いのデザインのバランスをとることで、ヘッドレスCMSの柔軟性を享受しつつ、サイトをうまく成長させることができます。
まとめ
ヘッドレスWordPressサイトのSEOは、決して難しくはありません。この記事では検索エンジン、そして訪問者にとってサイトを利用しやすく、魅力的なものにするためのヒントをご紹介しました。
検索エンジンにサイトをクロールしてもらう方法やメタタグの調整、音声検索最適化（VSO）など、さまざまなヒントを取り上げました。また、ヘッドレスWordPressサイトのパフォーマンスを改善するなら、Kinstaの静的サイトホスティングをぜひお試しください。
コメントを残す