18 Meta Tags Every Webpage Should Have in 2013

The definitive guide to Search and Social Meta Tags you should be using in 2013. No fluff, no wasted code, just what you need to use.

Let’s get back to basics. If I’m to be honest, flashbacks of arguments with copywriters in ad agencies turn me off to the discussion of metadata. However the reality of the situation is that as Search and Social continue to rapidly converge, it is us SEOs that are left to pick up the technical end of the stick and metadata continues to land on our plate.

The most important function of metadata is not the ability to influence rankings, but its ability to encourage your content to make the best first impression possible. The Big 3 social networks all allow marketers the ability to provide metadata specific to the channel and therein lies the opportunity to provided titles, descriptions and pictures that resonate directly with audience in a given channel.

Adoption of New Metadata

The Common Crawl, which is an incredible resource that all SEOs should be at least mindful of, has developed a microsite called the Web Data Commonswhere they identify trends extracted from the Common Crawl corpus.Schema.org, the new vocabulary that search engines have forced us to learn without providing too much immediate benefit, appeared in 43.05% of the 1,811,471,956 typed entities that appeared in the 3,005,629,093 URLs on the40,600,000 domains that make up the August 2012 Common Crawl Corpus. As you might imagine the highest occurring microformat types being used are by far VideoObject (Schema.org) and Breadcrumb (RDFa). This makes complete sense because those are the two that have the most direct value in the SERPs.

When compared to the 2010 Corpus, RDFa was of course the most popular, but in 2012 Schema.org came with a vengeance quickly closing the gap. You might think it more reasonable to use RDFa rather than Schema.org, but with the search engines pushing it you can expect a higher reward from Schema.org. So it’s a good time to embrace it.

Now on to the list!

The Usual Searchspects

While Google keeps messing around with our tried and true understanding of the title and meta description they are still the most important meta tags for an SEO to prepare. Obviously, the on-page content is key, but if we can’t get them to click through then what is the point? In an upcoming post on the Poetry of SEO, Devin Asaro will talk about how to approach this copy so that it is engaging and elegant and mimics ad copy. For the time being let’s just dive into the usual searchspects.

1. Page Title –
   Long regarded as the most important on-page factor, the title tag has recently taken a lot of scrutiny. A recent post has determined that page titles aren’t limited to 70 characters, but rather pixel-width. Also a little further back Cyrus Shepard tested titles longer than 70 characters to see what Google would do. In the wild I’ve seen extremely long titles are oftentimes chopped down or rewritten algorithmically to display the most relevant text to a query.

   Unless you want to measure the pixel-width of your titles and hope that Google shows the right thing, your best bet is to make page titles as keyword-relevant as possible and up to 70 characters. I honestly can’t think of a case where I’ve left something up to Google and they did a better job than I thought I could.

   Format:
   

   <title>Up to 70 Characters of Keyword-relevant text here</title>
   

2. Meta Description – If your webpage were a commercial, this would be its slogan. In our upcoming search behavior study in cooperation with SurveyMonkey we’ve found that 43.2% of people click on a given result due to the meta description. Gone are the days of meta descriptions that listed keywords and just said the “Official site of…” and the main purpose of this text is to draw the user in, let them know what to expect if they click and convince them to do so with a strong call to action. The kicker is you get 155 characters to make it happen; think of it as like writing a tweet, but with 15 extra characters.

   Format:
   

   <meta name=”description” content=”155 characters of message matching text with a call to action goes here”>
   

3. Authorship Markup – As I predicted at SearchLove NYC in November 2011, and has been verified by Eric Schmidt, Google is going to rank content that is connected to authors that they deem to be reliable sources over content that is not. A cool visible incentive is that you get name and your pretty picture in the SERPs if you’re an author.

   

   If you’re a publisher your posts start appearing in the right rail of the SERPs.

   

Now let’s look at the metatags that make the magic happen!

• Rel-Author– This is a meta tag that can be implemented that specifies who the author of a piece of content is and uses Google+ to identify them. Initially Google rolled this out as just a tag that you place in the <head> of the code, but ultimately they would realize it’s not realistic that authors will have that type of control over the page and expanded to a more modular form.Format:For the version that goes in the <head> tag, you use the following:
  <link rel=”author” href=”https://plus.google.com/[YOUR PERSONAL G+ PROFILE HERE]“/>
  

  For the more modular version you would emulate XFN’s rel-me and place the link directly on the page. I’ve got to admit this is a great link building strategy.

  <a href=”[profile_url]?rel=author”>Google</a>
  

  If you use this method you will have to take the second step in verification by linking to your content from your Google+ profile. For more information see Google’s explanation.

• Rel-Me – Rel-me is just the XFNversion of rel-author. You simply place the meta tag on a link back to your Google+ profile.Format:

  <a href=”https://plus.google.com/[YOUR PERSONAL G+ PROFILE NUMBER]” rel=”me”>Me on Google+</a>
  

