How to control what Gmail auto-linking recognizes as an address or phone number?

Question

I'm having inconsistent/buggy issues when delivering transactional emails (in this example, purchase confirmation email) to clients.

Gmail not only auto-links the address (the clients' dynamic, local store-address in this case), but also maps the first few digits of the phone number below it as part of the address. This ends up throwing off the subsequent map that it links to since the area code is being appended to the address data that Google is sending to the map-service.

The auto-linking doesn't always behave in the manner above though. In some cases, it leaves the phone number (formatted as: (xxx) xxx-xxxx) unmolested. In others, it only recognizes part of a given address to link. Obviously this leads to poor customer experience and needs to be remedied, but I'm tasked with solving this without resorted to disabling the feature, as our marketing dept wants to preserve the function as it's intended (rightly so for good usability).

Any ideas on why this may be occurring codewise or possibly how to designate an address or phone number in the markup manually so gmail knows what specifically needs to be auto-linked as what?

This is the table BEFORE Gmail:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
    <tr>
      <td align="left" class="mob_font1" style="color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none;" valign="top">Jessica Jones</td>
    </tr>
    <tr>
      <td align="left" class="mob_font1" style="color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none;" valign="top">123 Main St</td>
    </tr>
    <tr>
      <td align="left" class="mob_font1" style="color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none;" valign="top">Nixa, MO 65714</td>
    </tr>
    <tr>
      <td align="left" class="mob_font1" style="color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none; pointer-events: none;" valign="top">(417) 222-2222</td>
    </tr>
  </tbody>
</table>

This is the offending HTML table, in a live-test, AFTER gmail has it's way with it:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
  <tbody>
    <tr>
      <td class="m_2777276863125780910mob_font1" style="color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign="top" align="left">Jessica Jones</td>
    </tr>
    <tr>
      <td class="m_2777276863125780910mob_font1" style="color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign="top" align="left"><a href="https://maps.google.com/?q=123+Main+St+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+Nixa,+MO+65714+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+(417&amp;entry=gmail&amp;source=g">123 Main St</a></td>
    </tr>
    <tr>
      <td class="m_2777276863125780910mob_font1" style="color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign="top" align="left"><a href="https://maps.google.com/?q=123+Main+St+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+Nixa,+MO+65714+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+(417&amp;entry=gmail&amp;source=g">Nixa, MO 65714</a></td>
    </tr>
    <tr>
      <td class="m_2777276863125780910mob_font1" style="color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign="top" align="left"><a href="https://maps.google.com/?q=123+Main+St+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+Nixa,+MO+65714+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09+(417&amp;entry=gmail&amp;source=g">(417</a>) 222-2222</td>
    </tr>
  </tbody>
</table>

As you can see, Google in concatenating all three lines to create their URL for some reason. I just can't find documentation that would lead to better understanding of what they may be using to identify an address or phone number so it can be controlled or avoided. Their public September 2017 release notes were unfortunately not geared to devs.

And this is how it is displayed in the Gmail/Firefox (the most updated version):

In the Inbox

There is an `address` element, and you can use `` for phone numbers. — yaakov, May 04 '18 at 20:10
I think we would need an example of the email being sent. This is most certainly tied to the exact sequence of characters you are sending to the recipient. — Kallmanation, May 04 '18 at 20:13
@YaakovAinspan, do you know if Gmail recognizes those for the purposes of auto-linking? — EmailDharma, May 04 '18 at 20:59
Possible duplicate of [Email signature](https://stackoverflow.com/questions/48784150/email-signature) — Syfer, May 06 '18 at 02:12

score 1 · Answer 1 · answered May 07 '18 at 12:36

1

Hey congrats on your first question on Stack Overflow !

As @gwally mentioned, placing this in your <head> should solve this issue in some email clients (mainly iOS Mail).

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

After that, we can add a class like this in the <head><style> area:

*[x-apple-data-detectors],  /* iOS */
.unstyle-auto-detected-links *,
.aBn {
    border-bottom: 0 !important;
    cursor: default !important;
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

Placing a class in a parent <td> is a little too aggressive, as it tries to style too much and can end up messing with all the text (not just the auto-link-detected text). Wrapping anything that might include a phone number, mailing address, or date in a <span class="unstyle-auto-detected-links"> scales well, inherits correctly, and can be used anywhere in an email.

<td>
    <span class="unstyle-auto-detected-links">123 Fake Street, SpringField, OR, 97477 US<br>(123) 456-7890</span>
</td>

Important to note that we can't remove the link, we can only style the link text so it does not appear as a hyperlink (it will still be click-able / tap-able).

I've been using this technique lately on our emails at Stack Overflow and (so far) it's been working well. Cheers!

answered May 07 '18 at 12:36

Ted Goas

7,051
1
35
42

Hey, thanks @Ted Goas! It's been a while since TED Conference in Boston...was it 2015 or 2016? Anyway, my issue isn't with the styling of the auto-linking or trying to turn it off (our marketing dept would like to keep it on). I'm trying to control what Gmail identifies as an address or phone number, since it will inexplicably misidentify some data, which causes issues with the subsequent map-link for instance. If you look at the last on my second snippet, you can see Gmail adding part of the area-code of the client phone number into the address data it returns for the map feature. – EmailDharma May 07 '18 at 15:20
@EmailDharma oh I don't believe there is a way to influence exactly _what_ an email client detects as a link, so I was going for the "avoid" angle to mask it's, um.. error. `(417) 222-2222` jeez Google. – Ted Goas May 07 '18 at 15:41
It was 2015, when you were a speaker there. I was the bearded, long-hair that happily joined you guys (you, Fabio, Elliot, Robbins, and the rest of the crew) down at the Whiskey Priest one evening. Good times. – EmailDharma May 07 '18 at 18:53
@EmailDharma yes I remember! [There we are in the back!](http://www.tedgoas.com/content/blog/17-litmus-email-design-conference-2015/after.jpg) :) – Ted Goas May 07 '18 at 19:06
Niice, that's it! A person would be hard-pressed to find a more skilled (and fun) group of email geeks! – EmailDharma May 07 '18 at 19:24

score 0 · Answer 2 · answered May 05 '18 at 00:53

Place these two meta tags in your <head>:

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

Place this in your style sheet:

    <style>
    *[x-apple-data-detectors], .x-gmail-data-detectors, .x-gmail-data-detectors *, .aBn {
        border-bottom: 0 !important;
        cursor: default !important;
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }
    </style>

In your body where your client data is located add a class and add hrefs to the telephone number and the email address:

<p class="x-gmail-data-detectors">Herman Munster<br />
  1313 Mockingbird Lane<br />
  Hollywood, CA 90210<br />
  <a href="tel:+01-(323) 000-0000">(323) 000-0000<br />
  <a href="mailto:herman@munster.com" target="_blank">herman@munster.com
</p>

What this should do is eliminate the blue underlining in your email, but still allow you so if someone clicks on the phone number or the email address, it will still open the default email client or start a phone application and let you do a phone call.

These are two resources that should give you more information:

Good luck.

Thanks for the effort in your answer @gwally, but my issue isn't removing the auto-linking, it's in controlling it to keep it from including additional, unrelated content (beyond what it should for an address, for instance). — EmailDharma, May 07 '18 at 15:13
@EmailDharma As Ted Goas mentions, we can't stop Gmail or any email client from doing what it wants to our emails when they are received. What we can do is help that information be identified and styled. In your example, Gmail is combining the address and phone number. I posted techniques that will help Gmail understand what is an address, phone number or email address. Good luck. — gwally, May 07 '18 at 19:57

How to control what Gmail auto-linking recognizes as an address or phone number?

2 Answers2