WordPressにGoogleマップを追加する方法(正しい方法)

新規顧客を、単に店のドアが見つけられないという理由だけで失うことを想像してみてください。ビジネスウェブサイトに明確な道案内がないと、あなたが思うよりも頻繁に起こります。

WPBeginnerでは、数え切れないほどの地元企業のオーナーがこの問題を解決するのを支援してきました。適切な地図を追加することは、人々があなたを見つけるのを助けるだけでなく、すぐに信頼を築きます。

このガイドでは、WordPressにGoogleマップを正しく追加する方法を説明します。簡単な手動の方法と、ランキングを向上させるための強力なSEOフレンドリーなオプションの両方をカバーします。

WordPressにGoogleマップを追加する

WordPressにGoogleマップを追加する理由

Googleマップがすべてのプラットフォームで最も人気のあるナビゲーションアプリであることをご存知でしたか?

オフィスや実店舗の住所がある場合、WordPressウェブサイトにGoogleマップを追加すると、ユーザーは実店舗、レストラン、小売店などを簡単かつ迅速に見つけることができます。これにより、より多くの顧客を引き付け、より多くのビジネスを生み出すことができます。

それだけでなく、Googleマップを埋め込むことで、WordPressのSEOを改善することもできます。Googleによると、検索の46%はローカル検索です。WordPressにGoogleマップを追加すると、ローカルSEOを強化し、ローカル検索での表示順位を向上させることができます。

WordPressにGoogle Mapsを埋め込む方法は現在2つあり、両方ご紹介します。

2番目の方法の利点は、すべてのローカルSEOのベストプラクティスに従っているため、これを使用すると、GoogleはGoogleマップにあなたの場所を含めるようになります。また、ローカル検索結果に名前、ロゴ、住所、電話番号、営業時間などのビジネス情報が表示されます。

それでは、WordPressにGoogleマップを追加する方法を見てみましょう。以下は、お好みのセクションに移動するために使用できるクイックリンクです。

プラグインなしでWordPressにGoogleマップを追加する方法

WordPressの投稿やページにGoogleマップを簡単に埋め込みたい場合は、デフォルトのiFrameメソッドを使用できます。

Google マップのウェブサイトにアクセスし、検索エリアに任意の番地を入力するだけです。

Google マップで場所を検索し、「共有」をクリックして埋め込む

次に、共有アイコンをクリックすると、場所リンクを送信するかマップを埋め込むかのオプションが表示されるポップアップが表示されます。

「マップを埋め込む」オプションを選択する必要があります。

GoogleマップのHTML埋め込みコードをコピー

その後、GoogleマップのHTMLコードをコピーし、マップを埋め込みたいページを開きます。

ブロックエディター内で、カスタムHTMLブロックを追加する必要があります。

WordPressでカスタムHTMLブロックを選択

これで、Googleマップからコピーした埋め込みコードを貼り付けるだけです。

その後、変更をプレビューするには、ページを更新または公開する必要があります。

ブロックエディターでのGoogle Maps iFrame埋め込みコード

この方法はGoogleマップをすばやく埋め込むのに役立ちますが、SEO上のメリットを最大限に引き出すことはできません。

あなたが小規模ビジネス、レストラン、または単一または複数の物理的な場所を持つオンラインストアである場合、ローカルSEOランキングを最大化するために次のソリューションを使用することをお勧めします。これは、ローカル検索結果でのランキング向上に役立つ適切なスキーママークアップ(構造化データ)を使用します。

ローカルSEOプラグインを使用してWordPressにGoogleマップを追加する方法

Googleマップを追加し、ローカルSEOのためにサイトを最適化する最良の方法は、All in One SEO (AIOSEO)を使用することです。

これはWordPressの最高のSEOプラグインです。なぜなら、コードを編集したり開発者を雇ったりすることなく、SEOランキングを向上させることができるからです。300万人以上のプロフェッショナルがAIOSEOを使用して検索エンジンのランキングを向上させています。

AIOSEO

このチュートリアルでは、ローカルSEO機能やその他の強力な最適化オプションが含まれているため、AIOSEO Pro版を使用します。検索エンジン向けにサイトを最適化するために使用できるAIOSEOの無料版もあります。

まず、WordPressにAIOSEOプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。

