Skip to main content

<meta name="format-detection" content="telephone=no"> Missing on Pages with Numeric Strings

Issue No: 111

Category: Html Head Tags

Issue type: Issue

Priority: Critical

Description

iOS Safari and some Android browsers automatically convert numeric strings that resemble phone numbers (e.g. order IDs, prices, product codes, zip codes) into clickable telephone links by wrapping them in <a href="tel:...">. This behaviour — called auto-detection — can corrupt the visual layout of product, pricing, and checkout pages. The <meta name="format-detection" content="telephone=no"> tag disables this behaviour globally for the page. Missing it on pages with numeric strings risks layout breakage for mobile users.

How do we capture it

  1. Detect the page type based on URL patterns and on-page signals:

    • Ecommerce signals: /product/, /item/, /checkout/, /cart/, /pricing/, /shop/
    • Numeric density signals: >5 numeric strings that are 6–15 digits long and not wrapped in <a href="tel:"> (potential false-positive candidates).
    • Contact signals: /contact/, /about/, /support/, page contains <a href="tel:..."> links.
  2. Check for the meta tag in the page <head>:

    • Look for <meta name="format-detection">.
    • Extract the content attribute value.
    • Normalise to lowercase; check if telephone=no is present in the value.
  3. Validate the content attribute format:

    • Valid values: telephone=no, address=no, email=no and combinations thereof.
    • Flag any value that does not follow the key=value pattern or contains unrecognised keys.
  4. Detect false-positive numeric strings:

    • Extract page text content (strip HTML).
    • Use a regex pattern to identify numeric strings of 6–15 digits that are not already inside <a href="tel:..."> tags.
    • Record has_numeric_false_positives = true if ≥3 such strings are found.
  5. Check for explicit tel: links on contact pages:

    • On pages classified as contact pages, check whether <a href="tel:"> links exist.
    • If format detection is disabled on a contact page that has no explicit tel: links, flag detection_disabled_on_contact_page = true.

What to store

FieldTypeComment
site_idintegerFK → sites(id)
page_idintegerFK → pages(id)
page_typetextClassified page type (e.g. product, pricing, checkout, contact)
meta_presentbooleanWhether <meta name="format-detection"> exists in <head>
raw_content_valuetextRaw content attribute value; NULL if tag absent
telephone_detection_disabledbooleanWhether telephone=no is set in the meta tag
is_valid_formatbooleanWhether the content attribute follows valid key=value syntax
has_numeric_false_positivesbooleanWhether ≥3 unlinked 6-15 digit numeric strings were found in page text
numeric_string_countintegerNumber of candidate false-positive numeric strings detected
has_explicit_tel_linksbooleanWhether the page contains <a href="tel:"> links
is_contact_pagebooleanWhether the page is classified as a contact/support page
detection_disabled_on_contact_pagebooleanWhether detection is disabled on a contact page with no tel: links
checked_attimestampWhen this check was last performed

Condition for trigger

The following rules evaluate stored fields and produce diagnostics in the audit report.

  • Trigger Rule 1: Missing Tag on Page with Numeric False Positives (Ecommerce)

    • Target Field: meta_present, has_numeric_false_positives, page_type
    • Evaluation Logic: meta_present = false AND has_numeric_false_positives = true AND page_type IN ('product','pricing','checkout','cart')
    • Severity: CRITICAL
    • Diagnostic Message: "[numeric_string_count] unlinked numeric strings were detected on this [page_type] page that iOS Safari may auto-detect as phone numbers, corrupting the layout. Add <meta name=\"format-detection\" content=\"telephone=no\"> to the <head> to disable auto-detection."
  • Trigger Rule 2: Missing Tag on Page with Numeric False Positives (General)

    • Target Field: meta_present, has_numeric_false_positives
    • Evaluation Logic: meta_present = false AND has_numeric_false_positives = true AND page_type NOT IN ('product','pricing','checkout','cart','contact')
    • Severity: WARNING
    • Diagnostic Message: "[numeric_string_count] unlinked numeric strings were detected on this page that iOS Safari may auto-detect as phone numbers. Consider adding <meta name=\"format-detection\" content=\"telephone=no\"> if the numbers are not intended as phone links."
  • Trigger Rule 3: Invalid content Attribute Format

    • Target Field: is_valid_format
    • Evaluation Logic: meta_present = true AND is_valid_format = false
    • Severity: WARNING
    • Diagnostic Message: "The <meta name=\"format-detection\"> tag has an invalid content value ([raw_content_value]). The correct format is telephone=no (with optional additional comma-separated pairs such as telephone=no, address=no)."
  • Trigger Rule 4: Detection Disabled on Contact Page Without tel: Links

    • Target Field: detection_disabled_on_contact_page
    • Evaluation Logic: detection_disabled_on_contact_page = true AND has_explicit_tel_links = false
    • Severity: WARNING
    • Diagnostic Message: "Telephone auto-detection is disabled on this contact page, but no explicit <a href=\"tel:\"> links were found. If the page displays a phone number for users to call, mark it up as <a href=\"tel:+1234567890\"> to ensure it remains tappable on mobile, then disable auto-detection for non-phone numbers."
  • Trigger Rule 5: Sitewide Tag Present but No tel: Markup

    • Target Field: telephone_detection_disabled, has_explicit_tel_links, is_contact_page
    • Evaluation Logic: telephone_detection_disabled = true AND is_contact_page = true AND has_explicit_tel_links = false
    • Severity: WARNING
    • Diagnostic Message: "This contact page has telephone=no format detection disabled but contains no <a href=\"tel:\"> links. Any phone numbers displayed on this page are not tappable. Use explicit tel: links for phone numbers you want mobile users to tap, then disable auto-detection for numeric strings that are not phone numbers."

