ストリートビューをホームページに埋め込む方法 完全ガイド【2026年版】｜iframe実装・レスポンシブ対応・SEO効果・iOS不具合対策

ストリートビュー埋込が集客を左右する理由【3分で結論】

Googleストリートビュー（屋内版＝インドアビュー）を撮影して公開したあと、そのSVを自社ホームページに埋め込むことで、Googleビジネスプロフィール単独で公開した場合と比較して集客効果・信頼性・検索エンジン評価がさらに強化されます。

本記事は、SV撮影済みの店舗・施設オーナーおよびWeb制作担当者向けに、公式サイトへのSV埋込方法3種類と、正しいレスポンシブ実装、SEO効果、AI Overviews時代の活用価値まで、コピー可能なコード例付きで完全解説します。

公式サイトにSVを埋め込む3つのメリット

• 来店前の不安解消：実店舗の雰囲気・広さ・清潔感を事前に伝えることで、初回来店の心理的ハードルを下げる
• 滞在時間延長・直帰率改善：SVの操作可能な埋込は閲覧者の滞在時間を延長させ、SEO評価にプラス
• Googleマップ連携・三角連携強化：公式サイトとGoogleビジネスプロフィールを視覚的に結びつけることで、Entity権威性を高める（AI Overviews/Ask Maps でも評価要素）

【保存版】埋込方法3種の使い分け早見表

目的・ご自身の技術レベル・予算に応じた埋込方法3種類を比較しました。

方法	実装難易度	見せ方	SEO効果	おすすめケース
①リンク共有	★☆☆	別タブで開く	△（遷移扱い）	画像ボタン設置のみ。最も簡単
②iframe埋込	★★☆	ページ内に直接表示	○（滞在時間延長）	公式サイトの雰囲気ページ・店舗紹介
③Schema.org sameAs連携	★★★	HTML上は非表示（SEO向け）	◎（Entity連携）	公式サイトとGBPの三角連携強化

方式①：リンク共有（新規タブで開く）

最もシンプルな方法は、お好きなお部屋や場所から始まるSVページへのリンクを公式サイト内のテキストや画像に張ることです。別タブや別ウィンドウでSVページが開く動線を作れます。

下の画像をクリックすると、別タブでストリートビューが表示されます（サンプル）。

リンク共有URLの取得手順

方式②：iframe埋込（ページ内に直接表示）

自社サイトの1ページ内に直接SVを表示する方法です。閲覧者はサイトから離脱せずに操作できます。ドラッグで視点変更・矢印で移動・ズームも可能で、実際に店舗にいるような体験を提供できます。

以下はこの方法での埋込サンプルです（下のSVは実際にドラッグで操作できます）。

iframe埋込コードの取得手順

方式③：Schema.org sameAs連携（SEO最強化）

埋込は画面に見えなくても、構造化データ（Schema.org JSON-LD）を使って公式サイトとGoogleビジネスプロフィール・SV画像URLをエンティティとして結びつけることが可能です。これは2026年のAI Overviews/Ask Maps時代で最も注目されている実装方法です。

Schema.org sameAs 実装例（LocalBusinessと併用）

{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "店舗名",
  "address": { "@type": "PostalAddress", ... },
  "sameAs": [
    "https://maps.app.goo.gl/XXXXXXX",
    "https://www.google.com/maps/place/?q=place_id:ChIJXXXXXXX"
  ],
  "image": "https://lh3.googleusercontent.com/p/AF1QipXXXXXX=w800"
}

上記のように、sameAs プロパティにGoogleマップURL・SV画像URL・Googleビジネスプロフィールのエンティティ情報を含めることで、Googleは「この公式サイトのエンティティ＝このGBPのエンティティ」と認識します。これにより：

• Entity Disambiguation（同名他社との識別）の強化
• AI Overviews引用率の向上（公式サイト+GBP+SVの一貫性をAIが認識）
• リッチリザルト（検索結果上のサイトリンク・画像パック）での露出増加

【重要】レスポンシブ対応の正しい実装方法（コピペ可能コード）

Googleから取得したiframeタグをそのまま公式サイトに貼り付けると、以下の問題が発生します。

• スマホで表示したときに横スクロールが発生（iframe幅が画面幅を超える）
• PC幅で左寄せになってしまい、サイトのデザインと不整合
• 画面サイズ変更時に縦横比が崩れる

これらを解決するレスポンシブ対応ラッパー実装のコード例です。公式サイトのHTMLに貼り付けていただくだけで、すべてのデバイスで正しく表示されます。

❌ NG実装（Googleから取得したまま貼り付け）

<iframe style="border:0;" src="https://www.google.com/maps/embed?pb=..."
  width="600" height="450" frameborder="0" allowfullscreen></iframe>

このままではwidth/heightがピクセル固定のため、デバイス幅に追従しません。

✅ OK実装（ラッパーdivでレスポンシブ化）

<div style="max-width:640px;margin:0 auto;aspect-ratio:4/3;">
  <iframe style="border:0;width:100%;height:100%;display:block;"
    src="https://www.google.com/maps/embed?pb=..."
    frameborder="0" allowfullscreen></iframe>
</div>

ラッパーdivの3点セット

プロパティ	役割	推奨値
max-width	横幅上限（PC幅で広がりすぎない）	640〜960px
margin:0 auto	中央寄せ（PC幅で左寄せにならない）	固定
aspect-ratio	縦横比維持（モバイルでも崩れない）	4/3 or 16/9

iframe側の3点セット

• width:100% / height:100% ── ラッパー追従
• display:block ── インライン要素の余白防止
• HTMLのwidth="" height=""属性は書かない（styleで制御）

