Googleマップを店舗サイトに埋め込む方法|手順・順位への効果・表示速度・複数店舗の地図

結論: 地図の埋め込みは、来店する人の道案内のために、アクセスページや店舗ページに置きます。「埋め込むと MEO で順位が上がる」という話はよく聞きますが、順位への効果を確かめた検証は見当たりません。埋め込むときは、住所ではなく GBP(店舗)を表示してから埋め込みコードを取り、表示速度を落とさないよう置き場所を絞ります。

順位への効果は検証されていない

「Googleマップを埋め込むと、Google がサイトと GBP を結び付けて、マップの順位が上がる」という説明を見かけます。しかし、これを確かめた検証は見当たりません。

• Sterling Sky は、地図の埋め込みは画像の地図よりも地域の手がかりになるとしつつ、順位や速度への影響を比べる検証はしていないと述べています
• Google も、地図の埋め込みが順位に関係するとは説明していません
• GBP とサイトを結び付けるのは、リンク先 URL、サイト上の NAP、構造化データなど、ほかの手段で十分にできます

効果の目安を「低」としているのはこのためです。地図は、利用者が迷わず来店できるようにするものとして置いてください。

埋め込みの手順

1. GBP(店舗)を表示する

パソコンで Googleマップを開き、店名で検索して、店舗の情報(GBP)を表示します。

住所で検索したり、地図上の地点をクリックしたりして埋め込みコードを取ると、埋め込んだ地図に店名が表示されない、ピンの位置が微妙にずれることがあります。LocalBase がこれまで埋め込みの手順を案内してきた中でも、最もよくある取り違えです。必ず、左側に店舗の名前・写真・クチコミが表示された状態で次に進みます。

2. 埋め込み用の HTML をコピーする

1. 店舗の情報の中にある「共有」を押す
2. 「地図を埋め込む」を選ぶ
3. サイズ(小・中・大・カスタム サイズ)を選ぶ
4. 「HTML をコピー」を押す

左上のメニューから「地図を共有または埋め込む」を選んでも、同じ画面に進めます。

3. サイトに貼る

コピーした HTML(<iframe ...>)を、ページの地図を表示したい場所に貼ります。作成サービスでは「HTML の埋め込み」「カスタムコード」などの部品を使います。

4. 表示を確かめる

• 地図に店名が表示され、ピンが店舗の建物にあるか
• スマホで、地図が画面からはみ出していないか
• 地図の「拡大地図を表示」から、GBP(クチコミや写真)が開けるか

スマホで見やすくする

コピーした HTML は横幅が固定されているので、スマホでははみ出すことがあります。横幅を 100% にし、高さを決めておきます。

<iframe
  src="(コピーした URL)"
  width="100%" height="360" style="border:0;"
  loading="lazy" referrerpolicy="no-referrer-when-downgrade"
  title="○○整体院 渋谷店の地図">
</iframe>

• loading="lazy" は、画面に近づいてから地図を読み込む指定です。コピーした HTML に最初から入っていることが多いので、消さないでください
• title に何の地図かを書いておくと、画面の読み上げを使う人にも伝わります

どのページに置くか

地図だけでは、駅の出口や入口の場所までは伝わりません。地図の近くに、住所を文字で書き、駅からの道順を写真付きで載せると、来店する人の迷いが大きく減ります。

表示速度への影響

埋め込みの地図は、表示のために多くのファイルを読み込みます。1 つなら大きな問題になりにくいものの、次のような置き方では、表示速度(Core Web Vitals)に響きます。

• 最初の画面に地図がある(最も大きな表示物になり、表示完了が遅れる)
• 1 ページに地図をいくつも置く(複数店舗の一覧ページで、店舗ごとに地図を埋め込むなど)
• 全ページのフッターに地図がある

loading="lazy" を付けても、ブラウザは画面に入るかなり前から読み込み始めるため、ページの上の方にある地図は、結局最初に読み込まれます。

軽くする工夫

• 地図の画像とリンクに置き換える: 地図の画像(自分で作った案内図など)を置き、押すと Googleマップの GBP が開くようにします。Lighthouse も、こうした「押されるまで本物を読み込まない」置き換え(ファサード)を、重い埋め込みの改善策として挙げています
• 「地図を表示」ボタンで読み込む: ボタンを押したときだけ埋め込みの地図を読み込むようにします
• GBP へのリンクを必ず付ける: GBP の「共有」から取れる短い URL を「Googleマップで開く」のリンクにすると、スマホでは地図のアプリで道順をすぐ出せます

複数店舗をまとめた地図

店舗一覧ページで、全店舗のピンを 1 つの地図に表示したい場合、Google マップの共有の「地図を埋め込む」ではできません。ピンを並べるだけなら、Google マイマップに各店舗を追加し、公開した地図を「自分のサイトに埋め込む」方法があります。絞り込みや現在地から近い店舗の表示まで作るなら、Google Maps Platform の API を使います。

• GBP の管理画面に「ウェブサイトに地図を追加」「ウェブサイトにルートを追加」といった案内が出ることがありますが、これらも Google Maps Platform の機能で、API キーと請求先の設定が必要です。「無料で追加できる」と説明している記事もありますが、設定によっては費用がかかります
• API キーには、自社のドメインからしか使えないよう制限をかけ、予算のアラートを設定します。キーを制限しないと、他人に使われて費用が発生することがあります
• 地図の外にも、店舗の一覧を文字で置きます。地図のピンからしか店舗ページにたどれない作りは、Google も利用者も店舗ページを見つけにくくなります。店舗一覧の作り方は店舗ページ・地域ページを参照してください

よくある失敗

チェック項目

• GBP を表示した状態で、埋め込みコードを取った
• 埋め込んだ地図に店名が出て、ピンが店舗の建物にある
• スマホで地図がはみ出していない
• 地図の近くに、住所(文字)と駅からの道順がある
• 地図を置くのは、アクセスページ・店舗ページなど必要なページだけ
• 最初の画面に重い地図を置いていない
• 複数店舗の地図で API を使う場合、キーの制限と予算のアラートを設定した

よくある質問

Q. 地図を埋め込まないと、MEO で不利になりますか? 不利になるという検証はありません。道案内として役に立つので置くことを勧めますが、順位のために置く必要はありません。

Q. 地図のクチコミの星がサイトに表示されますが、問題ありませんか? 埋め込んだ地図に GBP の評価が表示されるのは、Google の地図の機能なので問題ありません。ただし、それを構造化データとして自社サイトに書いても、検索結果に星は出ません。

Q. 埋め込んだ地図の住所が古いままです。 埋め込みの地図は GBP の情報を表示しているので、GBP の住所とピンを直せば、地図も追って更新されます。住所ではなく古い地点で埋め込んでいた場合は、埋め込みコードを取り直してください。

出典

• 地図を共有または埋め込む(Google マップ ヘルプ)
• 地図の共有、ダウンロード、印刷(マイマップ ヘルプ)
• How To Embed Google Map in Website(Sterling Sky)
• Maps Embed API の使用量と課金(Google Maps Platform)
• Google Maps Platform の料金(Google Maps Platform)
• Lazy load third-party resources with facades(Chrome for Developers)