Setup Open graph for blogger effectively
Published by Aslam
What is open graph?
Definition for opengraph(from wiki):
As you may already know, there are already meta tags that defines our content, title, description, keyword, and so on. then why opengraph meta tags?The Open Graph protocol enables developers to integrate their pages into the social graph. These pages gain the functionality of other graph objects including profile links and stream updates for connected users.The implications that the Open Graph may have on the web as a whole relate significantly to the idea of search engines. While currently Google still attracts more traffic than any other website, Facebook is a close second. Even without a good internal search engine, Facebook already drives more traffic for some searches, specifically social searches, than Google itself.And in attempting to link Facebook with the rest of the web, the Open Graph is creating Face book's own extensive and highly interactive version of a search engine. Web pages are turned into Open Graph Objects by adding metadata.
as facebook being the fastest growing social community, we have to look at it, and keep our standards to go with the current trends.
open graph is applied everywhere today. in many websites, and in their product pages, in articles, everywhere!
When it get shared, it can visible like a story in facebook timeline and news feed with the details , pictures and content types what the user have shared.
Blogger doesn't automatically create opengraph tag for your blog. maybe that may happen in feature.. but blogger does generate standard meta tags for each blog this time when i write this article,if we include below line in our blog's head.
<b:include data='blog' name='all-head-content'/> Now , we have to tweak our blogger template to generate opengraph tags for each page.
Before that you should be knowing,
Why is it important?
You may thinking why is it important to add opengraph because there are already meta tags which define our description, title, keyword etc.so here is answer for your question.
Assume you own a blogger blog. and you have many articles, pages,and products in your blog.
and you also have a share button ,like button, or a comment plugin that you obtained from facebook.
Someone share your article.
it Shows on their timeline and other friend's feed.
if you have no opengraph meta tag assigned, it will likely jut an writing that make no attraction and just a url.
and When a user likes your article, it will show as a url.
Here we need to apply opengraph tags.
What if someone sees a story in feed, someone have something, followed by a link and article picture, and a small description with it? yes. he will be attracted, and his moue cursor moves to that, and click the story.
How can you set up opengraph in your blog effectively?
You will be surprised if you come to know the full features blogger gives to a blogger.(if you understand the full feature)we can automate the process of generating opengraph tags for each and every post in our blog, each page in our blog, or in the very homepage of our blog. we can do it all once and we have option to do that in simple.
This is how you can setup opengraph for blogger.
Here is Open graph tags for blogger.
Just put this between your <head>` and `</head> tags.
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='"en_US"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>Remember, og:image will only shown if your post contains an image.
Or if you want to show your site logo here if there is no picture in post, you could call an alternate og:image that contains your logo!
Just after all meta tags in your template add below code.
<meta expr:content='http://URL_TO_LOGO.jpg' property='og:image'/>' 
Replace URL_TO_LOGO with the URL to your logo or the default image that to be shown.
Troubleshooting
After done with above code, try to share any of your blog' page .
if you don't know how,below is the way to share a webpage in Facebook.
If you are not able to see any change after adding above code to your blogger template,
Go to https://developers.facebook.com/tools/debug
and type your URL to post, in the field and click on debug, it will refresh cache in Facebook and will reload your post detail from scratch.
Its a pleasing thing that to hear from you about this article. ;)
Recommended link : http://ogp.me
Comments
Post a Comment