Webサイトを制作していると、iPhoneでページを確認したときに、電話番号や数字の並びが勝手にリンクになってしまうことがあります。
例えば、Webサイトに次のような番号を記載したとします。
電話番号：03-1234-5678パソコンでは普通のテキストとして表示されるのに、iPhoneのSafariで見ると、電話番号が青文字になったり、タップできるリンクになったりすることがあります。
電話番号として掲載しているなら便利な機能ですが、電話番号ではない数字や、デザイン上リンクにしたくない文字列までリンクになると困ります。
今回は、iPhoneで電話番号が自動的にリンクになる原因と、HTMLやWordPressで防ぐ方法を紹介します。
1. なぜiPhoneでは電話番号が勝手にリンクになる？
iPhoneのSafariには、Webページ内の文字列から電話番号らしい数字を検出し、電話をかけるためのリンクとして扱う機能があります。
これは電話番号の自動検出機能です。
HTMLで電話番号をリンクとして記述していなくても、Safariが電話番号と判断すると、自動的にタップできる状態になることがあります。
例えば、次のようなHTMLです。
<p>お問い合わせ：03-1234-5678</p>このコードには電話番号へのリンクを設定していません。
しかし、iPhoneのSafariでは電話番号として認識され、リンクのように表示される場合があります。
また、電話番号ではない数字でも、電話番号に似た形式だと自動検出されることがあります。
2. 方法① metaタグで電話番号の自動リンクを無効にする
Webサイト全体で電話番号の自動リンクを防ぎたい場合は、metaタグを設定する方法があります。
HTMLのhead内に、次のコードを追加します。
<meta name="format-detection" content="telephone=no">この設定によって、iPhoneのSafariで電話番号が自動的にリンクとして検出されるのを抑制できます。
Appleの公式ドキュメントでも、このmetaタグを使ってSafariの電話番号自動検出を無効にする方法が紹介されています。
WordPressで設定する場合
WordPressの場合は、使用しているテーマのhead内に設定を追加します。
例えば、テーマのheader.phpにあるheadタグ内へ追加する方法があります。
ただし、テーマを直接編集すると、テーマ更新時に変更が失われる可能性があります。
そのため、子テーマを利用するか、テーマ側に用意されているheadタグへのコード追加機能を利用するのがおすすめです。
子テーマのfunctions.phpに追加する場合は、次のようにwp_headアクションで出力できます。
add_action( 'wp_head', function () {
echo '<meta name="format-detection" content="telephone=no">' . "\n";
}, 1 );また、すでに同じmetaタグが出力されていないか確認してから追加しましょう。
注意点： この設定は電話番号の自動検出を抑制するもので、明示的にtel:を指定したリンクまで無効にするものではありません。
3. 方法② 電話番号をリンクにしたい場合はtelを使う
電話番号をすべてリンクにしたくない一方で、問い合わせ先の電話番号だけはタップして発信できるようにしたい場合もあります。
その場合は、自動検出を無効にしたうえで、必要な電話番号だけ明示的にリンクを設定します。
<a href="tel:0312345678">03-1234-5678</a>このコードでは、表示する電話番号と、発信に使用する電話番号を分けて指定できます。
例えば、次のような使い分けが可能です。
<p>電話番号：03-1234-5678</p>
<p>
お問い合わせ：
<a href="tel:0312345678">03-1234-5678</a>
</p>上の例では、最初の電話番号は通常のテキストとして記述し、2つ目だけを電話リンクにしています。
なお、tel:リンクをタップすると、端末の電話機能が起動します。実際に発信する前には、端末側で確認が求められる場合があります。
4. 方法③ 特定の数字だけリンクにしたくない場合
Webサイト全体ではなく、特定の数字だけ自動リンクを防ぎたい場合もあると思います。
例えば、電話番号に見える数字列が、製品番号や管理番号、年号などとして掲載されているケースです。
まずは方法①のmetaタグで自動検出を無効にし、必要な電話番号だけtel:リンクにする方法を検討してください。
ただし、特定の要素だけを対象に自動検出を無効にする標準的なHTML属性はありません。
数字をspanなどの要素で分割すると、自動検出されにくくなる場合はありますが、ブラウザやOSの挙動に依存するため、確実な方法としてはおすすめできません。
サイト全体で無効にできない事情がある場合は、iPhoneのSafariで実際に表示を確認しながら、対象箇所に応じた対応を検討しましょう。
5. 設定後はiPhoneのSafariで確認する
コードを追加したら、実際のiPhoneで表示を確認します。
確認するポイントは次のとおりです。
- 電話番号が意図せずリンクになっていないか
- 電話番号以外の数字がリンクになっていないか
- 発信させたい電話番号はタップできるか
- パソコンやAndroidなど、ほかの環境で表示に問題がないか
WordPressの場合は、キャッシュや最適化プラグインによって古いHTMLが表示される場合もあるため、必要に応じてキャッシュを削除して確認しましょう。
まとめ
iPhoneで電話番号が勝手にリンクになるのは、Safariの電話番号自動検出機能が原因であることがあります。
対処方法を整理すると、次のとおりです。
- サイト全体で自動リンクを防ぎたい：
meta name="format-detection"を設定する - 特定の電話番号だけ発信できるようにしたい：
href="tel:..."を使う - WordPressで設定したい： テーマの
head内などに設定を追加し、更新時の影響にも注意する
Webサイトの電話番号を意図したとおりに表示したい場合は、電話番号の自動検出を無効にし、必要な箇所だけ明示的にリンクを設定する方法が便利です。