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…
