CODEWITHSUNDEEP
htmlgmailhtml-email
InvalidSyntax
InvalidSyntax

Reputation: 9505

Prevent Gmail adding links to Addresses?

I have created a HTML email that contains some address information, in my testing I have noticed in Gmail.com the email automatically creates a link to the address leading to Google Maps.

Is there a way I can prevent this using mark up somehow?

Upvotes: 8

Views: 6057

Answers (2)

gwally
gwally

Reputation: 3547

I have an issue where gmail and other browsers like IOS want to take an email address, street address or telephone number and underline it in blue, which does not meet my brand guidelines or work with the overall design of the email. I understand your specifically asking about addresses, I think this might help with similar problems as well.

I take several steps to stop data detectors from improving my email.

In the header, I add this:

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

In the style sheet I add some specific code directed at data detectors:

*[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;
}

Finally, In the address itself, I add non-printing characters like &zwnj;. The characters don't show up in the final product, but they help dissuade Outlook or Gmail or IOS from thinking it's content it needs to underline. Something like this:

1313&zwnj; Mockingbird Lane
Mockingbird Heights, CA &zwnj;91608

Then again, working with each data detector and styling their output to match the email isn't a bad thing either. It might take longer, but then any dates you mention will link to a calendar, phone numbers would work, addresses would show on maps.

Good luck.

Upvotes: 2

InvalidSyntax
InvalidSyntax

Reputation: 9505

The solution is to beat Gmail to it and wrap the address in your own <a> tags and change the styling to match normal text.

e.g. 123 Fake Street, London should be
<a href="" style="text-decoration:none !important">123 Fake Street</a>

Upvotes: 11

Related Questions