How To Mark Up Email 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:

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:

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:

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.

Some opinions expressed in this article may be those of a guest author and not necessarily Marketing Land. Staff authors are listed here.

About The Author

Tom Sather

Tom Sather 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.