アクティベーション後、プラグインはセットアップウィザードを起動します。プラグインを設定するには、「開始する」ボタンをクリックできます。ヘルプが必要な場合は、WordPressでAll in One SEOを正しく設定する方法に関するガイドを参照してください。

AIOSEOセットアップウィザード

次に、WordPressダッシュボードから All in One SEO » Local SEO に移動できます。

次に、「ローカルSEOを有効化」ボタンをクリックして、ローカル設定の構成を開始します。

ローカルSEOを有効にする

WordPress 用 Local SEO アドオンを有効にすると、AIOSEO で単一または複数の場所を追加し、Google マップに表示できます。両方をウェブサイトに追加する方法を説明します。

単一の場所を追加する

場所、ビジネス情報、営業時間などを追加するには、まずAll in One SEO » Local SEOに移動し、「Locations」タブを開く必要があります。

物理的な場所が1つしかない場合は、「複数の場所」オプションを「いいえ」に設定したままにしてください。

ローカルSEOの場所タブ

その後、「マップ」セクションまでスクロールして、正確な場所をピン留めします。

マップ検索フィールドに住所を入力し始めると、Googleマップがそれを特定します。

あなたの店舗の場所をピン留めする

場所を入力したら、「変更を保存」ボタンをクリックするのを忘れないでください。

複数のロケーションを追加する

物理的な場所が複数ある場合は、ローカルSEOの「場所」タブで「複数の場所」設定を有効にする必要があります。

複数の場所を有効にする

その後、WordPressの管理画面に新しい「Locations」メニューが表示されます。

場所」に移動し、「新規追加」ボタンをクリックしてください。

新しい場所を追加

WordPressエディターに入ったら、「マップ」セクションまでスクロールダウンします。

ここで、マップ検索ボックスに住所を入力できます。

複数の地図の場所を追加する

マップに場所を入力し、場所情報を追加したら、「発行」ボタンをクリックしてください。

これで、この手順を繰り返して、ビジネスに好きなだけ多くの場所を追加できるようになりました。

場所の追加が完了したら、All in One SEO » Local SEOメニューに戻り、「Maps」タブに移動できます。

ここで Google マップ API キーを入力する必要があります。

Google マップ API キーを入力する

それでは、GoogleマップのAPIキーを作成する方法を見てみましょう。

Google Maps APIキーの作成

開始するには、Google Maps Platformのウェブサイトにアクセスし、「開始する」ボタンをクリックする必要があります。

Google マップ プラットフォーム

Googleアカウントでサインインした後、請求先アカウントを設定する必要があります。

Google Maps Platformは従量課金制の価格設定を採用しており、すべてのユーザーに毎月の利用料金の最初の200ドルを無料で提供しています。ほとんどのウェブサイトでは、このチュートリアルで作成しているような簡単なマップ埋め込みには十分です。

心配しないでください。手動で有料アカウントにアップグレードしない限り、料金は請求されません。

開始するには、「請求先アカウントを作成」ボタンをクリックしてください。

請求書払いアカウントを作成する

次に、国を選択し、ドロップダウンメニューから組織を最もよく表すものを選択できます。

この情報が選択されたら、利用規約のチェックボックスをクリックし、「続行」ボタンをクリックします。

請求先アカウントの個人情報を入力する

次の画面で、確認のために電話番号を入力する必要があります。

それが完了したら、「コードを送信」ボタンをクリックします。

携帯電話番号を入力

コードを確認したら、次にビジネス名、支払い方法の詳細、請求先住所を入力します。

これらの詳細を入力したら、「無料トライアルを開始」ボタンをクリックしてください。

ビジネス名と支払い情報を入力

次に、組織とGoogle Maps Platformの使用方法について、一連の4つの質問に回答するように求められます。

Googleマップは、プラットフォームを使用する主な目的、所属する業界、ユースケース、および会社規模について質問します。

これらの質問に回答したら、「送信」ボタンをクリックしてください。

Googleマップに関する質問に答える

これで、Google Maps APIキーが表示されたポップアップが表示されます。

このキーは、後で使用するためにテキストファイルにコピーして保存できます。また、不正使用を防ぐために、APIキーをウェブサイトのドメインに制限することもお勧めします。

APIキーをコピーする

Google マップ API キーを作成したら、WordPress のダッシュボードに戻って AIOSEO ローカル SEO 設定に入力する必要があります。

