WEB

Googleマップとストリートビューの埋め込み!WEBサイトに活用する方法とSEO効果を解説【初心者向け】

Googleマップとストリートビューの埋め込み!WEBサイトに活用する方法とSEO効果を解説【初心者向け】

ホームページに、

  • Googleマップ
  • ストリートビュー

埋め込み表示する方法を紹介します。

サイトにマップを埋め込むメリットもまとめてみました。

こんな方におすすめ

  • 会社サイトのアクセスページに地図を表示したい!
  • グルメブログにお店の場所と外観をわかりやすく見せたい!
  • 旅行記事に行ったおすすめスポットを紹介したい!

関連「THETA」で撮影した360度写真を公開する方法

Googleマップを埋め込みはseo効果がある?

googleマップを埋め込むことはseo効果がある?
googleマップを埋め込むことはseo効果がある?

ホームページにGoogleマップを埋め込んでも、検索順位が上がるなどの直接的な効果はありません。

ですが、間接的にはには効果的です。

  • ユーザーの利便性の向上
  • サイトの滞在時間が延びる
  • Googleへの信頼性の向上

など、特にローカルSEOと呼ばれる「MEO」には期待できます。

MEOとは

MEOとは、実店舗を持つビジネス(飲食店、美容院、病院など)が、地域に関連するキーワードで検索された際に、Googleマップ上でより多くのユーザーに見つけてもらい、来店や問い合わせに繋げること。

ただし、ページの表示速度低下や、重要な情報はテキストでも記載するなどの注意が必要。

ユーザーの利便性を高める目的で適切に活用しましょう。

Googleマップの埋め込み方法

▲ サイトに「Googleマップ」を埋め込みました。

位置情報を共有することができ、縮尺や見せ方もユーザーが自由に変更し確認することが出来ます。

埋め込みたい場所をGoogle検索

Googleマップの埋め込み:場所を検索
Googleマップの埋め込み:場所を検索

まずは、埋め込みたい位置をGoogleで検索します。

今回はサンプルとして「大阪城」と検索してみます。

daruma108
daruma108

検索結果ページ右側に「大阪城」の

  • 写真
  • 地図、
  • 営業時間
  • 連絡先 など

が表示されます。

この右側の地図をクリックし、Googleマップ画面に切り替えます。

共有ボタンからコードを取得

Googleマップの埋め込み:共有ボタンからコードを取得
Googleマップの埋め込み:共有ボタンをクリック

Googleマップ画面に切り替わり「大阪城」の位置が表示されます。

この地図を埋め込みたいので、写真の下にある「共有」ボタンをクリック

Googleマップの埋め込み:地図を埋め込むを選択
Googleマップの埋め込み:地図を埋め込むを選択

共有ポップアップウィンドウが開きますので、タブの「地図を埋め込む」を選択。

Googleマップの埋め込み:埋め込みコードを取得
Googleマップの埋め込み:埋め込みコードを取得

するとプレビューの地図が表示され、埋め込むためのHTMLコードが表示されます。

Googleマップの埋め込み:表示するサイズを指定
Googleマップの埋め込み:表示するサイズを指定

コードの左側の「中▼」と書かれたプルダウンをクリックすると

  • 小 横 400px × 高さ 300px
  • 中 横 600px × 高さ 450px
  • 大 横 800px × 高さ 600px
  • カスタムサイズ 自由に指定

と埋め込む地図の大きさを選択できます。

ご自身のホームページのデザインに合わせて好みのサイズを設定しましょう。

「HTMLをコピー」ボタンを押しコピー、自身のホームページにペーストすればGoogleマップを埋め込むことが出来ます。

埋め込みたい場所にコードをペースト

Googleマップの埋め込み:カスタムHTMLにペースト
Googleマップの埋め込み:カスタムHTMLにペースト

ワードプレスの記事内に挿入する場合は、「カスタムhtml」ブロックペースト!

ブログやホームページにGoogleマップを埋め込むことができました!

Googleストリートビューの埋め込み方法

Googleマップの埋め込みはよく見ることがあると思いますが、Googleストリートビューも同じようにホームページなどに埋め込むことが出来ます。

↑このように建物の外観も見る事ができる他、目的地からマウスや指で左右にスライドし周辺環境や前後の道を辿ったりする事もできるので非常に便利♪

それでは早速、そんな便利なGoogleストリートビューを埋め込んでみます。

先程、通常のマップの埋め込みをする際にGoogleマップ画面に切り替わったところで、左側を下にスクロールします。

スクロールすると一般の方々がアップしてくれている写真が表示され、その中に「ストリートビューと360°ビュー」という項目があるので、そこをクリックします。

すると、右側の地図が表示されていた箇所に、その場所で公開されている360°写真が表示されるので、その写真の左上あたりにある小さな黒いウィンドウの「メニュー」ボタンをクリック。

「印刷」「問題の報告」「画像を共有または埋め込む」の3項目が表示されますので、3番目の「画像を共有または埋め込む」を選択します。

ここからは上でやった通常のマップの埋め込みと同じ要領で、立ち上がった「共有」ウィンドウから「地図を埋め込む」を選択します。

htmlコードをコピーして、自分のサイトにペーストするだけ!

htmlコードをコピーして、自分のサイトにペーストするだけで、周辺環境360°を見渡せるストリートビューを自分のサイトに埋め込む事が出来ます。

まとめ:Googleマップの埋め込み

  • Googleマップ
  • ストリートビュー

をサイトに埋め込み表示する方法を紹介しました。

  • ボタン一つで全画面マップに切り替える
  • 地図アプリの立ち上げ
  • ストリートビューで目的地周辺の確認

など、ユーザーの利便性が向上します。

自身が管理するサイトのアクセスページにGoogleマップストリートビューを埋め込んでみてはいかがでしょうか。

Check!
リコー「THETA SC2」で撮影した写真・動画をウェブ上で公開する方法 【360度カメラ】
リコー「THETA SC2」で撮影した写真・動画をウェブ上で公開する方法 【360度カメラ】

続きを見る

【簡単レスポンシブ】PCとスマホで画像を切り替える方法【HTMLのみ】

WEB

2024/1/3

【簡単レスポンシブ】PCとスマホで画像を切り替える方法...

【初心者向け】CSSで背景画像だけを回転させる方法を紹介!他の応用技も

WEB

2023/12/23

【初心者向け】CSSで背景画像だけを回転させる方法を紹...

リコー「THETA SC2」で撮影した写真・動画をウェブ上で公開する方法 【360度カメラ】

WEB カメラ

2025/6/7

リコー「THETA SC2」で撮影した写真・動画をウェ...

「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

WEB デザイン

2023/5/13

「侍テラコヤ」は安くで始めるプログラミングスクール【リ...

【箇条書き】リストタグ[ ul・ol・li ]の使い方、マーカーの消し方・注意点も

WEB 作りたい

2023/12/23

【箇条書き】リストタグ[ ul・ol・li ]の使い方...

-WEB
-,