14 July 2018

How to Add Facebook Open Graph Meta Tags in Blogger

Leave a Comment
Facebook is smart enough to automatically fetch the data from any website link that people share on its platform. But sometimes, it doesn't pick up the right title, thumbnail image or description from your website.

To solve this issue, Facebook introduced open graph tags for web content creators. The open graph meta tags allows you to manage what content you want to show on Facebook when people share your website link.

Add Facebook open graph meta tags in Blogger

You can help Facebook to fetch the right information (such as title, description, thumbnail image etc.) from your website. The open graph tags are similar to the Twitter summary card tags and rich snippets of the search engine.

Types of Facebook Open Graph Tags


Here are some basic Facebook open graph tags that are mandatory to include in your Blogger website -

Open Graph tagDescription
og:titleThe title of the webpage or article.
og:urlThe canonical url of the webpage.
og:descriptionA short description of the webpage or article (the optimal character length is 150-160 words).
og:imageThe url of the thumbnail image that appears when your content is shared on Facebook.
og:typeThe type of the webpage such as website or blog.
og:site_nameThe full name of your website.

Add Facebook Open Graph Meta Tags in Blogger


Blogger has already added three Facebook open graph meta tags (og:title, og:image and og:description) in the head section of your blog. Make sure that this code is present in your template: <b:include data='blog' name='all-head-content'/>

Now you just need to add the remaining Facebook open graph tags in your Blogger blog. Simply follow this guide -

Part 1:Adding open graph xml namespace in your Blogger template -
  1. Login to your Blogger Dashboard and go to Template > Edit HTML.
  2. Now find the following html tag in the template editor:
    <html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
  3. Next to the highlighted code, add this attribute: xmlns:og='http://ogp.me/ns# Now the html tag will look somewhat like this -
    <html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
You can skip this part if the open graph xml namespace is already present in your Blogger template.

Part 2: Adding open graph meta tags in your Blogger template
  1. Click anywhere in the template editor and press CTRL+F key to open the search box.
  2. Now type the <head> tag and press enter button to search it.
  3. Just below the <head> tag, add the following code and then click "Save template" button. That's it.
    <!-- Facebook OpenGraph meta tags by Geek Instructor -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <meta content='blog' property='og:type'/>
    <b:else/>
    <meta content='article' property='og:type'/>
    </b:if>
    <meta content='your-blog-name' property='og:site_name'/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <meta content='your-blog-cover-pic' property='og:image'/>
    </b:if>
    </b:if>
Note: You have to replace the highlighted text in the above code -
  • Replace your-blog-name with the name of your website or blog.
  • Replace your-blog-cover-pic with the url of your blog cover picture. It will appear on the homepage and archived pages of your Blogger blog.

How to validate Facebook open graph tags


To check if all Facebook open graph tags are working properly on your Blogger blog, you can use Facebook Sharing Debugger tool.

This tool lets you preview how your content will look when it's shared on Facebook and debug any issues with your open graph tags. Simply enter any valid URL of your Blogger website and tap "Debug" button.

Facebook Sharing Debugger preview
We hope you find this guide helpful to add Facebook open graph tags in your Blogger blog. If you are facing any problem, feel free to share it in the comment section.

Leave A Comment