【Safari】iPhone で 電話番号にリンクが自動挿入される問題

iPhone の Safari で電話番号にリンクが自動挿入されてしまう問題

ホームページ制作時、電話番号をページのフッターに常に配置してスマートフォンで閲覧した際にタップで電話がかけられるデザインを作成しました。問題なく表示がされるかどうか確認する際は PC で開発者ツールを使用していますが、スマートフォンモードに切り替えて表示してもその時は問題なく表示されていました。しかし、実機のスマートフォンで確認すると表示がおかしくなりました。実機は iPhone で、ブラウザは Safari を使用していました。

実際に書いたコードが以下だとすると

<li>
  <a href="tel:090-0000-1111">
    <img src="tel.png" width="50" height="50" alt="電話番号">
  </a>090-0000-1111
</li>

表示がおかしくなったときに開発者ツールで確認したコードが以下です。

<li>
  <a href="tel:090-0000-1111">
    <img src="tel.png" width="50" height="50" alt="電話番号">
  </a><a>090-0000-1111</a>
</li>

画像にリンクを張り、電話番号自体にはリンクを張らないようにしていましたが、ブラウザが気を利かせて電話番号に a タグを自動挿入してくれるようです。
Chrome でも確認しましたが問題なく表示されていました。

a タグにスタイルを適用していたのでスタイルが崩れていたために気づきましたが、そうでない場合は意外と気づかずにそのまま放置されている可能性もあるかもしれません。

iPhone の Safari で自動挿入された電話番号のリンクを無効にする対策

a タグを自動挿入させないために今回追加したのは以下のタグです。

<meta name="format-detection" content="telephone=no">

ヘッダに追加いただければ OK です。これで電話番号が自動挿入されることがなくなります。