WordPress で Google マップの設定を構成する

WordPressダッシュボードから All in One SEO » Local SEO に戻り、「マップ」タブに移動できるようになりました。

「APIキー」フィールドにGoogle Maps APIキーを入力してください。キーを追加するとすぐに、AIOSEOでマップのプレビューが表示されます。

APIキーを入力してマッププレビューを表示する

次に、マップ設定を編集するために下にスクロールできます。

AIOSEO では、Gutenberg ブロック、ショートコードウィジェット、または PHP コードを使用して Google マップを表示できます。また、さまざまなマップスタイルを選択したり、マップにカスタムマーカーを追加したりすることもできます。

マップ設定の編集

完了したら、「変更を保存」ボタンをクリックすることを忘れないでください。

WordPress で Google マップを表示する

次に、WordPressの投稿やページにGoogleマップを追加できます。開始するには、ウェブサイトで新しいページを編集または追加するだけです。

ブロックエディターに入ったら、上部にある「+」ボタンをクリックし、AIOSEO Local – Mapブロックをページ上のどこかに追加します。

ローカルマップブロックを追加

その後、Googleマップがページに追加されます。

AIOSEO では、右側のオプションからマップ設定を編集することもできます。たとえば、ラベルやアイコンを表示したり、カスタムマーカーを追加したり、マップの幅と高さを編集したりできます。

WordPress でマップを編集する

複数の場所がある場合は、右側のメニューのオプションから選択して、強調表示する場所を選択できます。

「場所」ドロップダウンメニューをクリックして、ウェブサイトに表示したい場所を選択するだけです。

表示する場所を選択

設定に満足したら、ページを発行してください。

これで、Googleマップが機能しているかウェブサイトにアクセスできます。

マップをプレビューする

また、サイドバーやフッターなど、サイトのウィジェットセクションにGoogleマップを追加することもできます。

まず、WordPressの管理画面から外観 » ウィジェットに移動します。次に、「+」ボタンをクリックし、「AIOSEO Local – Map」ウィジェットブロックを場所を表示したい場所にドラッグ&ドロップします。

マップウィジェットを追加

その後、ウィジェットの設定を編集できます。

例えば、タイトルを追加したり、マップの幅と高さを変更したり、複数の場所がある場合は表示する場所を選択したり、ラベルを編集したりできます。

マップウィジェットの設定を編集する

これで完了です!

ウェブサイトを更新すると、ウィジェットエリアに Google マップが表示されます。

ウィジェットエリアでのマッププレビュー

Google マップに関するよくある質問

ここでは、WordPressサイトにGoogleマップを追加することについて、よく寄せられる質問をいくつかご紹介します。これにより、混乱が解消され、ご自身のウェブサイトにマップを追加する自信が得られるはずです。

1. WordPressにGoogleマップを埋め込むにはGoogle APIキーが必要ですか?

使用する方法によって異なります。手動のiFrame共有コード(このガイドのメソッド1)を使用してマップを単純に埋め込む場合は、APIキーは必要ありません。ただし、プラグインを使用して高度なローカルSEO機能(メソッド2)をアンロックする場合は、無料のAPIキーを作成する必要があります。

Googleマップを追加するとWordPressサイトの表示速度は遅くなりますか?

Googleマップは、正しく実装しないとサイトの速度に影響を与える可能性があります。しかし、私たちが概説する適切な方法に従えば、影響は最小限です。ほとんどの最新のテーマやプラグインはマップの読み込みを効率的に処理しており、訪問者がそのセクションまでスクロールしたときにのみマップが読み込まれるように、遅延読み込みを使用することもできます。

3. WordPressでGoogleマップの外観をカスタマイズできますか?

もちろんです!色をカスタマイズしたり、特定の要素を削除したり、カスタムマーカーを追加したり、完全にカスタムなマップスタイルを作成したりすることもできます。多くのWordPressマッププラグインにはカスタマイズオプションが組み込まれていますが、Googleのスタイリングウィザードを使用して、ブランドに合ったマップを作成することもできます。

4. プラグインを使用するのと、Googleマップを直接埋め込むのと、どちらが良いですか?

