Bubble

BubbleのSEO対策：ページレンダリング・URL構造・メタタグ完全ガイド

ⓘ本ページはプロモーションが含まれています

スポンサードリンク

1. Bubble のページレンダリングと SEO への影響

Bubble はクライアント側で JavaScript がコンテンツを生成する SPA として動作します。この仕組みはユーザー体験（インタラクティブな遷移や高速な画面切替）に優れる一方、検索エンジンが 「HTML の実体がほとんどない」 ページとして評価しやすくなるリスクがあります。Googlebot はページをレンダリングしますが、スクリプトの実行時間が長いとタイムアウト扱いになるケースが報告されています（Google Search Central の「JavaScript SEO」ガイド参照）。

1.1 JavaScript 遅延描画がもたらすリスク

遅延描画は次のような問題を引き起こします。

  • インデックス漏れ
    Googlebot がページを完全にレンダリングできないと、検索結果に表示されない（「検出されたがインデックスされていません」ステータス）。実際に同一テンプレートから生成した10ページのうち、1ページだけがインデックスされた事例があります（自社プロジェクトで観測）。
  • 評価遅延
    Google はクロール予算を各サイトに配分しますが、レンダリング失敗が頻発するとクロール頻度が低下し、結果的に順位が伸び悩むことがあります。

1.2 プリレンダリング／SSR（サーバーサイドレンダリング）での対策

実装例①：外部プリレンダリングサービス利用

  1. prerender.io や Rendertron に Bubble アプリの URL を登録。
  2. 検索エンジンからのリクエストは Cloudflare Workers などで判別し、プリレンダリングされた HTML を返すように設定。

実装例②：Bubble プラグインでメタ情報を先行出力

  • 「SEO Meta Tags」プラグインはページロード時に <head> に meta タグを書き込むだけでなく、サーバー側でのプレースホルダー（title, description） を設定できます。完全な SSR ではありませんが、Google が最初に取得できるテキスト情報を増やす効果があります。

実装例③：バックエンドワークフローで JSON 出力 & Sitemap に統合

  1. バックエンドワークフローで各ページの主要データ（title, description, image）を JSON 化。
  2. 生成した JSON を /sitemap.json として公開し、Google が簡易的に情報取得できるようにする。

ポイント：プリレンダリングは「インデックス失敗」を根本から防ぐ最も確実な手段です。ただし導入コストと運用負荷が増えるため、まずはメタ情報の先行出力で様子を見ることをおすすめします。

2. URL 構造とスラッグ最適化

URL は検索エンジンだけでなくユーザーにも「ページ内容」のヒントを与える重要なシグナルです。Bubble のデフォルト設定では ?id=123 や長いパスが生成されやすく、これが クリック率低下 と 重複コンテンツのリスク を招きます。

2.1 SEO フレンドリーな URL 設計のポイント

項目 推奨内容 効果
短さ 文字数は 50〜70 字以内に抑える 読みやすく、検索結果で全体が表示されやすい
キーワード ページの主題語を含める（例：/blog/seo-quick-start） キーワードとの関連性が高まり順位向上に寄与
階層構造 /category/sub‑category/page の形で論理的に整理 サイト全体の情報構造が把握しやすくなる
クエリパラメータ排除 必要な場合は 301 リダイレクトで正規化 重複 URL を防止し、クロール効率を改善

2.2 Bubble での設定手順

  1. ページ一覧から対象ページを選択 → 「Settings」タブを開く。
  2. 「URL slug」欄に blog/seo-quick-start のように 階層付きスラッグ を入力。
  3. 変更後は必ず Deploy ボタンで公開し、旧 URL から新 URL へ 301 リダイレクト を設定（「Redirects」プラグインや Cloudflare Workers が便利）。

注意点：Bubble のエディタ上ではスラッグに / を含めるだけで階層が生成されますが、サブページとして認識させるには 同一フォルダ内のページ順序 に気を付けましょう。

3. 動的メタタグと OGP の自動生成

多数のテンプレートページに個別の meta タグや OG 画像を設定するのは手作業では非現実的です。Bubble の 「SEO Meta Tags」プラグイン と カスタムステート を組み合わせると、データベースに保存した情報から自動的にメタ要素を生成できます。

3.1 プラグインとカスタムステートの組み合わせ

手順 内容
① データモデル作成 PageMeta テーブルに title, description, og_image カラムを追加。
② ページロード時にステート設定 「Page is loaded」イベントで「Set state」アクション → pageData = Search for PageMeta:first item（対象ページのメタ情報を取得）。
③ プラグイン側マッピング SEO Meta Tags の各フィールドに Current page's pageData.title などをバインド。
④ 動的 OG 画像 <meta property="og:image" content="Current page's pageData.og_image"> が自動で差し替わるように設定。

コード例（Bubble の式）

3.2 実装チェックリスト

  • [ ] 「SEO Meta Tags」プラグインが最新バージョンで有効化されている。
  • [ ] PageMeta テーブルに全ページ分のレコードが揃っている（欠損がないか定期的に検証）。
  • [ ] ページロード時にステート取得失敗した場合の フォールバック（デフォルトメタ）を設定。
  • [ ] 変更後は Google Search Console の「URL Inspection」 で meta タグが正しく反映されているか確認。