埋込サイズとアスペクト比（モバイル/タブレット/PC）

デバイス別にSVの見え方を最適化するため、用途に応じたサイズ・アスペクト比を選択します。

用途	max-width	aspect-ratio	特徴
ページメインビジュアル	1200px	16/9	横長ワイド・PCで映える
通常コンテンツ内	640px	4/3	Googleデフォルト形状・モバイル対応
店舗紹介カード内	400px	1/1 or 4/3	レイアウト内の1要素として
サイドバー/フッター	300px	4/3	補助的な表示

モバイル対応のポイント

• max-width: 100% を基本にし、ラッパーのmax-widthで上限を管理
• タッチ操作の邪魔にならないよう、上下に十分な余白を確保
• iframe の周囲にテキストを回り込ませない（モバイルで崩れる原因）
• ページ遷移誘導よりも「直接操作できる」価値を訴求

埋込後のiOS不具合対策

iOS端末（iPhone/iPad）では、iframeに埋め込んだSVで以下の不具合が発生する場合があります。

• SV画面全体が世界地図にフォールバックして表示される
• ドラッグ操作ができない・矢印での移動ができない
• 画面が真っ白のまま読み込まれない

これらの原因はiframeの同期読み込み制限・iOS Safariの挙動差によるものです。詳しい対処法は別記事 iOS端末でのiframe版ストリートビュー動作不具合対策方法 をご参照ください。

Google Maps CIDリンクとの違い

SV埋込の関連技術として、Google Maps CIDリンクがあります。CIDリンクは、Googleマップ上の店舗ページに直接飛ぶための専用URLで、SV埋込とは別の目的で使われます。

項目	SV iframe埋込	CIDリンク
表示内容	SV画像を直接操作	Googleマップの店舗ページ
使用目的	店舗の雰囲気を見せる	店舗情報・口コミ・ルート検索へ誘導
実装形式	iframe（ページ内）	<a>タグ（リンク）
SEO効果	滞在時間延長・公式連携	外部シグナル・トラフィック誘導
併用可能性	両方併用することで最大効果

CIDリンクの取得方法は CIDとは？公式サイトからGoogleマップ店舗ページへ直接リンクする方法 をご参照ください。自動変換ツールも公開しています。

埋込のSEO効果と注意点

SV埋込は、適切に実装することで直接的・間接的に複数のSEO効果をもたらします。

SEO効果

• 滞在時間・ページ内エンゲージメント延長：操作可能なSVは平均1-3分の追加滞在を生み、Googleの行動シグナルとして評価される
• 直帰率改善：離脱前にSVを操作することでセッション継続率が向上
• 公式サイトとGBPの Entity連携強化：Schema.org sameAs と組み合わせることで Knowledge Graph 上の店舗エンティティが強化される
• AI Overviews引用率向上：Googleが認識する一貫性のある情報源として、AI検索結果での引用確率が上がる

実装時の注意点

• ページ読込速度：iframe は重いリソース。1ページに複数の iframe を並べると表示速度が著しく低下。基本は1ページ1〜2個まで
• lazy loading：可能な場合は loading="lazy" を付加し、スクロール到達時のみ読込む（ただしiOSでは不具合対策の観点から要検討）
• alt テキスト不可：iframe には alt属性がないため、周辺のテキストコンテンツで文脈を補強する
• 複数SVの切替：タブUI等で複数SVを切り替える場合は、表示中のiframeのみアクティブにする実装を推奨

【2026年最新】AI Overviews/GEO時代の埋込価値

2025年以降、Googleの検索結果にはAI Overviews（Google AI 要約）とAsk Maps（地図上の質問応答）が導入され、検索行動が大きく変化しました。この流れの中で、SV埋込の価値は従来とは異なる意味を持つようになっています。

AI Overviews時代における公式サイト埋込の3つの役割

• 公式情報源としての地位確立：公式サイトにSV埋込＋Schema.org sameAs で一貫性を示すことで、AIが「この情報は信頼できる公式情報」と判断する
• 画像パック・地図結果への露出強化：Googleの画像パック検索で、公式サイト経由で露出したSVが優先表示されるケースが増加
• Generative Engine Optimization（GEO）：ChatGPT・Perplexity・Gemini等のAIが公式サイトからSV情報を抽出する際、iframe内のURL情報を読み取って参照する

統計データ（BrightLocal 2026）

• AI Overviewsで参照される情報の45%が公式サイト（前年34%から増加）
• Ask Maps経由の店舗選択時、公式サイトのSV有無が判断材料の32%を占める

よくある質問FAQ

まとめ：今すぐ埋込を始める3ステップ

• Step 1：Googleマップで埋込コードを取得（本記事 §4のiframe埋込取得手順）
• Step 2：レスポンシブ対応ラッパーで包む（本記事 §6 の OKコード例をコピペ）
• Step 3：Schema.org sameAs で Entity 連携（推奨）（三角連携ツールを利用）

まだSVをお持ちでない場合は、撮影から編集・公開まで一貫対応の弊社SV撮影サービスをご検討ください。11年・553件以上の実績があり、撮影後の「公式サイト埋込までのご案内」も含めてサポートします。

ストリートビュー撮影のご相談はおもてなし.comへ

おもてなし.com は2015年1月5日の創業以来11年間、Google認定のストリートビュー撮影パートナーとして活動してきました。Google Street View Summit 全4回連続招待（うち現地参加は後の3回）（2017・2018・2019）、累計4億6千万回以上の閲覧実績、公開支援事例553件以上の業界最古参の実務家として、SV撮影・公開・公式サイトへの埋込設計まで一貫してサポートします。

関連記事