ほとんどのWordPressユーザーには、専用のマッププラグインの使用をお勧めします。プラグインは、より多くのカスタマイズオプション、優れたパフォーマンス最適化、および簡単な管理を提供します。直接埋め込みも可能ですが、プラグインは通常、複数の場所やカスタムスタイリングなどの追加機能と、よりユーザーフレンドリーなエクスペリエンスを提供します。

5. WordPressサイトでGoogleマップを使用するのにいくらかかりますか?

Google マップは、ほとんどの中小規模のウェブサイトで無料です。Google は月額 200 ドルの無料利用枠を提供しており、これは約 28,000 回の地図読み込みまたは 40,000 回の経路検索リクエストをカバーします。ほとんどのローカルビジネスのウェブサイトはこの制限を超えることはないため、実質的に無料で利用できます。

6. 1つのGoogleマップに複数のビジネス拠点(ロケーション)を追加できますか?

はい、1つのマップに複数の場所を追加することは間違いなく可能です。これは、複数の支店やサービスエリアを持つビジネスに最適です。ほとんどのWordPressマッププラグインでは、複数のマーカーを簡単に追加でき、各場所を異なる情報、色、アイコンでカスタマイズできます。

WordPressでの地図の使用に関する追加リソース

サイトに Google マップを追加する方法がわかったので、WordPress のマップと場所に関連する他のガイドを確認すると良いでしょう。

この記事が、WordPressサイトにGoogleマップを追加する方法を学ぶのに役立ったことを願っています。また、中小企業向けのおすすめのMapbox WordPressプラグインや、WordPressにGoogleマップの店舗検索機能を追加する方法についてもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

