ContentfulのSEO

ContentfulはHTMLを生成しません。SEOはフロントエンドの仕事です。レンダリング方式、SEOコンテンツモデル、サイトマップ、Preview APIの保護、リダイレクト、JSON-LDを日本語で解説します。

初回公開:2026年6月27日 · 最終更新:2026年8月22日 · Advanced
言語
このページには証拠シグナルが1件あります

ContentfulはヘッドレスCMSであり、API経由でコンテンツを配信するだけでHTMLは生成しません。そのため、SEOの結果はすべて利用するフロントエンドで決まります。レンダリングが最重要で、SSGとSSRは完成したHTMLを配信するため安全ですが、CSRはGoogleでは遅く、Bingや多くのAIクローラーでは失敗します。ContentfulにSEO機能は組み込まれていないので、メタデータ、サイトマップ、robots.txt、リダイレクト、hreflang、構造化データと明示的なSEOフィールドをフロントエンドに実装します。Preview APIの下書きはrobots.txtだけに頼らず、ホストレベルのnoindexまたは認証で保護します。

TL;DR — ContentfulはAPIファーストでHTMLを生成しないため、検索エンジンが見るのはフロントエンドの出力だけです。SEOの結果はすべてフロントエンドの判断になります。SSGとSSRは完成したHTMLを配信するのでGoogle、Bing、AIクローラーで安全です。CSRはリスクがあり、Googleのインデックスは遅く、Bing・Yandex・Baiduや多くのAIボットではインデックスされないことがあります。Dynamic Renderingは非推奨です。Contentfulには組み込みSEOがないため、コンテンツモデルの明示的なSEOフィールド(ページ内統合または専用型)、<head>へのメタデータ、Delivery APIからのサイトマップ(noindexや非自己canonicalを除外)、ホスト層のrobots.txt(JS/CSSをブロックしない)、サーバー側リダイレクト、コンテンツ型からのJSON-LD、Contentfulのロケールデータからのhreflangを実装します。Contentful固有の最大のリスクはPreview APIです。下書き・ステージングはホストレベルのX-Robots-Tag: noindexまたは認証で保護し、robots.txtだけに頼らないでください。

すべてを決めるアーキテクチャ上の要点

Contentfulはコンテンツリポジトリであり、Webサーバーではありません。 RESTのContent Delivery APIとGraphQL APIで構造化されたJSONを返しますが、HTMLをレンダリングしたり返したりはしません。検索エンジンはContentfulを直接見るのではなく、データからフロントエンドが生成したものを見ます。したがってSEOの結果は、次の2点で決まります。

Evidence for this claim Contentful exposes published content through its Content Delivery API and GraphQL Content API. Scope: Contentful API delivery; frontend rendering remains separate. Confidence: high · Verified: Contentful: Content Delivery API
  1. フロントエンドフレームワーク(Next.js、Astro、Gatsby、Nuxt、SvelteKit)がContentfulのデータをどう扱うか。
  2. サイトマップ、robots.txt、リダイレクトなどの補助インフラをホスティング/CDN層に実装したかどうか。

これは私のJavaScript SEOガイド でも述べている点です。WebはプレーンHTMLから移行しましたが、SEO担当者はそれに抗うのではなく、受け入れられます。JavaScriptはSEOに悪いものでも邪悪なものでもありません。ただし、どうレンダリングするかがすべてです。ContentfulはヘッドレスCMS SEOの専門的な応用です。隣接記事を1本だけ読むなら、それを読んでください。

レンダリングがContentful SEOの最重要判断

Contentfulはクローラーから見えないため、フロントエンドのレンダリング方式によって、コンテンツがそもそもインデックスされるかどうかが決まります。推奨順は次のとおりです。

SSG/静的レンダリング。 ビルド時にHTMLを生成し、CDNから静的ファイルとして配信します。初回リクエストから完全なHTMLを返し、TTFBも非常に速い、SEOの最良ケースです。トレードオフは鮮度で、変更には再ビルドが必要です(ISRで緩和できます)。AstroとGatsbyはSSGが中心で、Next.jsは§getStaticProps§または静的ルートをルート単位で使います。

Evidence for this claim Next.js can statically render routes at build time, producing prerendered output for delivery. Scope: Next.js rendering used as one example frontend for Contentful. Confidence: high · Verified: Next.js: Static exports

SSR — サーバーサイドレンダリング。 リクエストごとにHTMLを生成します。常に最新で、初回取得時から完全にレンダリングされたHTMLです。インフラコストは高くなります。Contentful自身が述べるように、“server-side rendering is guaranteed to provide results if done right.” (翻訳)「サーバーサイドレンダリングは、正しく行えば結果を保証します。」Next.jsのgetServerSideProps、Nuxt SSR、SvelteKit、Remixが該当します。

ISR — インクリメンタル静的再生成。 静的ページを再検証期間の後にバックグラウンドで再生成します。1時間ごと、1日ごとに変わるコンテンツには有力な中間案です。ただし期間後の最初のリクエストが、まだ古いキャッシュページを受け取る罠に注意してください。そのリクエストがGooglebotになる可能性もあります。

Hybrid。 ルートごとにSSG/SSR/ISRを組み合わせます。大規模なContentfulサイトでは最も実用的で、Contentfulも標準の推奨としています。“Hybrid rendering combines the benefits of SSR and CSR, serving content within initial HTML while still maintaining a more flexible front end. This approach to JavaScript rendering is most ideal for serving content to users and search engines alike.” (翻訳)「ハイブリッドレンダリングはSSRとCSRの利点を組み合わせ、より柔軟なフロントエンドを保ちながら初期HTMLにコンテンツを含めます。この方式はユーザーと検索エンジンの双方にコンテンツを提供するのに最適です。」

CSR — クライアントサイドレンダリング。 最小限のシェルを送り、ブラウザーのJavaScriptがContentfulからコンテンツを取得してDOMを構築します。SEOには最も不利です。Googleは後続のレンダリングウェーブへ回すため、タイミングが予測できません。Bing、Yandex、Baiduはインデックスしないことがあり、AIクローラーのレンダリングもプロバイダーごとに異なります。初期HTMLだけを使う取得者には空のシェルしか見えません。CSRへ移行したサイトでは40〜80%のトラフィック減少が記録されています。サーバーレンダリングのないReact/Vue/AngularのSPAはここをデフォルトにするため、見つけてほしいものにはCSRを避けてください。

Bingの点は強調する価値があります。誰もがGoogleを重視しすぎるからです。CSRだけのContentfulデプロイは、Googleがうまく処理できてもBing SEOの失敗です。 GoogleのJavaScript処理が改善しているとしても、SSR/SSGを選ぶ十分な理由になります。

Dynamic Renderingは非推奨

ユーザーにはSPAを提供し、ボットには事前レンダリング版を提供する方式は、かつては妥当な回避策でした。Googleは方針を変え、現在は*“server-side rendering, static rendering, or hydration”* (翻訳)「サーバーサイドレンダリング、静的レンダリング、またはハイドレーション」を勧めています。Dynamic Renderingは*“creates additional complexities and resource requirements.”* (翻訳)「複雑さとリソース要件を追加する」回避策だと説明しています。自動的にクローキングになるわけではありませんが、新しいContentfulフロントエンドをこれを前提に設計しないでください。

SEOのためのContentfulコンテンツモデルを作る

モデル化するまでContentfulは何も与えてくれません。コンテンツモデル自体がSEOの基盤です。Contentfulの表現では、“A content model comprises the structure and organization of your content, and it serves as the foundation of everything you can accomplish.” (翻訳)「コンテンツモデルはコンテンツの構造と編成を定義し、達成できることすべての基盤になります。」パターンは2つあります。

  • 統合型 — SEOフィールドを各ページのコンテンツ型に置きます。単純で、小規模サイトに適しています。
  • 専用SEOコンテンツ型 — 各ページ型から再利用可能なseoMetadata型を参照します。単一の真実のソースになり、サイト全体で更新しやすくなります。複雑なサイトではこちらを標準に勧めます。

