How Email Marketers Should Mark Up Messages For Gmail’s New Grid View

Google just transformed the inbox again with Gmail Grid View that turns the Promotions tab into a visual shopping mall of marketing emails. For marketers, the question is: how do I get it to work, and what will my emails look like if I don’t do anything at all? I did some testing and noticed some interesting things.

For grid view, Gmail is using “Actions in the Inbox,” which it announced in early 2013. Actions in the Inbox uses schema.org markup that takes information in an email, turns it into structured data, and then makes the structured data usable as an action.

For example, the actions can be things like the ability to RSVP to an invitation, add a movie to a queue, watch a movie or track a package. In the new inbox grid view, Gmail allows senders to use the schema.org markup to define the featured image and content of the email.

The displayed email in grid view has four components: the featured image, the logo, the sender name and the subject line. Gmail recommends the following for each component:

Featured Image: must be at least 580px x 480px

Logo: Must have a verified Google+ page

Sender Name: 20 characters or less

Subject Line: 75 characters or less

Google allows two ways for data to be marked up — microdata and JSON-LD –- and Google has stated it prefers microdata for web content.

I’ll use microdata then in the next few examples and lessons learned. For testing purposes, I used Google’s Apps Script Quickstart, and recommend everyone do the same.

1. Pay Attention To Those ALT Tags

If you decide not to use code in your emails to take advantage of this, your emails may end up looking like this:

   picture 1

Not pretty, but at least the reader still knows what the topic is, thanks to the image ALT text. If an email lacks a featured image, or Gmail is unable to find one, it will display the ALT text used in the first image.

ALT text was important before Gmail’s grid view, mainly because images were disabled by default, but now it is even more important since it can still convey the meaning of the email when an image isn’t present, and the email isn’t even opened.

2. Display The Featured Image Of Your Choosing

While it’s possible to forego declaring a featured image in favor of letting Gmail choose for you, you likely won’t want to give control to Google. After all, this is the most important way you now have to convince people to open your email.

The featured image is based on the Offer schema and declared by the name image and the URL of the image I want displayed.

<div itemscope itemtype=”http://schema.org/Offer”> <link itemprop=”image” href=”http://www.returnpath.com/someimage.jpg“/> </div>

If I wanted to make the first example have a featured image, I’d add the above code, and then the email would appear as this:

 picture 2

Much better, but there’s still one thing missing: the icon.

3. Display Your Company’s Logo

If you haven’t set up a Google+ page for your business, you need to do that first for this to work. Google will use the image in your Google+ profile.

It uses the following profiles (visit this page for descriptions of each profile and requirements):

about

about.image

publisher

publisher.name

publisher.url

publisher.url/googlePlus

Then, insert the following code (replacing the above profiles with your own):

<div itemscope itemtype=”http://schema.org/EmailMessage”>   

<div itemprop=”publisher” itemscope itemtype=”http://schema.org/Organization”>     

               <meta itemprop=”name” content=”Return Path”/>     

               <link itemprop=”url” href=”https://www.returnpath.com”/>     

               <link itemprop=”url/googlePlus” href=”https://plus.google.com/+ReturnPath”/>   

</div>   

<div itemprop=”about” itemscope itemtype=”http://schema.org/Offer”>     

               <link itemprop=”image” href=”http://www.returnpath.com/someimage.jpg”/>   

               </div> 

</div>

 

After doing that, you should now have an email in your inbox that looks like the following:

picture 3

Not all senders will need to do this, and you certainly don’t need to do it for every campaign – only those campaigns that are classified as promotions.

But, if your emails come out looking like the one in the first example, or you don’t want to leave the way your email is displayed in the hands of Google, you’ll want to go through the extra effort, or risk being ignored by your subscribers.

Opinions expressed in the article are those of the guest author and not necessarily Marketing Land.

Related Topics: Channel: Email Marketing | Email Marketing | Email Marketing Column | How To Guides: Email Marketing

Sponsored


About The Author: is Return Path’s senior director of email research. Tom uses his knowledge of ISPs, spam filters and deliverability rules to advise marketers on how to get their email delivered to the inbox. He began his Return Path career as an email deliverability consultant working with top-brand clients like eBay, MySpace, IBM and Twitter.



Sign Up To Get This Newsletter Via Email:  


Share

Other ways to share:

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. You can read more about our comments policy here.
  • http://andybeard.eu AndyBeard

    I have seen a number of sites get the company logo allocated even though the email address used doesn’t seem to be the one used by their Google+ account and they have no specific markup.

  • TomSather

    As long as the company has a verified G+ page and the sent email has the same domain name, the logo icon will (or should) appear. For businesses with multiple brands who may have multiple G+ pages, like Vitamin Water emails having a Coca Cola sending domain for example, this will be useful.

  • http://chuckreynolds.us/ Chuck Reynolds

    what’s an “ALT Tag”?

  • http://andybeard.eu AndyBeard

    There must be some other criteria for it

    As an example I get emails from Kevin Fink @ Flippa, that are sent through campaign monitor using a company email address.
    The Google+ page for Flippa has the site connected, but the email address that shows is different.
    They don’t get the company logo on their promotion cards.

    Maybe the email address has to be used by someone who is an editor for the page, or someone from Google must have populated some manually.

  • http://tudonghoadanang.com/ wind in the field

    alt is attribute of tag, w3school for more infomation .

  • http://chuckreynolds.us/ Chuck Reynolds

    you are correct. it is NOT a tag. and yet everybody always says alt tag. wrong.

  • http://tudonghoadanang.com/ wind in the field

    maybe author do not have knowleade about html, but all is ok, maybe i will translate into vietnamese and post in my site ^^

  • http://chuckreynolds.us/ Chuck Reynolds

    any “consultant working with top-brand clients” should know basic html and nomenclature. at least link back to the source if you clone the article.

  • http://tudonghoadanang.com/ wind in the field

    sure :) authorship is impotant, and i respect it

  • http://chuckreynolds.us/ Chuck Reynolds

    right on sir.

  • Pete Austin

    Warning: the above examples of markup have non-standard quotes, so you’ll need to replace the quote characters if you use them as a basis for your own markup.

  • http://swallow.vn/ springmusic

    Correct! That’s an attribute! Not a tag!
    —————————————————-
    classic guitar

 

Get Our News, Everywhere!

Daily Email:

Follow Marketing Land on Twitter @marketingland Like Marketing Land on Facebook Follow Marketing Land on Google+ Subscribe to Our Feed! Join our LinkedIn Group Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Marketing News!

Marketing Day is a once-per-day newsletter update - sign up below and get the news delivered to you!