38 CommentsLeave a Reply

  1. とても便利です。最初の試みで地図を置くことができました。
    どうもありがとうございました

  2. この分かりやすいガイドをありがとうございます!しかし、助けが必要な問題があります。私のウェブサイトの1つは、テーマのデザインとコーディングがそうなっているため、ダークモードのカラースキームになっています。私もGoogleマップをよく使用しており、ダークモードバージョンが利用可能であることを知っています。

    通常バージョンではなく、Googleマップのダークモードバージョンをウェブサイトに追加する方法はありますか?ウェブサイトのダークテーマデザインに合わせて地図を表示したいだけです。

    • 現在、埋め込みで地図をダークモードバリアントに変更するための推奨される簡単な方法はありません。変更があった場合は、必ず共有します!

      管理者

  3. これは本当に私にとって時間とリソースを節約できる投稿です。クライアントのウェブサイトにGoogleマップの住所を最小限の方法で追加する方法を探していて、どうすればよいかわからなかったからです。
    プラグインなしの方法とAIOSEOを使用する方法の両方とも優れており、私のニーズを満たしています。
    しかし、ローカルSEOにも役立つため、この機能を実装するにはAIOSEOを選択します。
    Googleマップを埋め込むためのこの役立つガイドをありがとう。

  4. こんにちは、埋め込まれたGoogleマップの下部にある13pxの白い余白を非表示にする方法をご存知ですか?
    よろしくお願いいたします。
    Melanie

  5. ウェブサイトにGoogleマップがありますが、マップに追加したピンがクリックできません。ピンは住所を表示するだけで、クリックしても移動しません。クリック可能なアイコンにすることは可能ですか?

  6. マッププラグインを使用してプラグインに挿入する前に、GoogleからAPIを取得する必要があるのではないでしょうか?最近の私の経験ではそうです。

    • こんにちは、WordPressのウェブサイトにGoogleマップを挿入しようとしていますが、消えてしまいます。Googleはこれに月額200ドル(またはそれ相当の金額)を要求するようになったと理解していますが、それともまだ無料でマップを挿入できますか?

      • Googleは現在、マップAPIの大規模な使用に対して料金を請求しており、プラグインはそのAPI上で動作しています。あなたが目にされた200ドルは、GoogleがAPIを使用するユーザーに提供する無料の月額クレジットであり、小規模なサイトは請求されないようになっています。

        管理者

        • はい、それは本当ですが、Google Maps APIの代替手段があります。OSMapperはOpen Street Maps APIを使用するプラグインで、APIキーは不要で、使用制限もありません。Wordpress.orgからインストールできます。

  7. 最初のステップを試しました。埋め込みボタンに移動してから、投稿のテキストバージョンにHTMLを貼り付けました。ビジュアルバージョンに移動すると、埋め込まれたGoogleマップが表示されました。保存すると、サイトはマップを削除します。変更されたテキストは残りますが、マップは消え続けます。試すたびに繰り返されます。なぜですか?

  8. 素晴らしいチュートリアルです。短く要点を押さえています。クライアントが気に入らなかった他のプラグインを2つ試しましたが、手動埋め込みの情報、ありがとうございます。完璧かつ迅速に機能しました。

    このチュートリアル、本当にありがとうございました。
    Sara

  9. 拝啓

    Googleマップの住所を変更したいのですが、WPバックエンドを更新するために埋め込みリンクをどこで見つけたらよいかわかりません。連絡先メニューに見つかりませんでした。

    それについてご助言いただけますでしょうか!

    ありがとうございます!

    Rdgs,
    Denny Png

  10. ありがとうございます!探していたものです!私のブログの旅行記事に最適です!動画も素晴らしく、とても役立ちます!

  11. これをやりたいのですが、Googleマップに入力して住所を入力しても、ギアが全く表示されないため、WordPressにコピーするリンクさえ取得できません。何かアイデアや提案はありますか?

    • 全く同じ問題が発生しています。Googleマップに花が表示されなくなりました!これはどのように機能するのですか?

  12. こんにちは!
    コードが見つかりません。マップの右下には「花のアイコン」も他のリンクもありません。これは、追加しようとしている場所に番地がなく、座標だけだからでしょうか?
    よろしくお願いします。

  13. マップのチュートリアルはとても良かったのですが、ページの特定の部分やサイドバーに配置したい場合はどうすればいいですか?どなたか助けていただけますか?

  14. 本当にありがとうございます!Googleマップからコードを取得する簡単な手順を提供してくれたのに、なぜわざわざサイトを遅くする可能性のあるプラグインを使う人がいるのでしょうか?

    ところで、コードが見つからなくて困っている人がいたら。地図が表示されたら、右下隅に移動して花のアイコンをクリックし、「地図を共有して埋め込む」をクリックしてください。次に「地図を埋め込む」をクリックして、WPページまたは投稿に入力してください。

  15. こんにちは、Googleマップでグループ(BuddyPress)の場所を表示することは可能でしょうか?
    ご協力ありがとうございます。

  16. こんにちは、

    正確な場所を提供するプラグインを使用したいのですが、何かおすすめはありますか? MapPress、Leaflet Market、WP Google Mapなどのプラグインを使用しましたが、うまくいきませんでした。これらのプラグインはすべて、私の正確な場所から少し離れた場所を表示します。私の店がある正確な場所が必要です。助けてください。または、カスタムマップを開発してWordPressサイトに配置する方法はありますか?手順を教えてください。

    よろしくお願いいたします。
    aamir

  17. この記事を書いてくださりありがとうございます。とても参考になります。Googleプレイスと連携したGoogleマップを追加することは可能ですか?

  18. とても良いですね。しかし、座標を使用すると、ライトボックスマップが正しく機能しません。アメリカのどこかを示しているだけです。これを修正するにはどうすればよいですか?

    ありがとう

  19. 投稿されている有益なWP記事すべてに感謝します。

    サイトに Google マップを追加することは可能ですか?

    1. サイト訪問者またはコメント投稿者のすべての場所を地図に自動的に追加し
    また
    2. すべての顧客を追加できるようにする。おそらく手動で、自動オプションがあればさらに良い。私は世界中に顧客がいる小規模なeコマースサイトを運営しており、どこに商品を発送したかを示すのは楽しいだろうと考えています。

    • ありがとうございます!

      (MapPress Easy Google Maps)は既に導入済みで、とても良いプラグインです。
      そしてもちろん、あなたの丁寧なサポートにも感謝します。ありがとうございます!!!
      もう一つお願いがあります。
      これらのマップをタブで使用したいのですが、現在見つかったマップを表示できるタブ(ショートコード)プラグインは(Jshortcode)だけです。(2番目または3番目のタブに表示されるという意味です。他のものは2番目または3番目のタブに表示されません。)これも良いプラグインですが、タブがとてもカラフルすぎます。
      この問題を解決するために、他のプラグインについてアドバイスをいただけると幸いです。

      事前のご連絡ありがとうございます。
      よろしくお願いいたします。
      Zakaria

返信する

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。