• Rel-Publisher –Rel-publisher is for business entities to claim ownership of their content. This can be used in context with rel-author or in place of it, but you should be pointing to a business profile on Google+ rather than an individuals.Format:<link rel=”publisher” href=”https://plus.google.com/[YOUR BUSINESS G+ PROFILE HERE]“/>

Don’t be late to the authorship markup party as it would not be surprising to see Google wipe out the visibility of content simply because there are no verifiable authors connected to it.

Social Meta Tags

Social Media is obviously a great place for content discovery, but oftentimes the meta data created for Search is not enough to encourage people to click through therefore it is best to use the meta tags each social platform provides. These metatags are not about keyword stuffing at all, but rather grabbing people’s attention and getting them to click. We all know that the users of Google+ are primarily tech people, users on Facebook are busy stalking their ex-girlfriends and Twitter users are bombarded with timelines moving at the speed of thought. Let’s talk about the channel-specific metadata options.

OpenGraph tags

Facebook’s OpenGraph allows you to specify metadata to optimize how your content appears in a user’s timeline. The added benefit of using this data is that by creating an “Edge” in Facebook you can obtain some fantastic data about the users checking out your content via Facebook Insights. If you don’t use Open Graph tags Facebook will default to standard metadata.

1. og:title –This is the title of the piece of content. You should use this as a headline that will appeal to the Facebook audience. It is completely ok to use a different title than the one on the actual site as long as the message is ultimately the same. You have 95 characters to work with.Format:
   <meta property=”og:title” content=”iAcquire’s awesome blog”/>
2. og:type – This is the type of object your piece of content is. For your purposes it will usually be blog, website orarticle, but if you want to get fancy Facebook provides a complete list.Format:
   <meta property=”og:type” content=”article”/>
3. og:image –This is the image that Facebook will show in the screenshot of the content. Be sure to specify a square image to ensure the best visibility in a user’s timeline. If you don’t specify an image at all you are left to the mercy of the user to pick which image represents your content based on what Facebook can scrape. That is typically not the way to ensure the best first impression.Format:
   <meta property=”og:image” content=”http://www.iacquire.com/some-thumbnail.jpg”/>
    
4. og:url– This is simply the URL of the page (or edge). You should specify this especially if you have duplicate content issues to make sure the value of the edge in Facebook is consolidated into one URL.Format:
   <meta property=”og:url” content=”http://blog.iacquire.com”/>
    
5. og:description –This is the description Facebook will show in the screenshot of the piece of content. Just like the standard meta description it should be catchy and contain a call to action, but in this case you have nearly twice the number of characters to work with. Make sure this too speaks to the Facebook audience. You have to 297 characters to make it happen.Format:

   <meta property=”og:description” content=”Stop hitting refresh on your ex-girlfriend’s Facebook page? You should check out the iAcquire blog and learn something instead”/>
   

6. fb:admins – This metatag is critical for getting access to the wealth of data made available via Facebook Insights. You simply have to specify the Facebook User IDs in the metadata of those users you want to have access. For more information on Facebook Insights see the documentation.Format:
   <meta property=”fb:admins” content=”USER_ID”/>
   

Due to its overwhelming adoption, the other social networks will all default to Open Graph Meta tags if there are no other meta tags present. However, as I mentioned earlier in this discussion, to only prepare one set of metadata is to ignore the ability to speak to the different people in the different channels. Understanding that Google+ is mostly tech users, Facebook’s audience is far more varied and Twitter’s audience is often dealing with content flying by at the speed of thought – why not account for that with your metadata?

For more information see the Open Graph Protocol documentation.

Twitter Cards

Twitter Cards are simply Twitter’s answer to the Open Graph Protocol and you might have noticed them in the wild, but here’s a screenshot from Twitter’s documentation.

The added benefit is making your content stand out in the otherwise chaotic Twitter timeline and ultimately bringing back more people. Also, it has long been thought that many users will retweet an article without actually reading it, using Twitter Cards as advertisements will help facilitate resharing of content as well. Most of these tags mirror what you’ve just read about Facebook Open Graph so I’ll be brief.

1. twitter:card– This is the card type. Your options are summary, photo or player. Twitter will default to “summary” if it is not specified.Format:
   <meta name=”twitter:card” content=”summary”>
   
2. twitter:url– This is the URL of the content.Format:
   <meta name=”twitter:url” content=”http://www.nytimes.com/2012/02/19/arts/music/amid-police-presence-fans-congregate-for-whitney-houstons-funeral-in-newark.html”>
   
3. twitter:title–This is the title of the content to be shared and should be limited to 70 characters after which Twitter will truncate. Again, go for headlines instead of keywords.Format:
   <meta name=”twitter:title” content=”Parade of Fans for Houston’s Funeral”>
   
4. twitter:description– This is the description of the content to be shared and should be limited to 200 characters after which Twitter will truncate. Again, go for engaging text, you have more opportunity here than the actual tweet does.Format:
   <meta name=”twitter:description” content=”NEWARK – The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.”>
   
5. twitter:image – This is the image that will be displayed on the Twitter Card and it should be a square image no smaller than 60×60 pixels.
   <meta name=”twitter:image” content=”http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg”>

