カフェのホームページにGoogleマップとSNSを載せる方法

カフェのホームページにGoogleマップとInstagramなどのSNSを載せることで、「場所をその場で確認できる → 来店しやすい → フォローして常連になる」という来店導線が1ページ上で完結します。どちらも費用はかからず、手順通りに進めれば当日中に設置が完了します。この記事では、Googleマップの埋め込みコードの取得・貼り付けから、SNSリンクの設置場所・見せ方まで、順番に解説します。

GoogleマップとSNSをホームページに載せると来店が変わる理由

地図とSNSリンクを設置することで、ホームページを訪れた人が「次にどう動けばいいか」を迷わずに済む状態が作れます。

地図がないと「場所を調べる」手間で離脱される

住所テキストだけのホームページでは、訪問者は別タブでGoogleマップを開き直す必要があります。この一手間がそのまま離脱につながるケースは多くあります。ページ内でその場で地図を確認できると、スマホ1台でナビをかけるところまで完結するため、来店の意思決定が速くなります。

カフェは「今から行けるかどうか」を移動中に調べる方も多く、地図がすぐ表示されるかどうかが来店の可否を左右することがあります。住所テキストと地図の両方を載せておくことで、住所を見て自分でナビを設定する人にも、地図をタップしてそのままナビを起動する人にも対応できます。

SNSへのリンクが「また来てもらう」きっかけになる

ホームページはいつでも同じ内容ですが、SNSでは新メニューやイベント情報、季節のおすすめなど最新情報を発信できます。ホームページからSNSへ誘導する導線があると、一度来店してくれたお客様がフォロワーになり、次の来店機会が生まれやすくなります。

「ホームページで住所と営業時間を確認してInstagramで雰囲気を見る」という調べ方は、特に若い世代の来店前行動として定着しています。この2つをホームページ上でつなぐことが、SNSリンクを設置する主な理由です。

GoogleマップをホームページにHTMLで埋め込む4ステップ

GoogleマップのHTMLコードを取得してホームページに貼る作業は、コピーと貼り付けだけで完了します。

ステップ1：GoogleマップでカフェのページをURLで開く

パソコンのブラウザでGoogleマップ（maps.google.com）を開き、自分のお店の名前で検索します。お店のページが表示されたら、左側のパネルに店名・住所・営業時間などが出ていることを確認してください。

もしGoogleマップにお店のページが存在しない場合は、「Googleビジネスプロフィール」への登録が必要です。登録は無料で、住所・電話番号・営業時間・写真を登録できます。登録後は審査（郵便ハガキによる本人確認）が通るとGoogleマップにページが作成されます。ビジネスプロフィールを登録しておくと、地域名での検索での見つかりやすさにもつながります。地域名での検索対策については「地域名＋業種」で検索されるためにホームページでやることもあわせてご覧ください。

ステップ2：「共有」ボタンから「地図を埋め込む」を選ぶ

お店のページの左側パネルに表示されている「共有」アイコン（矢印が外向きのアイコン）をクリックすると、ウィンドウが開きます。「地図を埋め込む」というタブを選択すると、ページに挿入できるHTMLコードが表示されます。

地図のサイズはここで「小・中・大・カスタムサイズ」から選べます。スマホでも崩れずに表示されるようにするには「中」またはカスタムサイズで幅を設定することを推奨します。

ステップ3：「HTMLをコピー」を押してWordPressに貼り付ける

「HTMLをコピー」ボタンを押すと、<iframe>…</iframe> で始まるコードがクリップボードにコピーされます。

WordPressの管理画面でホームページ（またはアクセスページ）の編集画面を開き、Googleマップを表示したい場所に「カスタムHTMLブロック」を追加します。そのブロック内にコピーしたコードを貼り付けて保存すると、地図がページ上に表示されます。

注意点として、ビジュアルエディタのテキスト入力欄にHTMLコードを貼っても地図にはなりません。必ず「カスタムHTMLブロック」を使ってください。

ステップ4：スマホ実機で表示と動作を確認する

保存後はパソコンとスマホの両方で実際にページを開いて確認してください。スマホで地図が横にはみ出る場合は、iframeタグに style="width:100%;border:0;" を追記すると解消できることが多いです。また、地図をタップしてGoogleマップアプリが開き、正しいお店の場所が表示されるかも確認しておきます。

住所テキストも必ず残しておく理由

地図の埋め込みだけでなく、住所を文字でも記載しておくことが大切です。

地図が表示されない環境（古いスマホや特定のブラウザ、JavaScriptを無効にしている場合）でも、住所テキストがあれば訪問者は場所を確認できます。また、検索エンジンは画像や地図の中の情報は読み取れませんが、テキストとして書かれた住所はページの内容として認識します。地名が含まれることで、地域名での検索に引っかかりやすくなる効果もあります。

