Meta Tags in Email

Demystifying Meta Tags in Email


Meta tags are a mysterious topic in the world of email development. Many tags are included “for good measure” without the developer knowing quite why it’s there. In normal HTML development, meta tags cover any metadata not already covered by <base>, <link>, <script>, <style> or <title>.

I’ll cover some of the common uses for these tags in email, as well as some commonly seen tags that you may not really need.

Format Detection

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

These simple tags stop iOS from turning your phone numbers and dates into links. You may or may not want to use them. Personally, I think that linked numbers can be very helpful if you want a customer to contact you or save your information to their calendar. On the other hand, Apple’s default blue may not go well with your email’s color scheme. These make for an easy way to prevent this behavior without trying to override or fool iOS.

Viewport

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta name="viewport" content="width=600,initial-scale = 2.3,user-scalable=no">
<meta name="viewport" content="width=device-width">

These metatags can be used to control the size at which a browser displays your email. In our testing in 2013 as well as during my research for this article, I found that the various viewport meta tags had no effect on the initial display or responsive behavior of the email. The max-scale attribute can prevent users from zooming in, but that’s not very helpful to people with vision problems.

When smartphones and tablets were just coming out, the purpose of the viewport tag was to tell browsers that your content was coded to adapt to smaller device widths or to a specific width. This helped to enable responsive behaviors in those clients, by letting the browser know you were ready for smaller display screens. On the other hand, adding this tag to a non-responsive site would force the browser window to display only the top-right corner of the zoomed-in content. So the tag had to be used carefully. Read this blog for more info on that.

If you have found a use case where the viewport metatag improves the customer experience on email, please let me know!

Charset

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

This tag is important for preserving your character encoding across various email clients. However, regardless of this tag, some email clients will force you to use their encoding (UTF-8) upon receiving your email, and ESPs will use their default encoding upon sending. Check out our blog on The Importance of Content-Type Character Encoding in HTML Emails for more info. The solution? Use our free character converter to ensure that your characters are preserved across various encoding formats. The character converter tool is also available for use within our free Email Editor.

So why include this tag at all? It’s important to include for display in browsers, especially if you include a “View as webpage” link. Most browsers default to UTF-8, but not all will. Some versions of Internet Explorer default to ISO-8859-1, and some Chinese browsers default to Big5. If you’re not using UTF-8, then it’s especially important to declare the charset.

IE=Edge and IE=X

<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">

The IE=Edge tag enables responsive behavior in Windows phones, which is VERY welcome for email developers. However, it will also break all of your images in Live Mail (God knows why, thanks Microsoft!). The solution is pretty simple though: just wrap your IE=Edge meta tag in a conditional comment to hide it from Live Mail, as I have it below. Check out our blog on that topic for more info.

<!--[if !mso]><!-- -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->

The various IE=X tags (IE=7, IE=8, IE=9) are used to force a browser to display the code in a “legacy document mode.” Usually, though, email developers have no desire to turn the clock back to the days of Internet Explorer 7. I would not suggest using these in email code, though there may be some edge cases.

Did we miss any meta tags?

That covers all of the meta tags that I regularly see used in email. If we missed any tags, or any uses for the tags listed above, please let us know! We’d love to make this post as complete a resource as possible.

4 thoughts on “Demystifying Meta Tags in Email”

  1. Thanks Geoff! I’d like to add couple; there is the magical iOS blue link color fix, see “removebluelinks dot com”. It’s a style which begins with a[x-apple-data-detectors] { and overrides everything with !important. There is also one more thing from HEAD tag not mentioned here, not meta tag per se, but same type — the Outlook conditional tag with XML which starts with if gte mso 9 o:AllowPNG/ o:PixelsPerInch 96 /o:PixelsPerInch. That MSO conditional is put before opening BODY tag and after STYLE. Otherwise your compilation above is complete =)

  2. What about Facebook Open Graph. Our company has been using a design template and I noticed a lot of open graph in it. Could this slow down our open rate.

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies