Strapi CMS + Next.js を活用した高度な SEO アーキテクチャを持つウェブサイト
成長中のビジネスは、非技術系のマーケティングチームがページ、ブログ記事、ランディングページを独立して管理できる、高速でコンテンツが豊富なマーケティングウェブサイトを必要としていました。同時に、サイトが初日からオーガニック検索で競争力のある順位を獲得できるようにすることが重要でした。
プロジェクトを相談する
課題
既存のウェブサイトは、複合的な問題を引き起こすモノリシックな CMS 上に構築されていました。
- パフォーマンスの低下 — 肥大化したプラグインを含むサーバーレンダリングページは平均4～6秒の読み込み時間を要し、Core Web Vitals を低下させていました。
- 開発者のボトルネック — あらゆるコンテンツ変更（新しいランディングページ、ブログレイアウト、CTA更新）には、開発者がテンプレートファイルに手を加える必要がありました。
- 貧弱な SEO 基盤 — 構造化データがない、メタタグが不整合、Canonical URL が欠落、プログラムによるサイトマップがないことなどが、オーガニック検索での視認性低下につながっていました。
- 柔軟性のないコンテンツモデル — 新しいコンテンツタイプ（ケーススタディ、FAQ、チーム紹介）の追加には、スキーマの移行とテンプレートの書き換えが必要でした。
- プレビュー機能なし — エディターは公開前に変更をプレビューする方法がなく、内容を確認せずに公開していました。
- ローカライゼーションのニーズ — 将来の多言語展開には、i18n をネイティブでサポートする CMS が必要でした。
私たちのソリューション
当社は、Strapi で柔軟なコンテンツモデリングレイヤーを、ほぼ瞬時に更新可能な ISR を用いた静的生成 Next.js フロントエンド、そして技術的、オンページ、構造化データ最適化を網羅する包括的な SEO システムを備えたStrapi + Next.js ヘッドレスアーキテクチャを構築しました。
アーキテクチャ
- CMS: Strapi (セルフホスト) とカスタムコンテンツタイプおよび Dynamic Zones
- フロントエンド: App Router、React Server Components、TypeScript を使用した Next.js
- スタイリング: デザインシステムトークンを用いた Tailwind CSS
- SEO レイヤー: Next.js Metadata API、JSON-LD ジェネレーター、自動化されたサイトマップ/robots.txt
- メディア: 最適化された配信のための Cloudinary プロバイダーを備えた Strapi Media Library
- ホスティング: Vercel (フロントエンド)、クラウドホスト型 Strapi バックエンド、Cloudinary (メディア CDN)
- データベース: Strapi コンテンツストレージ用の PostgreSQL
- キャッシュ: Strapi Webhook を介したオンデマンド再検証による ISR
Strapi コンテンツモデリング
コンテンツタイプ
CMS は、すべてのビジネスニーズをカバーするコンテンツタイプを中心に構築されました。これには、マーケティングページ、カテゴリと著者を持つブログ記事、キャンペーンランディングページ、サービス/製品提供、チームメンバーの経歴、FAQ、お客様の声、およびサイト全体の構成を管理するグローバル設定シングルトンが含まれます。
Dynamic Zones (ページビルダー)
Strapi の Dynamic Zones を使用すると、エディターは再利用可能なコンポーネントからページコンテンツを構成できます。各ゾーンエントリは、フロントエンド上の React コンポーネントにマッピングされます。利用可能なブロックには、ヒーロー、特徴グリッド、画像付きテキストレイアウト、お客様の声セクション、CTA バナー、FAQ アコーディオン、統計カウンター、料金表、ロゴグリッド、埋め込みコンテンツ、ブログハイライト、お問い合わせフォームなどがあり、一般的なすべてのマーケティングページパターンをカバーしています。
SEO コンポーネント (再利用可能)
すべてのコンテンツタイプにアタッチされた共有 SEO コンポーネントは、カスタムメタタイトル、メタディスクリプション、Canonical URL の上書き、Open Graph 画像、インデックス作成ディレクティブ、フォーカスキーワード、およびオプションの構造化データ上書きのためのフィールドを提供し、すべてのコンテンツで一貫した SEO 管理を保証します。
Next.js フロントエンドアーキテクチャ
コンポーネント構造
フロントエンドは階層化されたアーキテクチャに従っています。
- ブロックコンポーネント は Strapi Dynamic Zone のエントリに直接マッピングされます。
- UI プリミティブ は一貫したデザインシステム要素を提供します。
- レイアウトコンポーネント はヘッダー、フッター、ナビゲーションを処理します。
- SEO ユーティリティ は構造化データとメタタグを生成します。
中央の Dynamic Zone レンダラーは、Strapi からのブロック配列を反復処理し、各エントリに対応する React コンポーネントをレンダリングします。
データ取得戦略
すべてのルートは、Strapi Webhook によってトリガーされるオンデマンド再検証による Incremental Static Regeneration (ISR) を使用しています。エディターがコンテンツを公開または更新すると、Strapi は Webhook を発火させ、影響を受ける特定のページの再検証をトリガーし、フルリビルドなしで数秒以内に更新が公開されるようにします。
SEO 実装
テクニカル SEO
- ページごとのメタデータ — Strapi の SEO フィールドから生成されるタイトル、ディスクリプション、Canonical URL、Open Graph、Twitter Card タグ。インテリジェントなフォールバック機能付き。
- 自動化されたサイトマップ — 公開されたすべてのコンテンツから、適切な変更頻度と優先度値でプログラムによって生成されます。
- Robots.txt — 環境に応じた生成（本番環境ではクロールを許可、ステージング環境ではブロック）
- Canonical URL — 末尾のスラッシュ正規化によって自動生成され、CMS から上書き可能です。
構造化データ (JSON-LD)
自動化されたスキーマ生成は以下をカバーします。
- Organization — グローバル設定からのサイト全体スキーマ
- Article — 見出し、著者、日付、出版社を含むブログ記事
- FAQ — ページで FAQ ブロックが使用されると自動生成されます。
- Breadcrumb — URL パス階層から自動生成されます。
- Service — 提供者とサービス提供地域を含むサービスページ
- Local Business — オプションで、物理的な店舗を持つビジネス向け
パフォーマンス SEO (Core Web Vitals)
- LCP — ヒーロー画像はプリロードされ、Cloudinary の自動フォーマット (WebP/AVIF)、重要な CSS はインライン化され、Server Components は不要なクライアント JS を排除します。
- CLS — メディアライブラリからの明示的な画像寸法、size-adjust による最適化されたフォント読み込み、スケルトンプレースホルダー、固定寸法の埋め込みコンテナ
- INP — 最小限のクライアントサイド JavaScript、軽量なインタラクティブハンドラ、ルートごとのコード分割
オンページ SEO ツール
CMS には、メタフィールドの文字数インジケーター、SEO メタデータなしでページが公開されないことを保証する必須フィールド検証、およびコンテンツタイトルや抜粋からの SEO フィールドの自動入力と手動上書きオプションを含むエディターガイドが搭載されています。
メディアパイプライン
Strapi にアップロードされた画像は Cloudinary CDN に保存され、Next.js フロントエンドは自動フォーマット選択、レスポンシブサイズ調整、エッジキャッシング、およびファーストビュー優先読み込みのためのブラープレースホルダー付き遅延読み込みを備えた最適化されたバリアントをリクエストします。
主要機能
- Dynamic Zone ページビルダー — 12種類以上の構成可能なブロックで、開発者なしでのページ作成が可能
- 再利用可能な SEO コンポーネント — 一貫したメタ管理のために、すべてのコンテンツタイプにアタッチ
- 自動構造化データ — Organization、Article、FAQ、Breadcrumb、Service 用の JSON-LD
- ISR + Webhooks — フルリビルドなしでコンテンツ更新が数秒で公開
- プログラムによるサイトマップ — 公開されたすべての Strapi コンテンツから自動生成
- Cloudinary メディアパイプライン — 自動フォーマット、レスポンシブサイズ調整、CDN 配信
- Core Web Vitals 最適化 — Server Components、画像プリロード、フォント最適化、最小限の JS
- ドラフトプレビュー — Strapi のプレビューボタンで、公開前に Next.js でドラフトコンテンツをレンダリング
- i18n 対応 — 将来の多言語展開のための Strapi の組み込み国際化機能
- エディターのガードレール — Strapi 管理画面での文字数カウント、必須フィールド、キーワードガイダンス
成果
技術スタック
caseStudyDetail.more ケーススタディ
その他の技術実装事例をご覧ください
Next.js、ACF、再利用可能なコンポーネントアーキテクチャを備えたヘッドレスWordPress CMS
ある企業は、WordPressのコンテンツ編集の柔軟性と、従来のWordPressテーマの制約を受けずに、最新のReactフロントエンドの速度と開発者体験を兼ね備えた、高性能でSEOに最適化されたマーケティングウェブサイトを必要としていました。
AIを活用したOCRによる請求書処理とQuickBooks連携
毎月数百件の仕入先請求書を処理する中規模企業が、AI/OCRを使用して請求書データを自動抽出し、それを記帳と支払追跡のためにQuickBooksに直接同期させることで、手動データ入力を排除する必要がありました。
よくある質問
MicrocosmWorksがこのプロジェクトでStrapiを選んだのは、コンテンツAPIの構造を完全に制御できるためです。これにより、メタタイトル、ディスクリプション、canonical URL、構造化データ、ソーシャルシェアリングメタデータ用のフィールドをコンテンツモデルに直接組み込んだ、SEOに最適化されたコンテンツタイプを設計することができます。WordPressとは異なり、StrapiにはレガシーなPHPのオーバーヘッドがありません。また、Contentfulとは異なり、セルフホスト型であるため、編集チームの成長に伴って増大するユーザーごとの料金体系もありません。
MicrocosmWorksは、Strapiのすべてのコンテンツタイプに、すべてのメタタグ、Open Graphデータ、JSON-LD構造化データテンプレート、およびcanonical URLルール用のフィールドを含む再利用可能なSEOコンポーネントが含まれるSEOフレームワークを構築しました。Next.jsフロントエンドのgenerateMetadata関数は、ビルド時にこれらのフィールドを取得し、検索エンジンクローラー向けにそれらを正しくレンダリングします。また、システムには、エディターが不足している、または不適切にフォーマットされたSEOフィールドを持つページを公開するのを防ぐStrapi内のバリデーションルールが含まれています。
MicrocosmWorksは、Strapiのcontent typesがプログラマティックページのデータ構造を定義し、Next.jsがgenerateStaticParamsを使用してビルド時にすべてのページバリアントを事前レンダリングするテンプレートベースのページ生成システムを実装しました。このアプローチにより、Strapiの構造化データから、地域固有またはサービス固有の何百ものランディングページを作成できます。それぞれのページはユニークなコンテンツ、meta tags、および内部リンクを持ち、検索エンジンはこれらを薄っぺらな重複コンテンツではなく、高品質な個別のページとして扱います。
MicrocosmWorksは、Strapiから公開されているすべてのコンテンツをクエリし、コンテンツタイプと深さに基づいて正確なlastmod日付、更新頻度、および優先度スコアを持つXML sitemapsを生成するNext.jsでの動的なsitemap生成を構築しました。robots.txtも同様にStrapiに保存された設定から生成され、これによりSEOマネージャーはコードデプロイなしでsitemap参照やクロール指示を追加または削除できるようになります。
MicrocosmWorksは、StrapiとNext.jsのウェブサイトを、1時間あたり$20〜$40の開発レートで構築しています。コンテンツモデリング、SEOフレームワーク、コンポーネントライブラリ、デプロイメントインフラストラクチャを含む本番環境対応のウェブサイトは、通常2〜4ヶ月で提供されます。Strapiのオープンソースのセルフホスト型モデルは、コンテンツ量や編集チームの規模に関わらずCMSのライセンス費用がゼロであることを意味します。これは、サイトがスケールするにつれて、商用ヘッドレスCMSプラットフォームと比較して、大幅なコスト上の利点をもたらします。