Advanced Meta tags for Social Media Optimization

  

Social Medias are grown enough to make even a revolutionary movement in a country. It has a lot of influences over the world. When it comes to SEO, social media is an unavoidable factor. Likes, Tweets, Shares etc having major role on search algorithms. Also social medias are capable to give you initial traffic to your website even before you get indexed by Search Engines. This how social medias are important, so today we are going to learn some advance meta tags for optimize your website with all major social media sites.

 

Meta tags are very familiar to all most all webmasters, some even stuff their site with tons of keywords in their meta. Whatever it is, we all are doing it for optimizing our site for search ranks. Did you ever heard about meta tag that we write for Social Media Optimization, probably not. Don’t worry, today you will learn it. Let’s proceed to it.

 

Meta for Twitter Card Implementation

Twitter is largest professional social network with around 300 million active users. It is the right place to find lead for your businesses. But what makes twitter different from other social networking sites is it’s tweet is limited to 140 characters. So even twitter enables images, if you wish to make your site’s tweet stand among from others, you really have to do something different.

 

For that, twitter developers comes with a feature called Twitter Cards. Which will fetch a bit detail about the tweeted URL, and make it like a card, only if that site implemented with twitter card. If you wish to have a look on Twitter Card live preview, use the tweet button below.

 

 

When you finish tweet, just have a look on your timeline. There you can see this blog post’s Twitter Card (if you can’t see that, click on summery, there will be it). Don’t you wish to make it on your site?. Then hurry up, add the below codes to your site’s source-code.

 

<meta name=“twitter:card” content=“summary_large_image”>
<meta name=“twitter:site” content=“@SiteUsername”>
<meta name=“twitter:creator” content=“@AuthorUsername”>
<meta name=“twitter:title” content=“Title of the article”>
<meta name=“twitter:description” content=“A short description of your article”>
<meta name=“twitter:image:src” content=“image URL to display”>

 

Add this meta tags to <head> of your website and change content of each line with your site’s matching (except the summary_large_image). If your site having multiple pages, then it is better to change content’s in dynamic way. For example, if you are a WordPress user, then you can make title line like,

<meta name=“twitter:title” content=“<?php the_title(); ?>”>

Similarly change each content line as dynamic based on the platform you used to build your site. This Tutorial share with you Twitter Card only for Articles. There are other several Twitter Cards available for Android App, Product, Image Gallery etc. That you can find on Twitter Developer Page.

 

When you finish implementing meta tags, then you have to validate your site for showing Twitter Cards. This is a one time process, that means when you request for a Twitter card validation it may be enough for your entire site. Use twitter card validator for the same. Your card become active only after validation request confirmed by twitter developer. It may take few minutes.

 

Open Graph Meta for Facebook and LinkedIn

Open Graph Meta (og meta) is similarly like twitter card, which will fetch details from your webpage to make your social shares more richer. Open graph is acceptable on both Facebook and LinkedIn. There are several og meta tags available for different purposes. Below I’m sharing a standard  og meta set for a blog or content related site.

 

<meta property=“og:type” content=“website”>
<meta property=“og:url” content=“URL of the page”>
<meta property=“og:title” content=“Title of the webpage”>
<meta property=“og:description” content=“Short description of the page”>
<meta property=“og:image” content=“Image URL”>
<meta property=“fb:admins” content=“Facebook Admin id”>

 

This is typical og meta codes. Similarly like twitter card, you have to replace the content area with your own content. Also on open graph you have to add og prefix to <html> tag of your website. Like below,

<html prefix=”og: http://ogp.me/ns#”>

More Open Graph tags are available for different type of websites, check out them on Open Graph official site

 

Schema Structured Data for Google Plus

Schema is a way to do structured data implementation for search engine as well Google plus. Schema is an organization founded by combining all search engines together. It will also help to make your site search listing more richer. Below I’m giving a typical schema lines for blogs. I will write a detailed article about schema for search result soon.

 

<meta itemscope itemtype=“http://schema.org/Article”>
<meta itemprop=“headline” content=“Page Title”>
<meta itemprop=“image” content=“Image URL”>
<meta itemprop=“url” content=“Page URL”>
<meta itemprop=“description” content=“Short description”>

 

From the above code, replace content with yours. For different types of schema, visit Schema.org.

 

Combine all tags in one meta

Now you have learned about meta tags for Twitter Card, Open Graph and Schema. But if you insert all these tags, it will make your <head> very lengthy. So you can combine them three for making it shorter. Use the below code for all three in one set of meta. Don’t forget to replace content and to modify <html> for open graph also validating twitter card.

 

<meta name=“twitter:card” content=“summary_large_image”>
<meta property=“og:type” content=“website”>
<meta itemscope itemtype=“http://schema.org/Article”>
<meta property=“fb:admins” content=“Facebook Admin id”>
<meta name=“twitter:title” property=“og:title” itemprop=“headline” content=“Page Title”>
<meta property=“og:url” itemprop=“url” content=“URL of the page”>
<meta name=“twitter:description” property=“og:description” itemprop=“description” content=“Short description”>
<meta name=“twitter:image:src” property=“og:image” itemprop=“image” content=“Image URL”>

 

Don’t be confused, this is the combined form of all three meta tags. So you don’t have to write them separately. In this, tag name, property and itemprop stands for Twitter Card, Open Graph and Schema respectively. And the content will be one and same for both of them.

 

Conclusion

Similarly like Search Engine Optimization (SEO) meta tags, now we are familiar with Social Media Optimization (SMO) meta. Implementing them with your website will help your content to be look different on social networking platforms. So conversion from social shares will increase as well as SEO. If you feel any confusion regarding this tags, you can open your mind in our comment area. Thank you.