Many time we see that when we share a blog/website post url to facebook or other social site. The same title and description of that post doesn’t show. Its an error and these types of problem can be resolved by using open graph protocol meta tags.
What is open graph protocol meta tags :
This tag combines all unstructured data into a structural format in social sites it is very useful for SEO and SMO point of view. Some times you see that when you have added a widget in your blogger blog and some one likes your post he wants to share it but an error shows that sorry the page could not be reached. Generally wordpress gives plugins to overcome this error but in Blogger and website we need to add some meta tags so that your page can be well integrated on the graph of social sites like facebook, twitter, Linkedin, Google+.
Also read : How to show related posts below every Blogger post
Benefits of adding meta tags:
- Important meta tags for smo
- It will select the most appropriate data to share
- It will share exact blogger post title on social sites like facebook, google+ and twitter.
- Fixed facebook errors for showing wrong blog address title, tag and description.
How to add in Blogger:
- Go to Blogger
- Choose your blog and click on template
- Click on edit html
- Find the code like <html…..
- Now paste the followining code just after <html
<b:if cond=’data:blog.pageType == "index"’>
<meta expr:content=’data:blog.pageTitle’ property=’og:title’/>
<meta content=’blog’ property=’og:type’/>
<b:else/>
<meta expr:content=’data:blog.pageName’ property=’og:title’/>
<meta content=’article’ property=’og:type’/>
</b:if>
<meta expr:content=’data:blog.canonicalUrl’ property=’og:url’/>
<meta expr:content=’data:blog.title’ property=’og:site_name’/>
<b:if cond=’data:blog.postImageThumbnailUrl’>
<meta expr:content=’data:blog.postImageThumbnailUrl’ property=’og:image’/>
<b:else/>
<meta content=’http://www.your-blog-logo.jpg’ property=’og:image’/>
</b:if>
<b:if cond=’data:blog.metaDescription != ""’>
<meta expr:content=’data:blog.metaDescription’ name=’og:description’/>
</b:if>
<meta content=’APPS-ID’ property=’fb:app_id’/>
<meta content=’FACEBOOK-PRIFILE-ID’ property=’fb:admins’/>
<meta expr:content=’data:blog.pageTitle’ property=’og:title’/>
<meta content=’blog’ property=’og:type’/>
<b:else/>
<meta expr:content=’data:blog.pageName’ property=’og:title’/>
<meta content=’article’ property=’og:type’/>
</b:if>
<meta expr:content=’data:blog.canonicalUrl’ property=’og:url’/>
<meta expr:content=’data:blog.title’ property=’og:site_name’/>
<b:if cond=’data:blog.postImageThumbnailUrl’>
<meta expr:content=’data:blog.postImageThumbnailUrl’ property=’og:image’/>
<b:else/>
<meta content=’http://www.your-blog-logo.jpg’ property=’og:image’/>
</b:if>
<b:if cond=’data:blog.metaDescription != ""’>
<meta expr:content=’data:blog.metaDescription’ name=’og:description’/>
</b:if>
<meta content=’APPS-ID’ property=’fb:app_id’/>
<meta content=’FACEBOOK-PRIFILE-ID’ property=’fb:admins’/>
Click on save..All done..!!!!!!!!!!!!!!!!
If you own a website and wanna add this tag. Then simply add the below tag in between <head> and </head>
<meta property=”og:title” content=”YOUR-WEB-PAGE-TITLE” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”YOUR-WEB-PAGE-URL” />
<meta property=”og:image” content=”YOUR-WEB-PAGE-IMAGE-URL” />
<meta property=”og:site_name” content=”YOUR-SITE-NAME” />
<meta property=”og:description” content=”YOUR-WEB-PAGE-DESCRIPTION” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”YOUR-WEB-PAGE-URL” />
<meta property=”og:image” content=”YOUR-WEB-PAGE-IMAGE-URL” />
<meta property=”og:site_name” content=”YOUR-SITE-NAME” />
<meta property=”og:description” content=”YOUR-WEB-PAGE-DESCRIPTION” />
Now save it..All done…
This comment has been removed by the author.
Yes brooo..one must use these tags since it helps in social sites performance of a website…thnx for ur comment..!!
Open Graph Protocols are very important to optimize our web pages for social sharing. It help us to show exact meta description, title and post thumbnail that attract more visitors.
Great post Sanjay Bro 🙂
Regards!
Ankit
Yes Ankit broo… I remember I was facing the same pblm and then u recommended me to add these tags..now my blog urls are trating well in social sites…!
Quick simple and helpful post Sanjay, thanks for sharing 😉
Grab some nice search engines juice by optimizing images; it makes a huge difference. Google loves relevancy.
Thanks!
Thanks Ryan for your valuable comment….
Nice information Sanjay 🙂
Its good to read the clear guide. Yeah, meta tags are very important.
No need to alter the code? will include it into my blog.
Keep the good work 🙂
This is indeed a cool tutorial as i was once faced with this challenge when i was on blogger but its even easier in WordPress as there are plugins for such. Thanks for sharing.
Thank you Nirmala for your valuable appreciation…yeah These meta tags r very important for performing the site on social networks….Thnx for ur comment…stay in touch!!!!!
yes Nwosu WordPress provides there plugins but in case of Blogger we have to install it manually…thnx for ur comment…!!!!!
a valuable tutorial you have. however, i am using wordpress but this post can be useful in my future blogs if i will use a blogger platform. i will also check your site for wp tutorials.
Thank u neenasatine for being here…!!! sure u use Blogger we will be in touch.
Thanks for these tips! Now finally my blog behaves correctly when linked in a Facebook post. Much appreciated 🙂
Paolo thanks for being here. stay connected with me for more useful stuffs.
thnx this is good