各ページ(または専用型)に置く基本的なSEOフィールドは次のとおりです。

フィールド備考
seoTitleShort text必須。約60文字のバリデーション
seoDescriptionShort text100〜150文字
canonicalUrlShort text任意。サイトをまたぐcanonicalの場合だけ
noindexBoolean編集者の切り替え → meta robots サイトマップ除外を制御
nofollowBoolean任意
ogImageMedia(アセットリンク)Open Graph/ソーシャル用
ogTitleogDescriptionShort text任意。SEOフィールドと異なる場合

noindexの切り替えには、意味のあるヘルプテキストを付けます。Contentfulが推奨する編集者向け文言は、“Selecting yes will keep the page from showing up in organic search results.” (翻訳)「はいを選ぶと、このページはオーガニック検索結果に表示されません。」です。ただしヘッドレスの落とし穴を忘れないでください。フロントエンドが値を読み取り、サーバー側の<head>にタグとして出力するまで、これらのフィールドは何も起こしません。カスタムcanonicalUrlを設定しないページにも自己参照canonicalが必要です。ページネーション、タグ、フィルターなどの自動生成ページでこれを忘れることが、Contentfulのcanonicalバグで最もよくある原因です。

メタデータ、サイトマップ、robots.txt — プラグインを再構築する

メタデータは、フレームワーク標準のヘッド管理を使ってSEOフィールドから<head>へマッピングします。Next.js App RouterのgenerateMetadata(相対canonicalが壊れないようmetadataBaseを設定)、NuxtのuseSeoMeta、Gatsbyの<Seo>/react-helmet、またはAstroのレイアウト<head>が候補です。信頼性の原則は、HTMLレベルのメタデータはJavaScript注入のメタデータより強いということです。初回取得時にGoogleが見られ、AIクローラーにもその時点で見えるからです。

サイトマップは自分で構築する必要があります。Contentfulにはありません。公開済みエントリをDelivery APIへ問い合わせ、ページネーションします(APIは1回の結果数に上限があるため、skiplimitでループします)。noindex: trueのエントリや自己参照でないcanonicalを除外し、https://domain.com/sitemap.xmlにXMLを出力します。SSGではビルド時に生成し、SSRではContentfulへ問い合わせてXMLを返す専用の/sitemap.xmlルートを用意します。公開量が多いサイトではコンテンツ型ごとに分割・再生成し、古くならないようにします。

robots.txtはホスティング層に置きます。 Vercel、Netlify、Cloudflare Pagesなどで管理し、Contentfulには置きません。サイトマップを指し、ステージング/プレビューのホストを別に扱います。絶対に破ってはいけないルールは、.js.cssをDisallowしないことです。レンダリングを完全に妨げます。

ステージングとPreview APIを保護する — Contentfulで最も危険な部分

Contentfulには2つの配信エンドポイントがあります。公開コンテンツを返すContent Delivery APIと、別のキー/エンドポイントで下書きコンテンツを返すContent Preview APIです。Preview APIを使うプレビュー/ステージングフロントエンドは公開到達可能なことが多く、Googleに見つかると別ホスト上にサイト全体の重複がインデックスされます。

多くのガイドが誤る落とし穴は、robots.txtが助言であってアクセス制御ではないことです。GoogleはDisallowを尊重してパスをクロールしませんが、ステージングURLがメール、Slack、別サイトなどのどこかからリンクされていれば、クロールせずに発見・インデックスできます。プレビュー環境は次のように保護してください。

  • すべてのプレビュールートにホストレベルのX-Robots-Tag: noindex HTTPヘッダーを付ける(CDN/エッジで設定し、CSRシェルがレンダリングしないかもしれない遅いJavaScript注入のmetaタグにしない)。
  • 認証(署名付きトークンまたはログインゲート)を使う。
  • ステージングが本番URLを自己canonicalにしないよう、環境に応じたcanonicalを出力する。

