At Moz, we strive to include social media metadata in all new pieces of content that we publish. This allows us to optimize for sharing Twitter, Facebook, Google+ and Pinerest by defining exactly how titles, descriptions, images and more appear in social streams.
Think of it as conversion rate optimization for social exposure.
The implications for SEO are also significant. We know from experience and studies that the right data, including optimized images, helps content to spread, which often leads to increased links and mentions.
Think of it as conversion rate optimization for social exposure.
The implications for SEO are also significant. We know from experience and studies that the right data, including optimized images, helps content to spread, which often leads to increased links and mentions.
Knowing exactly which social meta tags to include can be confusing even to experienced webmasters. This post by Micheal King is a huge help, and Wordpress publishers who use Yoast's SEO plugin are well ahead of the game. For the rest of us, consider the different structures supported by the major social platforms:
Twitter Cards: Summaries, Images, Galleries, Apps, Video, Audio, and Products
Pinterest Rich Pins: Products, Recipes, Movies, and Articles
Google+: Articles, Blog, Book, Event, Local Business, Organization, Person, Product, and Reviews
Facebook: Articles, Photos, Audio, Video, and more
To help ease this problem, I created four social media tag templates that you can fill out, customize for your own use, and share with your team and others.
How to use these templates
Simply copy and paste the template into the text editor of your choice. Make sure to replace any orange or green text with your own data, and customize, eliminate or add any tags you find necessary.
The first three of these templates are optimized using a typical "article" markup and data, ideal for blog posts and most written content. The final template contains markup for product pages.For other post types, such as book or recipes, refer to documentation linked at the end of this post for reference on what to customize.
When you are done, don't forget to test and apply for approval.
1. The Minimal Template
This slimmed back version runs lean and fast. It contains a bare minimum of data for optimized sharing across Twitter, Facebook, Google+ and Pinterest.
Title tags and meta descriptions are included even though they aren't technically social media meta tags. This is because they can be used by Google+ and other social media platforms, and it is best practice to include them on every page you publish.
2: The Standard Template
The standard template represents a more robust implementation of social tags and is meant to work across all platforms. In addition to all of the features of the mimimal template above, the standard template includes the following:
The basic Twitter Summary card
Twitter thumbnail image
Facebook Page Insights
3: The Full Monty
This is the monster! In addition to all the data contained in the standard template, the full template contains:
Google Authorship and Publisher Markup. Although this data doesn't change your content appearance in Google+, it potentially add links to your Google+ pages in search results.
Schema.org article markup
Twitter Summary card with large image
Expanded Open Graph article data
Full Social Media Tag Template: Article
<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">
<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.html">
<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />
<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
<meta property="article:section" content="Article Section" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="Facebook numberic ID" />
Bonus: The Product Template
For merchants, product markup is very popular, and usually easy for developers to implement in their shopping cart software. The product template differs from article markup in only a few ways:
Modified <html> tag to reflect schema.org product data
Twitter Product Card includes required data labels
Open Graph data includes price and currency data
Product Social Media Tag Template
<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Product">
<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">
<!-- Twitter Card data -->
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<meta name="twitter:image" content="http://www.example.com/image.html">
<meta name="twitter:data1" content="$3">
<meta name="twitter:label1" content="Price">
<meta name="twitter:data2" content="Black">
<meta name="twitter:label2" content="Color">
<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="og:price:amount" content="15.00" />
<meta property="og:price:currency" content="USD" />
source: https://moz.com/blog/meta-data-templates-123
