The Open Graph Protocol help web pages to integrate into social graph and for SMO. It combines all the unstructured data of a page into a structured information so that the page can be defined how it will be represented on social networking sites. According to Facebook, if you include Open Graph tags, you will have the ability to treat your page same as Facebook Page Or Profile ID Codes Graph..
If you have added Plus One button and/or Like button Or Send Button and ever share your blog, you will experienced some time that there will be a error like “The page at [URL] could not be reached.” So now this meta tags, you can fix these too then you may want your page to get integrated into the social graph of Google+, Facebook and other social sites when they are shared. WordPress has many plugins but users of Blogger needs to add Open Graph protocol Meta tags manually to Blogger and also websites owner also have to do it manualy and to its post pages by editing the template.
Table of Contents
What Is “Open Graph Protocol”?
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 Facebook’s own extensive and highly interactive version of a search engine. Web pages are turned into Open Graph Objects by adding metadata. As an example, the following is the Open Graph protocol markup for ie: Keyboard on Software Master Center.
So without any more preface and info, here are the meta tags tutorial for blogger and website, so through seeing features list, just add it now and make your blog responsive fore social media.
Features:
1.) Simple And Awesome Code.
2.) Easy To Add And Better In Use.
3.) Best For Social Sharing Sites Like FaceBook And GooglePlus.
4.) It Will Select The Correct Data From Your Blog To Share.
5.) Also Fixed Facebook Error : “The page at [URL] could not be reached.”
6.) Important Meta Tags For SMO.
Basic Object Types And There Properties:
- og:title: This condition represents the title of your posts, blog, etc.
- og:url: This represents the URL of your posts, homepage, etc.
- og:image: This conditions represents the image that should be displayed on Facebook.
- og:type: It represents the type of your page. For example, on the homepage we use “blog” and on article pages we use “article” attribute.
- og:description: It represents the description of your page.
- fb:admins – Your Facebook Profile ID or Username
- fb:app_id – The Application ID provided by Facebook App
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search <html… Code.
7.) Now Copy The Below Code And Paste It In <html… Code Like “<html xmlns:og=’http://ogp.me/ns#’ …“.
xmlns:og='http://ogp.me/ns#'
8.) Now Again Press [CTRL+F] To Search </head> Code.
9.) Now Copy The Below Code And Paste It Before </head> Code.
<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'/>
10.) Click “Save Template” And Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between “<head> </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" />
3.) Edit It With Your Data And Save It, Now You Are Done.
If you want to add it in WordPress then read our next article at Add “Open Graph Protocol” Meta Tags In WordPress Without Plugin.
Check Your Meta Tags:
To check if you have applied all the Open Graph <meta> tags correctly to Blogger, visit Facebook Debugger and enter your blog post URL to see what you did right and what’s wrong..
Thanks Admin Its Nice Tutorial . And Working Perfect
Welcome here and thanks for liking our article. Stay with us to get more like this…