How to Add Facebook Open Graph Meta Tags in Blogger

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 tag Description
og:title The title of the webpage or article.
og:url The canonical url of the webpage.
og:description A short description of the webpage or article (the optimal character length is 150-160 words).
og:image The url of the thumbnail image that appears when your content is shared on Facebook.
og:type The type of the webpage such as website or blog.
og:site_name The 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=''>
  3. Next to the highlighted code, add this attribute: xmlns:og=’ Now the html tag will look somewhat like this –
    <html xmlns:og='' ...... xmlns: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'/>
    <meta content='article' property='og:type'/>
    <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'/>

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.

About the author

Vivek Chaudhary Author
Content marketer & founder @Geek Instructor. With over a decade of experience, I have written over 1500 articles covering a wide range of topics. I am passionate about sharing my tech knowledge with others. Personally, I love travelling and making YouTube videos.

Leave a Comment

Your email address will not be published. Required fields are marked *