Social media meta tag templates

facebook

<!-- Social: Facebook / Open Graph -->
<meta property="fb:admins" content="503386332">
<meta property="fb:app_id" content="1389892087910588">
<meta property="og:url" content="http://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-might-not-know">
<meta property="og:type" content="article">
<meta property="og:title" content="Bootstrap 3 Tips and Tricks You Might Not Know">
<meta property="og:image" content="/wp-content/uploads/2014/05/bs31.jpg"/>
<meta property="og:description" content="Bootstrap 3 has a ton of features and helpers to speed up front-end development. Sometimes you need something and you end up writing your own custom CSS and JavaScript without even realizing that Bootstrap could have done it for you....">
<meta property="og:site_name" content="Scotch">
<meta property="article:author" content="https://www.facebook.com/NCerminara">
<meta property="article:publisher" content="https://www.facebook.com/scotchdevelopment">

google-plus

<!-- Social: Google+ / Schema.org  -->
<link rel="author" href="https://plus.google.com/+NicholasCerminaraV/">
<link rel="publisher" href="https://plus.google.com/+ScotchIo/">
<meta itemprop="name" content="Bootstrap 3 Tips and Tricks You Might Not Know">
<meta itemprop="description" content="Bootstrap 3 has a ton of features and helpers to speed up front-end development. Sometimes you need something and you end up writing your own custom CSS and JavaScript without even realizing that Bootstrap could have done it for you....">
<meta itemprop="image" content="/wp-content/uploads/2014/05/bs31.jpg">

seo

<!-- SEO -->
<meta name="author" content="Nicholas Cerminara">
<meta name="description" content="Bootstrap 3 has a ton of features and helpers to speed up front-end development. Sometimes you need something and you end up writing your own custom CSS and JavaScript without even realizing that Bootstrap could have done it for you....">
<link rel="canonical" href="http://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-might-not-know">

twitter-cards

<!-- Social: Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@scotch_io">
<meta name="twitter:creator" content="ncerminara">
<meta name="twitter:title" content="Bootstrap 3 Tips and Tricks You Might Not Know">
<meta name="twitter:description" content="Bootstrap 3 has a ton of features and helpers to speed up front-end development. Sometimes you need something and you end up writing your own custom CSS and JavaScript without even realizing that Bootstrap could have done it for you....">
<meta name="twitter:image:src" content="/wp-content/uploads/2014/05/bs31.jpg">

All credit to this article: https://scotch.io/quick-tips/all-search-and-social-media-meta-tags-starter-template

Search Engines / Google

• More info: http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf

Twitter Cards (Large Image)

• Heads up! You must visit the Twitter Validator and request approval after setting up your Meta tags.
• Documentation: https://dev.twitter.com/docs/cards
• Debugger: https://dev.twitter.com/docs/cards/validation/validator

Facebook Open Graph

• Documentation: http://ogp.me/
• Debugger: https://developers.facebook.com/tools/debug/

Google+ and Schema.org / Itemscope

• Documentation: https://schema.org/
• Debugger: http://www.google.com/webmasters/tools/richsnippets