零弐壱蜂

[HTML] meta format-detectionに指定するのはtelephoneだけで良い

5 min read

TL;DR

<head>内に定義するmeta name="format-detection"にはaddressやemailなど指定ができるが、以下のようにtelephoneだけで良い。

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

主にiOSデバイス向けに電話番号がリンクになるのを抑制するために使用する。

meta format-detectionとは

meta name="format-detection"とは、HTML内で電話番号や日付、住所などの自動リンク化を制御するために使用するメタタグである。主にモバイルブラウザで電話番号などのテキストが自動的にリンク化されるのを制御する際によく使われる。

もともと、このタグはAppleが独自に定義したものであり、ブラウザによってサポート状況や仕様はまちまちである。

format-detection

Enables or disables automatic detection of possible phone numbers in a webpage in Safari on iOS.

Syntax

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

Discussion

By default, Safari on iOS detects any string formatted like a phone number and makes it a link that calls the number. Specifying telephone=no disables this feature.

Support Level

Apple extension.

引用: Supported Meta Tags | Apple Developer Documentation

構文

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

利用可能な指定

このメタタグのcontent属性には、telephone以外にも以下のような指定ができる。Androidでは電話番号以外のテキストも自動リンクになるケースがあるようだった。

  • telephone=no: 電話番号の自動リンク化を無効にする
  • date=no: 日付の自動リンク化を無効にする
  • address=no: 住所の自動リンク化を無効にする
  • email=no: メールアドレスの自動リンク化を無効にする

こちらの指定はmetaタグ自体を複数列挙も可能だが、これらをカンマで区切って複数指定も可能である。

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

meta format-detectionの動作確認

近年、電話番号以外でリンクになっている様子や実際のコードでtelephone以外の指定を見ることがないため、現状のサポート状況を確認してみた。

確認環境

  • iOS 12.0 Safari
  • iOS 14.8.1 Safari
  • iOS 15.8.3 Safari
  • iOS 17.1 Safari
  • Android 10 Chrome
  • Android 12 Chrome
  • Android 14 Chrome

自動リンクのパターン確認

そもそも自動リンクになる状態はどういうものかを確認するために、meta name="format-detection"を指定しない状態と指定をyes（meta name="format-detection" content="xxx=yes"）にした場合の挙動を確認した。

一般的に利用されているtelephone以外の指定に基づく記述で確認したところ、以下のような結果になった。

　telephonedateaddressemail
iOS⭕❌❌❌
Android❌❌❌❌
モバイルブラウザの自動リンクの状態を確認

合計7環境で確認をしたが、上記の結果となった。少し前のOSでも確認をしているため、直近の状況であれば確実にtelephoneだけで問題ないと言える（日付や住所、メールアドレスの自動リンク化はサポートされていない）。

 note

本稿での確認結果は2024年12月現在の主要ブラウザ（iOS Safari、Android Chrome）の動作に基づいている。将来的にOSやブラウザのアップデートにより仕様が変更される可能性も考えられる。なお、Android Chrome環境でtelephone指定が機能しない理由については、公式ドキュメントやフォーラムなどにも記載が見当たらず、意図的な仕様である可能性がある。

おわり

meta name="format-detection"は、主にiOSデバイス向けに電話番号がリンクになるのを抑制するために使用する。そもそもtelephone以外の指定はサポートされていないようであるため、指定をするのであればtelephoneだけで問題ない。

meta name="format-detection"で自動リンクを防止したうえで以下のようにアンカータグのhref属性にスキームを利用してリンクを設定することが望ましい。

  • 電話番号: <a href="tel:000-0000-0000">000-0000-0000</a>
  • メールアドレス: <a href="mailto:example@example.com">example@example.com</a>
ページトップへ