スマートフォンサイトで電話番号やメールの自動リンクを解除したい

iPhoneやAndroidなどスマートフォンサイトでは、電話番号やメールアドレスらしき文字列があった場合に、自動でリンクが設定されます。
リンクをタッチするだけで、電話をかけれたりメールを送ることができるので、一見して親切な機能のように思われます。

しかし、あくまでブラウザが自動で検出しているので、その精度は完全ではありません。
長いメールアドレスがレイアウトの関係で折りかえってる場合や、電話番号の間にハイフンやスペースがある場合など、ブラウザがリンクの範囲を認識できずに、誤った番号への通知リンクとなる危険性があります。
例えば「aaaaa.bbbbb.ccccc@abc.jp」をクリックすると「ccccc@abc.jp」があて先にセットされるなど、実際起こるとなると恐ろしい事ですね。

自動リンクを無効にする

このような問題を回避するために、自動リンクを無効にする方法があります。
電話番号の自動リンクを無効にするためには、ヘッダに以下のメタタグを追加します。

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

メールアドレスの自動リンクを無効にする場合は以下のようにします。

<meta name="format-detection" content="email=no" />

この設定は一般的なiPhoneやAndroid端末で利用できます。

リンクはピンポイントで設定する

自動リンクは禁止したうえで、その中でもリンクを設定したい箇所には、以下のように必要な箇所のみ、ピンポイントで設定することができます。

<a href="tel:aaaaa.bbbbb.ccccc@abc.jp">aaaaa.bbbbb.ccccc@abc.jp</a>

<a href="tel:0123456789">01-2345-6789</a>