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

ホームページに、

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

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

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

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

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

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

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

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

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

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

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

Googleマップの埋め込み方法

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

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

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

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

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

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

が表示されます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

自分で撮影した360°写真の埋め込み

Check!

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

続きを見る