短命のプレビューホストを使い、Search Consoleで予期しないドメインを監視してください。早期警告になります。

ヘッドレスContentfulでのリダイレクト

Contentfulもリダイレクトを処理しません。実用的なパターンは3つあります。

  1. Contentfulでリダイレクトをモデル化する — source、destination、type(301/302)フィールドを持つredirectコンテンツ型を作り、サーバー/エッジ層でエントリを読み取って本物のHTTPリダイレクトを返します。ContentfulのComposable Redirectワークフローは編集者向けに、“open an existing piece of content (or create a new page), indicate that this page will be located at a different URL by updating the URL path, set up a redirect to indicate that the page has moved permanently.” (翻訳)「既存のコンテンツを開く(または新しいページを作る)、URLパスを更新して別のURLに置かれることを示す、ページが恒久的に移動したことを示すリダイレクトを設定する」と説明しています。
  2. Webhook+自動化 — Contentfulの公開WebhookをMake/Zapierとリダイレクトマイクロサービス(EasyRedir、redirect.pizza)へ送ります。
  3. 編集者に違いを教える:301はリンクエクイティを渡しますが、302は渡しません。 JavaScriptリダイレクト(window.location)は遅く、エクイティを渡さない可能性があり、Google以外のクローラーが追わないこともあるため避けます。

構造化データ、hreflang、パフォーマンス

構造化データは、ヘッドレスの方が簡単になる珍しい領域です。Contentfulの構造化されたコンテンツはJSON-LDに自然に対応します。FAQ型はFAQスキーマ、Article型はArticle/BlogPosting、Product型はProductを出力し、OrganizationスキーマはグローバルなSite Settings型に置きます。フロントエンドがコンテンツフィールドからJSON-LDを生成してサーバー側で注入し、編集者はJSON-LDを書きません。 レンダリングを変えた後はRich Results Testで検証します。

多言語/hreflang。 Contentfulにはフィールドレベルのローカライズ機能があり、APIリクエストのlocaleパラメーターにen-USde-ATのようなISOコードを使えます。ただしこれはコンテンツの配信であり、SEOシグナルではありません。フロントエンドがContentfulのロケールデータからhreflangタグを生成し、すべてのローカライズページにx-defaultを含める必要があります。hreflangは<head>、HTTPヘッダー、XMLサイトマップのいずれに置いても有効です。Contentfulフロントエンドでは<head>が一般的です。

パフォーマンス。 ContentfulのDelivery APIはグローバルCDNから配信され、高いキャッシュヒット率がビルド時またはサーバーレンダリング時のTTFBを助けます。ただし実ユーザーのTTFBとLCPはContentful APIのレイテンシーより、フロントエンドのホストとレンダリング方式に左右されます。したがってCore Web Vitalsには、Contentfulそのものより静的AstroやNext.jsの静的/ISRなど、フレームワークの選択がはるかに重要です。

トラフィックを落とさずContentfulへ移行する

ヘッドレスSEOが実際に壊れるのは移行時です。典型的な失敗は、301の破損(カテゴリ、タグ、ページネーション付きアーカイブを特に忘れやすい)、移行されなかったメタデータ、CSRへ黙って切り替わったレンダリング方式です。公開前に、投稿だけでなくすべてのURLを棚卸しし、完全な301マップを作り、新フロントエンドのメタデータとcanonicalを検証し、前後でScreaming Frogのクロールを比較し、Google Search ConsoleとBing Webmaster Toolsの両方へサイトマップを再送信し、Googlebotが実際に何をレンダリングしたかの真実のソースとしてURL検査を使ってください。

関連記事:ヘッドレスCMS SEOJavaScript SEO、より広いレンダリングのトピックです。Contentful SEOは、これら3つを専門化した応用にすぎません。

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.