iPhoneやAndroidでWebサイトを見ていると、意図しない数字が勝手に青文字のリンクになって困ったことはありませんか？
これはブラウザの「電話番号自動検出」という便利な機能なのですが、Web制作においては「デザインが崩れる」「思わぬところがリンクされる」といった悩みになることも。
今回は、metaタグ1行でこの自動リンクを無効化する方法と、逆に「ここだけは電話をかけさせたい」という時の正しい書き方を詳しく解説します！
【コピペOK】電話番号の自動リンクを無効化するmetaタグ
最も簡単で確実な方法は、HTMLの <head> 内に以下のコードを記述することです。
<meta name="format-detection" content="telephone=no">このタグの意味とは？
この1行を入れるだけで、ブラウザが「これは電話番号かな？」と推測して勝手にリンクを貼る動作をサイト全体で停止させることができます。
特にiOSのSafariではデフォルトでこの機能が強めに働いているため、このコードを設定しておくことがおすすめです。
一部だけ電話をかけられるようにする方法
サイト全体の自動リンクを無効化すると、当然ながら「本当に電話をかけてほしい番号」もリンクにならなくなります。
その場合は、以下のように <a> タグを使って個別にリンクを設定しましょう。
<a href="tel:00012345678">000-1234-5678</a>まとめ
スマホサイトのコーディングにおいて、意図しない自動リンクを防ぐことは「ユーザーにとっての読みやすさ」と「デザインの美しさ」を両立させるために欠かせません。
・<head> 内に無効化タグを入れる
・必要な箇所だけ a href="tel:..." でリンクを貼る
このセットを徹底するだけで、スマホサイトでデザイン通りの表示が実現できます。ぜひ次回の制作から取り入れてみてくださいね！