推奨する配置は「住所テキスト → Googleマップ埋め込み」の順です。住所を先に見て、地図で確認するという流れが自然です。ホームページに載せるべき基本情報についてはホームページに最低限載せるべき5つの情報もご参照ください。

SNSのリンクをホームページに設置する手順

SNSへのリンクは、プロフィールURLをコピーしてホームページ上に貼るだけで設置できます。

各SNSのプロフィールURLを確認する

各SNSのプロフィールページをパソコンのブラウザで開き、URLバーに表示されているアドレスをコピーします。

• Instagram：パソコンで instagram.com/アカウント名 を開き、URLバーからコピー
• Facebook：Facebookページを開き、URLをコピー（短縮URLが設定されている場合はその短縮URLで可）
• LINE公式アカウント：管理画面の「友だち追加ページ」URLをコピー

スマホのアプリ内からURLをコピーする場合、アプリ専用のURLが取得されることがあります。ブラウザで開いた正式なURLかどうかを確認してからホームページに貼り付けることをお勧めします。

WordPressでのリンク設置方法

WordPressでSNSリンクを設置する方法はいくつかあります。最もシンプルなのは、テキストを選択して「リンクを追加」でSNSのURLを指定する方法です。「Instagramはこちら」や「最新情報はInstagramで」などのテキストにリンクを貼ると、見た目がシンプルでも十分機能します。

ボタンとして見せたい場合は、WordPressのボタンブロックを使います。ブロックエディタで「ボタン」ブロックを追加し、URLにSNSのプロフィールページを指定してボタンのテキストを設定するだけです。

アイコンで表示したい場合は、お使いのWordPressテーマにSNSアイコン機能が含まれているか確認してください。テーマによってはフッター設定やウィジェットでSNSアイコンを簡単に追加できます。テーマにない場合は専用プラグインが必要になりますが、まずはテキストリンクやボタンで設置を済ませ、見た目の調整は後から行う方針が進めやすいです。

SNSリンクを置く場所

配置場所によってクリックされる頻度が変わります。主な選択肢を整理します。

• フッター：どのページを見ていても目に入る。アイコンを並べて設置するのが一般的。SNSリンクの基本的な置き場所
• アクセス・お問い合わせページ：来店を検討中の訪問者が見るページなので、SNSで雰囲気を事前に確認してもらう導線として有効
• トップページのCTAエリア：予約・お問い合わせボタンと並べると、行動の選択肢として自然に目に入る

複数の場所に設置しても問題ありませんが、最低でもフッターには置いておくと、どのページからでもSNSにアクセスできます。スマホで見たときにフッターが適切なサイズになっているかも確認しておきましょう。スマホ対応の基本についてはスマホで見やすいホームページにする基本もご覧ください。

複数のSNSを使い分けているときの整理方法

カフェによってはInstagramだけでなく、FacebookやLINE公式アカウントも運用しているケースがあります。すべてのリンクを同等に並べると見づらくなるため、整理の方針を決めておくと便利です。

メインのSNSを1本に絞ってトップに出す

訪問者に「どれを押せばいいか」で迷わせないために、最も更新頻度が高く情報が充実しているSNSをメインとして前面に出します。カフェの場合は写真でお店の雰囲気を伝えやすいInstagramをメインにするケースが多いです。

更新が止まっているSNSのリンクを貼り続けると、訪問者が投稿のないアカウントに飛んでしまい、かえってマイナスの印象を与えることがあります。現在運用していないSNSのリンクは外しておくことをお勧めします。

リンクまとめページを使う選択肢

Linktree（無料プランあり）などのリンクまとめサービスを使うと、複数のSNSや予約サイトへのリンクを1つのURLに集約できます。ホームページのフッターやCTAエリアにその1つのURLをボタンとして設置すると、リンクを1本に絞りつつ複数の行き先を提示できます。InstagramとFacebookとLINEを均等に使い分けているカフェには、検討の余地があります。

設置後に確認する3つのポイント

GoogleマップとSNSリンクを設置した後は、以下を実機で確認してください。設置後の確認を省くと、お客様に不便をかけることになります。

• スマホでGoogleマップが正常に表示されるか：PCでは正常に見えてもスマホで崩れることがある。iPhoneとAndroidの両方で確認する
• SNSリンクを押すとSNSのページが開くか：URLが間違っていたりページが存在しないとエラー画面になる。実際に押して確認する
• 地図の表示が自分のお店になっているか：同名の別店舗や近くの別のお店が表示されていないか、お店の名前と住所を目視で確認する

よくある質問