Build Great Backlinks has posted a new item, 'Must-Have Social Media Meta Tag
Templates for Improved Sharing and SEO'
Posted by Cyrus-Shepard
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.
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.
Minimum Social Media Tag Template: 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." />
<!-- Twitter Card data -->
<meta name="twitter:card" value="summary">
<!-- 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" />
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
Standard Social Media Tag Template: 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." />
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<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 images must be at least 200x200px -->
<meta name="twitter:image" content="http://www.example.com/image.jpg">
<!-- 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="fb:admins" content="Facebook numeric ID" />
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." />
<!-- Google Authorship and Publisher Markup -->
<link rel="author"
href="https://plus.google.com/[Google+_Profile]/posts"/>
<link rel="publisher"
href=âhttps://plus.google.com/[Google+_Page_Profile]"/>
<!-- 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" />
Tools for testing and approval
A. Twitter Validation Tool
https://dev.twitter.com/docs/cards/validation/validator
Before your cards show on Twitter, you must first have your domain
approved. Fortunately, it's a super-easy process. After you implement your
cards, simply enter your sample URL into the validation tool. After checking
your markup, select the "Submit for Approval" button.
B. Facebook Debugger
https://developers.facebook.com/tools/debug
You don't need prior approval for your meta information to show on
Facebook, but the debugging tool they offer gives you a wealth of information
about all your tags and can also analyze your Twitter tags.
C. Google Structured Data Testing Tool
http://www.google.com/webmasters/tools/richsnippets
Webmasters traditionally use the structured data testing tool to test
authorship markup and preview how snippets will appear in search results, but
you can also use see what other types of meta data Google is able to extract
from each page.
D. Pinterest Rich Pins Validator
http://developers.pinterest.com/rich_pins/validator/
Like Twitter, Pinterest requires an approval process to enable Rich Pin
functionality. Use the Rich Pin Validator tool to test your data markup and
apply for approval at the same time.
Tips and best practices
Optimizing for images
The image you link to in your social data does not actually have to be on the
page, but it should represent your content well. The image allows you to
controll what people see when they share your content, so it's important to use
quality images.
Every social platform has different standards for sizing. Typically, it's
easier to keep it simple and choose one image size that will work for all
services.
Twitter thumbnail: 120x120px
Twitter large image: 280x150px
Facebook: Standards vary, but an image at least 200x200px works best. Facebook
recommends large images up to 1200px wide.
In short, larger images offer you the most flexibility. When in doubt, test
each page using the appropriate tool below to see exactly how your images will
appear in snippits.
The importance of Open Graph data
If you could choose only one type of meta data to include, your best bet is
Open Graph. That's because all the platforms can use it as a fallback, including
Twitter to a large degree.
Facebook page insights
The meta property "fb:admins" requires that you enter your numeric Facebook
id number, and gives you access to analytics about how your website content is
shared on Facebook. Read more about Page Insights, including how to set it up
and discover your numeric id.
Further resources
Use these templates as a starting point, but you can customize them in
millions of ways. A few valuable resources to aid your journey:
The Web Developer's SEO Cheat Sheet 2.0
18 Meta Tags Every Webpage Should Have in 2014
Twitter Card Documentation
The Open Graph Protocol
Snippet - Google+ Platform
Pinterest Rich Pins for Business
WooCommerce - Free Wordpress toolkit that adds product markup
What are your best tips for optimizing your content for sharing? Let us know
in the comments below.
Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten
hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think
of it as your exclusive digest of stuff you don't have time to hunt down but
want to read!
You may view the latest post at
http://feedproxy.google.com/~r/seomoz/~3/GE7CLFi3vNs/meta-data-templates-123
You received this e-mail because you asked to be notified when new updates are
posted.
Best regards,
Build Great Backlinks
peter.clarke@designed-for-success.com
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment