Must have use recommended Social Meta tag for Twitter, Google+, Facebook ~ Digital Hub Inc

Most recommended Social Meta tag for Twitter, Google+, Facebook and more for commercial or non-commercial websites. Increase social presence in social media and popular search engines.

Must have use recommended Social Meta tag Twitter, Google+, Facebook By Digital Hub Inc.

Meta Data

I mostly recommended for social media publishing and advertising. Now days most of people make accounts on social media like - facebook , twitter , linkedin , google plus , tumblr and many more. Social increase the social media presense on , most popular search engine like google , yahoo , Bing etc. Social media provide large media and documents sharing and easily searchable on search engine.

At Digital Hub Inc, we strive to include social media metadata in all new pieces of content that i 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. I think that it's increase social exposure by conversion rate optimization.

I have researched in social media optimization along time and integrate social media tag in your website.

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

Social Media directly affects to social media traffic and optimize image , SEO of your website.
To complement the Twitter Card platform, analytics reveal how you can improve key metrics such as URL clicks, app install attempts and Retweets.

How to use these templates in your website

Simply these code copy and paste on your text editer. I highly recommended for Note pad+ and in this editer easily edit & customize your code.Make sure to replace any orange or green text with your own data, and customize, eliminate or add any tags you find necessary.

1. The Minimal Template

This slimmed back version runs lean and fast. It contains a bare minimum of data for optimized sharing acrossTwitter, 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

<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<meta name="twitter:card" value="summary">

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

<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">

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

<html itemscope itemtype="http://schema.org/Article">

<link rel="author" href="https://plus.google.com/[Google+_Profile]/posts"/>
<link rel="publisher" href=”https://plus.google.com/[Google+_Page_Profile]"/>

<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">

<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">

<meta name="twitter:image:src" content="http://www.example.com/image.html">

<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

<html itemscope itemtype="http://schema.org/Product">

<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">

Note: You have to include following META tags within the tag HEAD.

Meta Tags for Discoverability
This helps to improves Google ownership for search engine optimization.

<meta property="place:location:latitude" content="13.062616"/><meta property="place:location:longitude" content="80.229508"/><meta property="business:contact_data:street_address" content="Street Name"/><meta property="business:contact_data:locality" content="City Name"/><meta property="business:contact_data:postal_code" content="ZIP Code"/><meta property="business:contact_data:country_name" content="Country"/><meta property="business:contact_data:email" content="cotact@mail.com"/><meta property="business:contact_data:phone_number" content="+91 1234567890"/><meta property="business:contact_data:website" content="http://www.website.com"/>

Google Plus
Here add you website details.

<meta itemprop="name" content="Website Name"/><meta itemprop="description" content="Website Description"/><meta itemprop="image" content="https://website.com/image250X250.png"/>

Google Structured Data Testing Toolhttp://www.google.com/webmasters/tools/richsnippets

Twitter

<meta name="twitter:card" content="summary"/> <meta name="twitter:site" content="digitalhubinc"/><meta name="twitter:title" content="Technology Blog"><meta name="twitter:description" content="PHP Social Networking Script"/><meta name="twitter:creator" content="digitalhubinc"/><meta name="twitter:image:src" content="https://website.com/image250X250.png"/><meta name="twitter:domain" content="website.com"/>

Twitter Verification

Validate your website here https://dev.twitter.com/docs/cards/validation/validator

Facebook
Modify with your website and Facebook profile details.

<meta property="og:type" content="profile"/> <meta property="profile:first_name" content="First Name"/> <meta property="profile:last_name" content="Last Name"/><meta property="profile:username" content=""/><meta property="og:title" content="Website Name"/><meta property="og:description" content="Website Description"/><meta property="og:image" content="https://website.com/image250X250.png"/><meta property="og:url" content="http://www.digitalhubinc.com"/><meta property="og:site_name" content="Website Name"/><meta property="og:see_also" content="http://www.website.com"/><meta property="fb:admins" content="Facebook_ID"/>

Facebookde bugger tool to validate meta information .https://developers.facebook.com/tools/debug

Resources : 9lesson.info and http://moz.com/

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 Guide

Optimize image for social media [facebook , twitter , google plus]
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.

SEO Optimzation for snippit Data
Share your web article on social media with relivant data snippit [keywords , Title and more.]

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.

Use Google Page Insights
Use Google Page Insights tool or [Rich Snippet tool] for researching markup language and irrelevant meta data tag used in your website. Solve your problem easily to optimize your data snippet, image and css code/ java scripts.

Thank you for reading this article and share your valuable comments below here. If you like this article , Share on social media.

Must have use recommended Social Meta tag for Twitter, Google+, Facebook

How to use these templates in your website

1. The Minimal Template

Minimum Social Media Tag Template: Article

2: The Standard Template

Standard Social Media Tag Template: Article