Googleマップをホームページに埋め込む方法と店舗情報の見せ方

近くのお店を探すとき、多くの人がまずスマートフォンでGoogle検索やGoogleマップを開きます。そのタイミングで自店のホームページに地図が載っていれば、初めてのお客様でも迷わずお店までたどり着けます。

Googleマップの埋め込みは、専門知識がなくても数分で設定できる、費用ゼロの集客施策です。とはいえ「とりあえず貼っただけ」で止まってしまい、せっかくの効果を取りこぼしているお店も少なくありません。

この記事では、APIキーを使わない基本の埋め込み手順から、スマホでも崩れないレスポンシブ対応、そして店舗情報を正しく見せてMEO（ローカル集客）につなげる工夫までを順番に解説します。手を動かしながら読み進められるよう、具体的な操作と現場でのつまずきポイントもあわせて紹介します。

なぜホームページにGoogleマップを埋め込むのか

地図を貼るだけで何が変わるのか、まずは目的を整理しておきましょう。埋め込みには、来店のしやすさを高める効果と、ローカル検索での見え方を後押しする効果の両面があります。

来店のハードルを下げ、取りこぼしを防ぐ

お店のホームページを見た人が次に知りたいのは「どこにあるのか」「そこまでどう行くのか」です。住所の文字だけが書かれているより、地図がその場に表示されているほうが、位置関係を一目で理解してもらえます。

埋め込んだ地図はタップするとGoogleマップアプリに切り替わり、そのまま経路案内へ進めます。「住所を見て、別のアプリで打ち直す」という一手間をなくすだけで、来店の途中離脱はぐっと減ります。

とくに初めて訪れる方や、車で向かう方にとって、経路がすぐ開けることは大きな安心材料です。アクセスページや店舗情報ページに地図があるかどうかで、来店の心理的なハードルは想像以上に変わります。

飲食店であれば「予約前に場所を確かめたい」、美容室やクリニックであれば「通いやすいか確認したい」というように、業種を問わず位置情報は来店判断の材料になります。地図が見やすく用意されているだけで、そのお店に対する信頼感も少し高まります。

MEO・ローカル検索にも良い影響が期待できる

Googleマップの埋め込みは、自社サイトとGoogleビジネスプロフィール（GBP）が同じお店を指していることを示す手がかりになります。サイトの住所・電話番号と、地図が示す場所が一致していれば、検索エンジンは「この会社は実在し、この場所にある」と理解しやすくなります。

Googleは公式に、ローカル検索の順位が「関連性・距離・視認性の高さ（知名度）」で決まると説明しています。埋め込みそのものが順位を直接押し上げる魔法ではありませんが、店舗情報の一貫性を高める土台づくりとして役立ちます。

また、地図があることでホームページの滞在時間が伸びたり、経路案内から実際の来店につながったりと、間接的な効果も期待できます。数字にはっきり表れにくい部分ですが、こうした積み重ねがローカルでの存在感を少しずつ育てていきます。

順位の仕組みそのものについてはGoogleマップの表示順位はどう決まる？で、サイトとMEOの連携全体はホームページとMEOを連携させて店舗集客を最大化する方法で詳しく解説しています。あわせて読むと、地図を貼る意味がより立体的に見えてきます。

Googleマップを埋め込む基本手順（APIキー不要）

もっとも手軽なのは、Googleマップの「共有」機能から埋め込みコードを取得する方法です。プログラミングの知識やAPIキーは不要で、コピー＆ペーストだけで地図を表示できます。

共有メニューから埋め込みコードを取得する

パソコンでGoogleマップを開き、検索窓に自店の店名や住所を入力して、正しい場所のピンを表示します。ここで大切なのは、必ず自分のお店のビジネスプロフィール（ピン）を選ぶことです。

お店の情報が表示されたら「共有」をクリックし、開いたウィンドウで「地図を埋め込む」タブに切り替えます。すると、iframeタグ形式の埋め込みコードが表示されます。

コードの左上にある「小・中・大・カスタムサイズ」から、貼りたい場所に合う大きさを選べます。あとは表示されたコードをコピーするだけで準備は完了です。

HTMLに貼り付けて表示を確認する

コピーしたコードは、ホームページのアクセスページや店舗情報ページなど、地図を出したい位置のHTMLに貼り付けます。WordPressなら「カスタムHTML」ブロック、多くのホームページ作成サービスでも「HTML埋め込み」や「コード」用のパーツが用意されています。

貼り付けたら、必ず公開後のページで地図が正しく表示されるかを確認しましょう。ピンの位置が自店とずれていないか、拡大・縮小や経路案内が動くかまで見ておくと安心です。