ベネフィット：コード量が極めて少なく、全ページに共通ロジックを適用できるため、メンテナンスコストが大幅に削減されます。

4. 構造化データ（JSON‑LD）とパフォーマンス改善策

検索結果でリッチスニペットを表示させるには Schema.org に準拠した JSON‑LD が必須です。加えて、ページ速度は Google のランキング要因の一つであり、画像やリソースの最適化が求められます。

4.1 JSON‑LD 埋め込み例（Product スキーマ）

{{ }} は Bubble の動的テキスト置換です。ページごとに pageData が変わるため、同一テンプレートで複数商品を正しくマークアップできます。

4.2 パフォーマンス最適化の具体策

項目 実装例 推定効果*
画像圧縮 TinyPNG API を利用し、アップロード時に自動圧縮（Bubble の「FileUploader」プラグインと連携） PNG は平均 35%、JPEG は 45% のファイルサイズ削減（TinyPNG 公式レポート）
Lazy Load data-src 属性で画像を遅延読み込みし、IntersectionObserver でビューポートに入ったら src に切替 初回レンダリング時間が約 30% 短縮（Web.dev のベンチマーク）
ブラウザキャッシュ Cloudflare の「Cache‑Level: Cache Everything」＋ Edge TTL を 5 日に設定 再訪問時のロードがほぼ瞬時になる
HTTPS 強制 Bubble の「Domain Settings」で Force SSL をオン、外部サーバ使用時は .htaccess にリダイレクトルールを追加 セキュリティ向上と共に、Google が HTTPS をランキングシグナルとして評価（Search Central）

※効果は環境やコンテンツ量により変動しますが、上記数値は各ベンダーが公表している平均的な削減率です。

5. Sitemap.xml の自動生成とインデックス確認

SPA では内部リンクだけで全ページを発見させるのが難しいため、Sitemap.xml を用意して検索エンジンに全 URL を通知することが基本となります。

5.1 自動生成ワークフロー

  1. プラグイン導入 → 「Sitemap Generator」プラグインを追加。
  2. API ワークフロー作成
  3. 名称：Generate sitemap
  4. アクション：全公開ページの URL を取得し、XML 文字列を組み立てる（Bubble の「Run JavaScript」アクションでテンプレート化）。
  5. 保存先 → File Manager に sitemap.xml として保存。
  6. 定期更新 → 「Schedule API Workflow」機能で毎日 00:00 に自動実行し、コンテンツ追加時に即反映させる。

XML のサンプル

5.2 よくある落とし穴と対策

落とし穴 原因 対策
robots.txt が全ページをブロック Disallow: / のまま公開 GSC の「robots.txt Tester」や Cloudflare の設定で Allow: / に変更。
SPA が「コンテンツなし」と判定 <body> が空のまま返される プリレンダリングサービス導入、または重要情報（title, meta）だけでもサーバー側で先行出力する。
重複 URL がインデックス パラメータ付き URL が自動生成される <link rel="canonical"> タグをプラグインで一括設定し、不要パラメータは 301 リダイレクトで統一。

5.3 インデックス確認手順

  1. Google Search Console → 「サイトマップ」→ https://example.com/sitemap.xml を送信。
  2. URL Inspection ツールで代表的なページを検査し、「インデックス済み」 と表示されるか確認。
  3. Rich Results Test で JSON‑LD が正しく認識されているか最終チェック。

6. 記事全体のまとめ

項目 実施すべきこと
ページレンダリング JavaScript の遅延描画だけに頼らず、プリレンダリングまたはサーバー側でのメタ情報先行出力を導入。
URL 構造 キーワード入りの短いスラッグと階層化されたパスに統一し、旧 URL は 301 リダイレクトで正規化。
動的メタタグ 「SEO Meta Tags」プラグイン＋カスタムステートでデータベース情報から自動生成し、全ページで一元管理。
構造化データ & パフォーマンス JSON‑LD を埋め込みつつ、画像圧縮・Lazy Load・キャッシュ設定を施してリッチスニペットと高速表示の両立を実現。
Sitemap とインデックス確認 プラグインまたは API ワークフローで Sitemap.xml を自動生成し、GSC に登録。robots.txt の誤設定や重複 URL に注意しつつ、定期的に URL Inspection で状態をモニタリング。

これらの手順を テンプレート に組み込むだけで、Bubble 特有の SEO 課題は大幅に緩和されます。実装後は Google Search Console のレポートや検索パフォーマンスデータで効果測定を行い、必要に応じて微調整することが成功への鍵です。

次のステップ
1. 本稿のチェックリストをもとに現在の Bubble アプリを診断。
2. 優先度の高い項目（例：URL 正規化、メタタグ自動生成）から実装開始。
3. 1 週間ごとに GSC のカバレッジレポートを確認し、改善が反映されているか検証。

このガイドが、Bubble アプリの検索エンジン最適化を加速させる実践的なロードマップとなれば幸いです。

スポンサードリンク

-Bubble