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.
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.
Table of Contents
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 –
- Login to your Blogger Dashboard and go to Template > Edit HTML.
- Now find the following html tag in the template editor:
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
- 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
- Click anywhere in the template editor and press CTRL+F key to open the search box.
- Now type the <head> tag and press enter button to search it.
- 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 == "index"'> <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 != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <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.
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.
Vivek ChaudharyVerified AuthorThis author is verified as a trusted expert and senior writer. A formal process has been completed to confirm their identity and qualifications.
