How to Make Your Blog Post to look Pretty on Facebook, Twitter and Google+

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!

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.

Open Graph Protocol
Open Graph Protocol

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.

Viral Nova
Viral Nova

Wondering how they made the title of their page looks different in Facebook? They’ve used Open graph tags to achieve this.

Open Graph Tags in the page
Open Graph Tags in the page

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 🙂

Open Graph Debugger
Open Graph Debugger

 #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.

View Summary - Twitter Cards
View Summary – Twitter Cards

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:

A tweet with no card
A tweet with no card

Example of a tweet with Twitter Card:

A tweet with card
A tweet with 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.

WordPress.org or Self hosted WordPress blogs: Adding Twitter card meta data in WordPress blogs is a simple task by using JM Twitter Cards plugin. Even the Twitter recommends this plugin.

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 == &quot;item&quot;’>
<meta name=’twitter:description’ expr:content=’data:post.snippet’/>
<b:else/>
<meta name=’twitter:description’ content=’Description about my Blogger site.’/>
</b:if>
Replace the @myblog with your blog’s Twitter handle. If you want your Twitter card with large image, replace content=’summary’ with content=’ summary_large_image
See more types of Twitter cards and the way to implement them here: Twitter Cards
Now save the template.
Thanks to Blogger  How for the tutorial.
Tumblr blogs: Read how to implement Twitter cards for Tumblr blogs here: Twitter Cards for Tumblr blogs

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.
Rich Snippets
Rich Snippets
  • 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.

17 Replies to “How to Make Your Blog Post to look Pretty on Facebook, Twitter and Google+”

  1. Very detailed post,

    Well I’ve been learning CSS during these days and I guess this post is really helpful to learn some new codes and would surely implement them on blog.

    Thanks for sharing.

  2. Hi Sriram, I just install Open Graph Protocol plugin in my WordPress blog (bloggingshout.com) but when i check it on Facebook Debugger tool, it’s show me an error something like ” Object at URL ‘http://www.bloggingshout.com/high-pr-dofollow-article-directory-sites/’ of type ‘article’ is invalid because it specifies multiple ‘og:url’ values: http://www.bloggingshout.com/high-pr-dofollow-article-directory-sites/, http://www.bloggingshout.com/high-pr-dofollow-article-directory-sites/?fb_locale=en_GB.” How can i solve this problem?

  3. This is really an informative post.Your instruction are crystal clear about enabling twitter cards and implementing open graph protocol

  4. Great article full of reasonable advice that really works. This article is a very detailed post. This post is very helpful to learn some new codes and would surely implement them on the blog. You have a brilliant Idea. I will share this to my friends and let them read this and take your advice. Thank you for sharing this post.

  5. Thanks for this article,It is so frustrating, when managing multiple social media accounts, to get every little thing right. And when we’re dealing with a society that has the attention span of a gnat, little things become big things real fast.
    I like that you highlight, based on data, what typically makes for a successful post on each platform, then dove into how we can get there.
    Thanks for sharing your thoughts. I really appreciate your efforts..

  6. Great and very informative post.

    I’ll try the plugins you’ve recommended. I really need the Twitter cards.

    Are there any plugin for Tumblr OpenGraph? I want to share WP posts using URL on Tumblr.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.