How to Add Facebook Open Graph Meta Data in Blogger
Facebook Open Graph Meta for Blogger:
Before we jump to our tutorial, it is essential to learn what terminologies (object properties) are more commonly used in Open Graph. This would not only help you to understanding the attribute but would also help you in learning their functionalities.
- 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.
Step#1: Adding Open Graph Protocol Namespace:
The First thing you need to do is to Login into your Blogger account. Now from the dashboard go to Template >> Edit HTML and search for the following highlighted HTML attribution. (Quick Tip: This code is usually present at the first lines of your template’s coding).
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
Now just next to the highlighted code (as shown above) add xmlns:og='http://ogp.me/ns#'. Once everything is down, it would somewhat look like this. (Quick Tip: Make sure you leave a space between these two codes).
<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
Step#2: Adding Object Properties:
After adding the namespace properly in the template, now it is time to insert the object properties that we have discussed in the very beginning of this tutorial so search for the <head> tag and just below it paste the following chunk of coding. Once everything is done, press the “Save Template” button.
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<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='App-ID' property='fb:app_id'/>
<meta content='Facebook-Profile-ID' property='fb:admins'/>
Congratulations: Facebook Open Graph Meta Data is successfully added to your Blogger blog.
You might be curious to know whether you everything right or not, so if you want to learn how the content would look when you will share on Facebook then test your URLs in Facebook Debugger that works exactly like a Google Rich Snippet tool. It displays the errors and provides you a small preview of your content.
On the second note, most of the templates are not optimized for Open Graph, so you do need to get this job done yourself no matter whether you use a Custom or default Blogger templates. However, these tags do not help you to rank well in the Search engine results. These are just to help Social crawlers to fetch the right content from your site.
We are confident that this article would help you in tackling the bugs which you probably face while sharing your content on Facebook. However, if you know a better way of doing this then do share it with us by leaving a comment below.