Sources

Long description

iOS Safari (and older Android browsers) include a feature called "format detection" that scans page text for strings that look like phone numbers and automatically wraps them in <a href="tel:..."> links. This behaviour is intended to improve usability on mobile: if a page displays a phone number, users should be able to tap it to call. However, the auto-detection algorithm is not precise and false-positives are extremely common.

What iOS treats as a phone number

The detection heuristic looks for numeric strings of roughly 7–15 digits, optionally with spaces, dashes, dots, or parentheses. Examples of strings that are commonly mis-detected:

  • Order numbers: ORD-20240315-001234 (the trailing digits trigger detection)
  • Product codes / SKUs: 1234-5678-90
  • Price strings in certain locales: 1.299,00
  • Zip/postal codes combined with suffixes: 90210-4567
  • Date strings in dense formats: 20241231
  • Discount codes: SAVE20241231

When these strings are auto-detected, Safari wraps them in a blue underlined <a href="tel:..."> link. On product pages or checkout flows this can:

  • Break table layouts (link takes up extra space).
  • Trigger unexpected call dialogs when users tap numbers they intended to copy.
  • Cause visual inconsistency (blue text in unexpected places).

Best practice pattern

The correct approach is:

  1. Add <meta name="format-detection" content="telephone=no"> globally (or per-page) to disable auto-detection.
  2. Explicitly mark up genuine phone numbers with <a href="tel:+15551234567">555-123-4567</a>.

This gives the site complete control: real phone numbers remain tappable via explicit markup; non-phone numbers are not touched by the browser.

Scope of the tag

The tag affects only the page it appears on. It does not affect pages that do not include it. For most sites, the tag should be in the global <head> template so it applies to all pages. Contact and support pages that explicitly use tel: links do not need an exception — the explicit <a href="tel:"> links still work even when auto-detection is disabled.

Common failure patterns:

  • Tag missing from global <head> template; product and checkout pages display broken layouts on iOS.
  • Tag present but with incorrect content value (telephone="no" instead of telephone=no — quotes around the value, not around the pair).
  • Contact page disables detection but never adds explicit tel: links, making the phone number untappable.
  • Sitewide meta tag added but new page templates added later did not inherit the global <head>.
  • Developers only test on desktop browsers (Chrome/Firefox) and never see the iOS Safari layout corruption.

How to Fix

  1. Add the tag to the global <head> template so it applies to all pages:

    <meta name="format-detection" content="telephone=no">
  2. For contact, support, and store locator pages that display phone numbers:

    • Do NOT remove the format-detection meta tag.
    • Instead, wrap every genuine phone number in an explicit <a href="tel:"> link:
      <a href="tel:+15551234567">+1 (555) 123-4567</a>
    • The explicit tel: link takes precedence over the disabled auto-detection.
  3. Validate on a real iOS device (or Safari browser) after adding the tag:

    • Open the page on iOS Safari.
    • Confirm that order IDs, prices, and product codes are no longer highlighted as phone links.
    • Confirm that genuine phone numbers (wrapped in tel: links) still trigger the call dialog on tap.
  4. Audit templates to ensure the tag is included in all page type templates and is not conditional on page-type logic that might exclude certain page types.

  5. Fix incorrect content values: the correct format is content="telephone=no", NOT content="telephone='no'" or content="telephone: no". Multiple directives are comma-separated: content="telephone=no, address=no, email=no".


Additional technical notes

Browser support matrix

BrowserAuto-detection enabled by defaultRespects format-detection=no
iOS SafariYesYes
Chrome for AndroidPartial (less aggressive)Mostly
Firefox for AndroidNoN/A
Chrome DesktopNoN/A
Safari macOSNoN/A

The issue is most impactful on iOS Safari, which is the primary mobile browser for iPhone users. Since iPhone market share in many regions exceeds 50% of mobile traffic, the effect is widely visible.

telephone=no does not break tel: link markup

A common misconception is that telephone=no prevents all phone-related functionality on the page. This is not true. The meta tag only disables the browser's automatic detection and conversion of unlinked text into phone links. Explicitly coded <a href="tel:+15551234567"> links are not affected and continue to work normally as tappable phone links. The tag should be used alongside — not instead of — explicit tel: link markup.

Ecommerce-specific false-positive patterns

Ecommerce sites are disproportionately affected because they concentrate the types of numeric strings that trigger auto-detection:

  • Product SKUs: SKU-20241231-001
  • Order confirmation numbers: ORD-987654321
  • Tracking numbers: 1Z999AA10123456784
  • Prices with separators: 1,299.00
  • Coupon codes with digits: SAVE25OFF2024
  • Zip code + extension: 90210-4567
  • ISBN codes: 978-3-16-148410-0

A product catalog page may contain dozens of these patterns per page. Without format-detection=no, the iOS Safari rendering can turn large sections of the product listing into highlighted blue phone links.

CSS workaround (limited use)

Some teams use CSS to work around format-detection without the meta tag:

a[href^="tel"] { pointer-events: none; }

This prevents auto-detected phone links from being tappable but does not prevent them from appearing as blue underlined text — the visual corruption remains. The meta tag approach is the correct fix.