より細かく地図の見た目を制御したい場合は、Googleが提供する「Maps Embed API」を使う方法もあります。ただしこちらはAPIキーの取得（Googleアカウントでの設定）が必要で、多くの店舗サイトでは、キー不要で無料の共有コードだけで十分に目的を果たせます。

地図はどのページに置くのが効果的か

埋め込む場所として定番なのは、アクセス・店舗情報ページやトップページの下部、そしてお問い合わせページです。お客様が「行き方を知りたい」と思う場面に、自然と地図が目に入る導線をつくることを意識しましょう。

複数の店舗を運営している場合は、店舗ごとの個別ページにそれぞれの地図を1枚ずつ置くのが基本です。1ページにすべての店舗の地図をまとめて詰め込むと、どの地図がどの店舗なのか分かりにくくなってしまいます。

地図の上下には、店名や最寄り駅からの所要時間、駐車場の案内といった補足情報を添えると親切です。地図とテキストがセットになっていることで、来店前の疑問をその場で解消できます。

スマホで崩れない！レスポンシブ対応のコツ

店舗を探すお客様の多くはスマートフォンを使っています。パソコンでは綺麗に見えていた地図が、スマホでは画面からはみ出したり小さすぎたりすると、それだけで印象を損ねてしまいます。

幅を固定しないCSSで比率を保つ

共有コードには「width（横幅）」「height（高さ）」がピクセルで指定されていますが、この数値のままだと画面幅の狭いスマホではみ出すことがあります。対策として、地図を囲むボックスに対して幅を100%にし、高さを比率で保つCSSを当てるのが定番です。

具体的には、外側のdivをposition:relativeにして高さ0・下方向の余白（padding-bottom）で縦横比を作り、内側のiframeをposition:absoluteで幅・高さ100%に広げます。こうすると、どの画面幅でも横いっぱいに、崩れずに地図が表示されます。

WordPressのブロックエディタやホームページ作成サービスの中には、貼り付けるだけで自動的にレスポンシブ対応してくれるものもあります。自分の環境でどう見えるかは、実際にスマホで開いて確かめるのが確実です。

表示速度への配慮も忘れずに

地図の埋め込みは便利な一方で、読み込みにやや時間がかかる要素でもあります。ページの一番上に大きな地図を置くと、本文が表示されるまでの体感速度が遅くなることがあります。

地図はアクセス案内のセクションなど、ページの中ほど以降に置くのがおすすめです。iframeに「loading=”lazy”」を付けて、画面に近づいてから読み込ませる遅延読み込みを使うと、初回表示の負担を軽くできます。

1ページに何枚も地図を並べる必要はありません。基本は店舗ごとに1枚、複数店舗なら店舗別ページに1枚ずつという形にすると、速度と分かりやすさのバランスが取れます。

ページの表示速度は、お客様の使い心地だけでなく、検索エンジンからの評価にも関わる要素です。地図を置く位置や読み込み方法を少し工夫するだけで、快適さを保ちながら地図のメリットを活かせます。

埋め込みだけで終わらせない「店舗情報」の見せ方

地図を貼っただけでは、集客としては半分です。地図の周りに置く「文字の店舗情報」を整えることで、お客様にも検索エンジンにも伝わりやすいページになります。

地図の近くにNAP（店名・住所・電話）を統一して載せる

NAPとは、店名（Name）・住所（Address）・電話番号（Phone）の頭文字をとった呼び方です。埋め込んだ地図のすぐ近くに、この3点をテキストで併記しておきましょう。

電話番号はリンクにして、スマホからそのまま発信できるようにしておくと親切です。住所も、コピーしやすいテキストで載せておくと、お客様がナビアプリに入力する際の手間を減らせます。

このとき大切なのが、ホームページ・Googleビジネスプロフィール・各種掲載サイトで、表記をすべて同じに揃えることです。「1-2-3」と「一丁目2番3号」、ビル名の有無、電話番号のハイフンなど、細かな違いも極力なくします。

表記の揺れは、検索エンジンが同じ店舗だと判断する妨げになりかねません。NAP統一の考え方はNAP統一とは？店名・住所・電話番号を揃えるべき理由と手順で詳しく整理しているので、あわせて確認してみてください。

構造化データ（LocalBusiness）で情報を機械にも伝える

人が読む文字情報に加えて、検索エンジンが理解しやすい形でも店舗情報を用意できると理想的です。その仕組みが「構造化データ」で、ローカルビジネス向けには「LocalBusiness」という種類が用意されています。

Googleは構造化データの記述方式としてJSON-LDを推奨しており、店名・住所・電話番号・営業時間などを決まった形式で記載します。これによりGoogleがあなたのサイトとお店の情報を結びつけやすくなり、検索結果での見え方の改善につながることがあります。

