スマホで電話番号などに自動的にリンクが付くのを防ぐ方法

目次

自動的に設定されるリンクを無効化する

スマホ対応のレスポンシブサイトを制作しているのですが、スマホのブラウザによっては勝手にリンクが設定されてしまい、どうにかならないかと調べた方法をメモ。

私はiPhoneをメインに使用していますが、iOS対応ブラウザとしてSafariはもちろん、Chrome、Edge、Bravaが入っていますが、それぞれ違った挙動でリンクが貼られてしまい困りました。

メタタグを使用する方法

<head>~</head>の間に以下のタグを埋め込みます。

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

 

これを設定すると電話番号にリンクが付くのを防ぐことができるようです。

電話番番号以外に、住所、メールアドレス、日付や時間にリンクが付くことがあります。その場合は以下のように複数を指定すればいいみたいです。iPhoneのSafariはこれでOKでしたが、Bravaはダメでした。

<meta name="format-detection" content="telephone=no,address=no,date=no,email=no">

 

または

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

 

これを設定したからといって、既存の<a href="tel:0120123456">0120-123-456</a>などが無効になることはありません。

Edgeブラウザの場合

ブラウザがEdgeの場合は電話番号などが記載されたタグにx-ms-format-detection="none"を設定すれば良いみたいです。

<p x-ms-format-detection="none">0120-123-456</p>

ただし、この属性はInternet ExplorerとMicrosoft Edge固有の属性です。それ以外のブラウザでは利用できませんので注意しましょう

それでもダメな場合

リンク無しのリンクをダミーで貼る

上記のいずれもダメな場合は空のリンクを貼ってポインターを無効にします。CSSのpointer-events: none;を使ってポインターイベントを無効化することでリンクがクリックされるのを回避できます。多分、これが一番最強の方法で、どのブラウザにも対応できるかと思われます。Safari,Chrome,Edge,Bravaのすべてで自動的にリンクを貼られるのを回避できました。

<a class="nolink">0120-123-456</a>
.nolink {
    pointer-events: none;
text-decoration-line: none;
color: inherit !important;
}

興味深い方法

以下のサイトに記載された方法。

試していませんが、Appleの文字があるのでSafari対応だと思われますが、CSSで解決できるっぽいです。

<style type="text/css">
  a[x-apple-data-detectors] {
      color: inherit !important;
      text-decoration: none !important;
      font-size: inherit !important;
      font-family: inherit !important;
      font-weight: inherit !important;
      line-height: inherit !important;
  }
</style>

 

参考サイト

電話番号に自動で挿入されるリンクを無効にする2つの方法(edgeにも対応します) | webクリエイターの部屋

電話番号に自動で挿入されるリンクを無効にする2つの方法(edgeにも対応します) | webクリエイターの部屋

https://arts-factory.net/notel/

【html】電話番号が自動リンクにならないように指定しよう! | shu blog

【html】電話番号が自動リンクにならないように指定しよう! | shu blog

https://shu-naka-blog.com/html/meta-telephone/

スマホで電話番号やメールアドレスにリンクが自動で付くのを防ぐ - style01

スマホで電話番号やメールアドレスにリンクが自動で付くのを防ぐ - style01

https://style01.net/951/

format-detection【metaタグ】とは|「分かりそう」で「分からない」でも「分かった」気になれるit用語辞典

format-detection【metaタグ】とは|「分かりそう」で「分からない」でも「分かった」気になれるit用語辞典

https://wa3.i-3-i.info/word11829.html

format-detectionのtelephone,email,address=noの使い方 | iwb.jp

format-detectionのtelephone,email,address=noの使い方 | iwb.jp

https://iwb.jp/format-detection-telephone-email-address-no/

<meta name=&quot;format-detection&quot; content=&quot;address=no;email=no&quot; /> · github

<meta name=&quot;format-detection&quot; content=&quot;address=no;email=no&quot; /> · github

https://gist.github.com/weivall/2595515

htmlメールのmetaタグ format-detectionについて|かんばらあい|note

htmlメールのmetaタグ format-detectionについて|かんばらあい|note

https://note.com/kanbara3/n/nab15ec78010a

前へ

動画や映像が背景に使われているサイトの参考ページ

次へ

【JS】VIDEOタグで指定する動画をPCとスマホ用に切り替えるJavascript