Usually, Facebook is quite clever in gathering the right data for your posts as soon as they are shared on Facebook. However, we have seen a lot of users complaining about the fact that Facebook is not putting the right thumbnail image whenever someone shares it on Facebook or presses the like button. Few peoples also have some concerns that sometime it does not even fetches the right page title, etc. In this article, we will show you 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).
Now just next to the highlighted code (as shown above) addxmlns: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).
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.
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 inFacebook 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 bellow.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
No comments