Let me admit that I’ve spent hours searching for a fast and attractive social sharing button for my blog. And I got one. Tweaked it. And forgot about it completely.
And I thought it’s enough to pull people from social media sites.
I was WRONG!
Yep, having good looking social sharing buttons only help you make others share your post (if it’s worthy) to social media sites, but this doesn’t promise to get traffic from social sites to your blog, does it?Click to tweet
We should optimize our blog posts to make it look beautiful when shared on social media sites.
So I guess you want to create your shared posts look beautiful at social media sites, don’t you?
In this post I’ll be guiding you on how to make your blog post look beautiful when shared on Facebook, Twitter and Google+.
#1: Facebook: Use Open Graph Protocol
Let me quote what’s written in the Open Graph protocol website.
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.
In simple words, Open graph protocol gives you control over how your shared content looks like in Facebook. You can explicitly set the title, description, type and image to be displayed when your content is shared or liked on Facebook.
This can be done by inserting some meta tags to your HTML code. The supported list of the meta tags can be viewed at this site: Open graph Protocol
Let me give you an idea about Open graph with an example.
I saw this post in my Facebook news feed and clicked the link because the title was appealing. And what I saw on the page (title) was quite different from the one I saw on Facebook.
Wondering how they made the title of their page looks different in Facebook? They’ve used Open graph tags to achieve this.
And if you look at their source code, you can find them using Open graph tags to change their title and set the image, site name, URL, and description that should be appearing on Facebook.
Pretty cool, huh?
So how to implement Open Graph protocol in your blog?
WordPress.org or Self hosted WordPress blogs: It’s very easy to add open graph meta tags to WordPress blogs. Just install the plugin Open Graph Protocol Framework and it will automatically render the required metadata for posts, pages, etc.
WordPress.com Blogs: You don’t have to do anything here because WordPress.com automatically render open graph meta tags to your posts.
Blogger or Blogspot blogs: By Googling, I found this post How to implement open graph protocol in blogger/blogspot blogs that describes how to add open graph meta tags to your Blogspot blogs.
Tumblr blogs: I hope this post will help you to add OG tags to your Tumblr blogs: Facebook Opengraph Tags for Tumblr
How to check whether you’ve implemented OG tags correctly or not?
It’s very easy to do that.
Just go to Facebook Debugger and enter your URL.
If you see results like the one in the below image, you’ve done things correctly 🙂
#2: Twitter: Increase your CTR with Twitter Cards:
Twitter cards are probably the best way to enhance your blog’s look at Twitter. Twitter cards display rich content about your site before a user click your link or when someone click View Summary button.
What is Twitter card, how they work and how to enable them?
Twitter cards allow you to add a title, description, website’s Twitter handle, author’s Twitter handle and URL of the root website when tweeted. It can be done by inserting some <meta> tags in your HTML.
Example of a tweet without Twitter card:
Example of a tweet with Twitter Card:
Doesn’t this tweet looks spectacular?
So, how to enable Twitter Cards for your blog?
Like Open Graph Protocol, you need to add some line of code in your HTML. Let’s see how to enable Twitter Cards on popular blogging platforms.
To install this plugin, go to Plugins > Add New > Search > JM Twitter Cards. Install JM Twitter cards plugin.
Configure the plugin according to your needs. Read the documentation to know what those options mean.
WordPress.com Blogs: By default, WP.com blogs are enabled for Twitter Cards.
What you should do for your WP.com blog is to make your blog visible to Twitter web crawlers. Go to your Dashboard→Settings→Reading→Site Visibility and allow search engines to index your site. Now validate your blog for Twitter cards and you’ll see Twitter cards painted at your tweets.
Blogger or Blogspot blogs: You should add a few lines of code to your template. Just sign in to Blogger.com and go to your blog now go to Template→Edit HTML.
In the Template editor, press Ctrl+F search for <b:includable id=’post’ var=’post’> (Click anywhere in your template editor and press Ctrl+F)
Add the following code right below the <b:includable id=’post’ var=’post’>
<meta name=’twitter:site’ content=’@myblog’/><b:if cond=’data:post.firstImageUrl’><meta name=’twitter:card’ content=’photo’/><meta name=’twitter:image’ expr:content=’data:post.firstImageUrl’/><b:else/><meta name=’twitter:card’ content=’summary’/><b:if cond=’data:blog.postImageThumbnailUrl’><meta name=’twitter:image’ expr:content=’data:blog.postImageThumbnailUrl’/></b:if></b:if><meta name=’twitter:title’ expr:content=’data:blog.pageName’/><b:if cond=’data:blog.pageType == "item"’><meta name=’twitter:description’ expr:content=’data:post.snippet’/><b:else/><meta name=’twitter:description’ content=’Description about my Blogger site.’/></b:if>
How to validate your Twitter Card?
You should understand that adding Twitter Card metadata to your blog’s HTML is not enough! You should validate your Cards in order to make them appear on Twitter. After integrating required code, validate your blog at: Twitter Card Validator
You’ll soon receive a mail from Twitter about the validation status of your blog.
#3: Google+: Schema.org microdata:
Before implementing Microdata on your blog, you should know what it is and how useful it is!
Microdata is nothing but a set of tags, introduced with HTML5, that allows you to describe what you have in your blog.
For example <h1>The Rock</h1> instructs your browser to display the text “The Rock” in heading 1 format. Here H1 tag explain does nothing but just paints the word “The Rock” in your browser.
It could about the star Dwayne Johnson or about the film The Rock or about the place The Rock in New south wales even about the object rock . Perhaps the rock music? This makes harder for search engines to display relevant content in search results. Because they could only guess about what you have!
So here comes the microdata! You can now tell what exactly you have in your post/page to major search engines like Google, Yahoo!, Bing, Yandex.
Microdata is nothing but a set of tags (often <div> and <span>), precisely HTML tags, used by search engines to identify exactly what you are talking about in your post.
So let’s see how useful it is to implement these tags in a webpage:
- By using microdata, you’re clearly saying to search engines what you’ve written about. So chances are there for you to rank higher in SERP.
- Google is using microdata to display rich snippets in its search results.
- Search engines such as Google, Bing, Yahoo! and Yandex depend on microdata to deliver a perfect search result.
Thinking what Microdata has to do with Schema? Yes, Schema.org is a trustworthy website that has the vocabulary for Microdata.
Got an idea about what’s Microdata and its uses? If no, read this at Schema.
Marking up your site with Microdata:
WordPress.org or Self hosted WordPress blogs: It’s never been a problem for WordPress blogs!
Just install Add meta tags plugin and activate it. It automatically marks up posts, pages and custom post types as Article objects and also images, videos and audio as Image, Video and Audio MediaObjects respectively.
WordPress.com Blogs: I’ve found no possible ways to add microdata tags in WP.com blogs. Please tell me if you found some ways to do that.
Blogger or Blogspot blogs: I hope this post helps you doing this task: How to Markup Blogs with Schema.org Microdata
Tumblr blogs: Same as WordPress.com. I can’t obtain one. Please tell me again how to do if you know 🙂
How to find out whether you’ve added Microdata properly?
Go to Structured Data Testing tool and enter your URL there.
Now press Ctrl+F and search for the word “Item”. If you’ve found the word “Item”, then you can conclude that you’ve done things correctly. If not, you should do the process again 🙁
So, what are you waiting for?
I appreciate you if have implemented those codes in your blog. Let’s see how your social media traffic improves in the upcoming days.
Found this post informative? Then share this post so that your friends could also be benefitted.