What is Facebook Open Graph Meta Tags, how to use them, and why it is necessary to add them to your blog There are many free blogger templates in which Facebook Open Graph Meta Tags are not added?
Facebook Open Graph Meta Tags is not added in this blogger template, then the post is shared on Facebook by that blog, the thumbnail image of the shared post is not shown on Facebook.
Friends, along with Facebook Open Graph Meta Tags, you should also know about how to create a site map in Blogger and how to add the site to the Google search console.
Must Read: How to Earn Money Online 2021 – 6 best ways to earn money online
Due to Facebook Open Graph Meta Tags, the title of your post is also not shown and the image quality along with the post thumbnail also deteriorates due to which the user has to face a lot of problems due to which any visitor to your site. Doesn’t stay for long.
Facebook Open Graph Meta Tags for Blogger
Before proceeding further in this post, we need to know that what type of attributes is used in Facebook Open Graph, this will not only make it easier for you to understand the attributes, and if you will be able to understand all the functions in it easily, then let’s know. –
- Og tittle- It helps you to improve the title of blogger posts.
- Og URL- It helps you to improve all the URLs of your post.
- Og Image- It improves the image of your post which should be shown on your Facebook
- Og type- It improves the type of your page.
Now we are going to tell you how to add Facebook Open Graph Meta Tags to Blogger.
How to add Facebook Open Graph Meta Tags to Blogger
In detail about how to add Facebook Open Graph Meta Tags to Blogger, we are going to tell you step by step.
Step 1- First of all you have to log in to your Blogger Account.
Step 2– First of all you have to take a backup of your template, after that, you have to click on dashboard>>templet>>edit HTLM of your blogger.
Step 3- In edit HTML, you will see some such code as I have given below, it may also be slightly different in your template.
<html xmlns='http://www.w3.org/1999/XHTML
xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/GML/data' xmlns:expr='http:// /www.google.com/2005/gml/
Step 4- Now you have to copy the code written below and paste it just before the closing tag> of the above HTML code, if you do not have this code in your template then you paste this code.
XMLNS:OG='HTTP://OGP.ME/NS#'
Now, this code will look something like this in your Html editor.
<HTML XMLNS='HTTP://WWW.W3.ORG/1999/XHTML'
XMLNS:B='HTTP://WWW.GOOGLE.COM/2005/GML/B' XMLNS:DATA='HTTP://WWW.GOOGLE.COM/2005/GML/DATA' XMLNS:EXPR='HTTP:/ /WWW.GOOGLE.COM/2005/GML/EXPR' XMLNS:OG='HTTP://OGP.ME/NS#'>
Note- If you are facing any problem in adding the above code, then you can copy the above code and paste it first.
Step 5- Now that you have added Facebook Open Graph protocol tags, now you have to add Facebook Open Graph Meta Tags to Blogger’s template.
Also Read: Top 10 Google Ranking Factors in 2021
Search by typing <head> in the search box by pressing the CTRL+F button, then paste the following code below or after <head>.
<B:IF COND='DATA:BLOG.PAGETYPE != "ITEM"'>
<B:IF COND='DATA:BLOG.PAGETYPE == "STATIC_PAGE"'>
<META EXPR:CONTENT='DATA:BLOG.PAGENAME'
PROPERTY='OG:TITLE'/>
<META CONTENT='ARTICLE' PROPERTY='OG:TYPE'/>
<B:ELSE/>
<META EXPR:CONTENT='DATA:BLOG.PAGETITLE'
PROPERTY='OG:TITLE'/>
<META CONTENT='BLOG' PROPERTY='OG:TYPE'/>
</B:IF>
<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.POSTIMAGEURL' PROPERTY='OG:IMAGE'/>
<B:ELSE/>
<META CONTENT='HTTP://WWW.YOUR-DEFAULT-
THUMBNAIL.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'/>
You have to do some customizing in the above code.
In place of https://www.your-default-thumbnail.jpg, put a link to the logo of the blog, if there will be no image in your post, then this image will be shown when you share your post.
- In place of App ID, put a link to your Facebook App.
- In place of Facebook Profile ID, put the ID of your profile.
Step 6- After customizing the code, click on save the template.
Final word