There are more optional twitter card meta tags such as site and creator which specify the twitter handles of the site and the author of responsible for the content, but they are not required for the content to make a good first impression so I have omitted them. For more information see the Twitter Card documentation.

Schema.Org (for Google+)

Until recently, I hadn’t realized that while Google+ will default to standard metadata or Facebook Open Graph tags, the platform also gives webmasters the ability to specify metadata specifically for Google+ using Schema.org. The beauty of it is since it’s Schema.org you can use it on nearly any HTML tag on content that is already on the page.

1. Itemscope=”[pageType]“ – where [pageType]is Article, Blog, Book, Event, LocalBusiness, Organization, Person, Product or Review.
2. itemprop=”name”– This acts as the title attribute of the rich snippet and should be limited to 140 characters.
3. itemprop=”description”– This is the description of the rich snippet and should be limited to 185 characters
4. itemprop=”image” This is the image of the rich snippet with an optimal size is 180 x 120. Google+ will shrink this image, but if it is too small it will not be displayed.

Format:

While all the other types of metadata go in the <head> section of the code, this code will potentially live in various places protectiongateway.org throughout the website. Here’s an example (from Google) of how it could be employed.

Google+ looks for metadata in the following order: Schema.org > Facebook OpenGraph > Standard Metadata > Best Guess from Scraping. See the Google+ Snippet Documentation for more information.

So…where’s the Meta Keywords?

I must admit that the discussion of meta keywords is a pet peeve of mine that I rank up there with people saying “SEO Optimization” or “ATM Machines,” but since it comes up so often with clients I figured that it’s worth mentioning here. The Meta Keywords is of no positive value to any major Search Engine especially not Google (check the link out, they said it officially in 2009). Bing uses them to determine if you are spamming or not, but beyond that the only reason a page should have meta keywords is if the internal search engine requires them. If that’s the case however I would suggest you either consider a new Content Management System or lean on Google’s custom search, after all it’s free.

…And Rel-canonical?

Sure rel-canonical is incredibly important, but is only needed when you have duplicate content issues or you’re looking to move the link equity from one page to another. Therefore it’s not needed on every page on the web and if you’re a small part of the population that cares about Bing, they don’t really believe in it.

Some Parting Gifts (Bookmarklets)

Unfortunately, tools such as the Mozbar and Screaming Frog currently do not scrape for Social Metadata so I’ve developed some bookmarklets to help with the cause. Just drag the following links to your bookmark bar and you should be good to go. Wordpress is giving me troubles with the bookmarklets so just create a new bookmark and copy and paste the following code into the Location or URL field.

• Open Graph Helper

  javascript: (function () { function d() { window.alert("Sorry, the report is unable to run.") } var a = document.createElement("script"); a.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"); a.setAttribute("id", "iprReportQuery"); document.getElementsByTagName("head")[0].appendChild(a); var b = 0; var c = setInterval(function () { var a = document.getElementById("iprReportQuery"); window.console.log(a); var e = typeof a == "undefined"; if (!e) { var f = jQuery.noConflict(true); var g = typeof f == "undefined"; window.console.log(f); if (!g) { clearInterval(c); window.console.log("jQuery " + f.fn.jquery + " has been injected."); f(document).ready(function (a) { var description = a('meta[property|="og:description"]').attr('content') || ''; console.log('description is ' + description); var title = a('meta[property|="og:title"]').attr('content') || ''; console.log('title is ' + title); var image = a('meta[property|="og:image"]').attr('content') || ''; console.log('image is ' + image); var url = a('meta[property|="og:url"]').attr('content') || ''; console.log('url is ' + url); var qStr = encodeURI( "description=" + description + "&title=" + title + "&image=" + image + "&url=" + url); var e = "http://www.ipullrank.com/tools/og-parse.php?" + qStr; window.console.log(e); var g = '

  Close This Window

  '; f("body").append(g); f("#iprCloseMe").bind("click", function () { f("#reportWindow").fadeOut("slow") }); f("#reportWindow").fadeIn("slow") }); return }++b; if (b == 10) { clearInterval(c); window.console.log("Sorry, unable to inject jQuery now."); d() } } }, 500) })()

• Twitter Card Helper

  
  javascript: (function () { function d() { window.alert("Sorry, the report is unable to run.") } var a = document.createElement("script"); a.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"); a.setAttribute("id", "iprReportQuery"); document.getElementsByTagName("head")[0].appendChild(a); var b = 0; var c = setInterval(function () { var a = document.getElementById("iprReportQuery"); window.console.log(a); var e = typeof a == "undefined"; if (!e) { var f = jQuery.noConflict(true); var g = typeof f == "undefined"; window.console.log(f); if (!g) { clearInterval(c); window.console.log("jQuery " + f.fn.jquery + " has been injected."); f(document).ready(function (a) { var description = a(
  

Also you can use Google’s own Structured Data Testing Tool for checking your Schema.org data.

comments from iAcquire

• A bit of a side road but it’s wise to use Google Tag Manager to affect lower page load times.
• meta generator