構造化データはHTMLに直接コードを書くか、対応したプラグイン・テーマで設定します。記述の正しさに不安がある場合は、Googleの「リッチリザルトテスト」で確認するか、Web制作の専門家に相談すると安心です。

ここまで神経質に整えなくても、まずはNAPの統一と地図の埋め込みができていれば、店舗ページとしての基礎は十分に整います。構造化データは「余力があれば取り組む一段上の施策」と捉え、無理のない範囲から始めましょう。

よくある失敗と埋め込み時の注意点

最後に、地図の埋め込みでつまずきやすいポイントを押さえておきましょう。事前に知っておくだけで、後からの手直しをかなり減らせます。どれも特別な知識は必要なく、少し気を配るだけで防げるものばかりです。

違うピン・古い情報を埋め込んでしまう

ありがちなのが、自店のビジネスプロフィールではなく、近くの別の建物や住所だけのピンを埋め込んでしまうケースです。表示された地図は必ず拡大して、ピンが自店の正しい入口を指しているか確かめましょう。

また、移転や店名変更をしたのに、古い場所の地図コードを貼りっぱなしにしている例も見かけます。店舗情報を更新したら、埋め込み地図も必ず貼り替える——これを運用のルールにしておくと安心です。

地図だけで力尽きる／情報を詰め込みすぎる

地図を貼ったことで満足してしまい、肝心の営業時間や駐車場の有無、最寄り駅からの道順が書かれていないページも多く見られます。お客様が来店前に知りたいことを、地図とセットで丁寧に補足しましょう。

逆に、1ページに地図を何枚も並べたり、装飾を盛り込みすぎたりすると、かえって分かりにくくなります。地図はあくまで「行き方を助ける道具」と考え、シンプルに見せるのがコツです。

もう一つ見落としがちなのが、定期的な見直しです。営業時間や電話番号を変えたのに、ホームページ側だけ古い情報のまま、という状態は珍しくありません。半年に一度など時期を決めて、地図と店舗情報の内容をまとめて点検する習慣をつけておくと安心です。

ホームページの地図は、MEO全体の取り組みの一部です。基本の考え方をおさらいしたい方はMEOとは？店舗集客で今すぐ押さえる基本もあわせてご覧ください。

よくある質問（FAQ）

Q. Googleマップの埋め込みは無料ですか？

はい、Googleマップの「共有」機能から取得する埋め込みコードは無料で利用できます。この方法ではAPIキーも不要で、料金が発生することもありません。

より高度な制御ができる「Maps Embed API」という方法もあり、標準的な地図表示であれば費用はかかりませんが、こちらはAPIキーの取得が必要です。多くの店舗サイトは、まずキー不要で無料の共有コードで十分に目的を果たせます。

Q. 地図を埋め込むと検索順位は上がりますか？

地図の埋め込みそのものが、順位を直接引き上げるわけではありません。ただし、サイトとGoogleビジネスプロフィールの情報が一致し、店舗情報の一貫性が高まることで、ローカル検索での評価を支える土台にはなります。

「地図を貼れば必ず1位になる」といった断定はできません。NAPの統一や口コミ運用など、他の施策と組み合わせて総合的に取り組むことが大切です。

Q. スマホで地図がはみ出してしまいます。どうすればいいですか？

幅がピクセルで固定されていることが原因の場合がほとんどです。地図を囲むボックスの幅を100%にし、高さを比率で保つCSS（レスポンシブ対応）を当てると、画面幅に合わせて自動で調整されます。

お使いのテーマやサービスによっては、貼り付けるだけで自動対応する場合もあります。設定後は必ず実機のスマホで表示を確認してください。

Q. 店舗を移転したら地図はどうすればいいですか？

まずGoogleビジネスプロフィール側で住所を正しく更新し、そのうえでホームページの埋め込みコードを新しい場所のものに貼り替えます。古いコードのまま放置すると、来店したいお客様を誤った場所へ案内してしまいます。

あわせて、サイト内や各種掲載サイトの住所表記も忘れず更新しましょう。情報の食い違いは、ローカル検索での評価にも影響しかねません。

お店のGoogleマップでの見え方を無料でチェックしませんか

地図の埋め込みを整えても、「実際に地域の検索でどう表示されているか」までは、なかなか自分では把握しづらいものです。access-meoを使えば、あなたのお店のGoogleマップ順位や口コミ・店舗情報の状態をまとめて可視化し、次に何をすべきかが見えてきます。

MEO・ローカル集客について「何から手をつければいいか分からない」という方は、まずは無料でお試しください。ご相談やご質問はaccess-meo公式サイトのお問い合わせからお気軽にどうぞ。

今回ご紹介した地図の埋め込みは、今日からでも始められる小さな一歩です。できるところから少しずつ整えて、地域のお客様に見つけてもらえるお店づくりを進めていきましょう。