If you share your blog post on Facebook, you can sometimes find trouble in sharing blog posts correctly. I mean to say incorrect post title, thumbnail, or missing post description. You have to use Facebook Open Graph meta tags or Schema.org meta tags to correct this problem. I have already shared information about Schema.org meta tags. In this article, we’ll learn how to use Facebook Open Graph meta tags for Blogger/Blogspot blogs.
Most web searches show that Facebook Open Graph does not have the full potential to work perfectly. We are bringing this to you after long research and hard work. It has been tested on many blogs before publishing it here. We are using this Open Graph code on Blogspot blogs.
What’s New in Our Open Graph Meta Tags?
1. This Facebook Open Graph code works on Blogger’s Index Pages, Item Pages, and Static Pages.
2. Two “og:type” one for Home page and other for Item & Static Pages
3. “fb:admin” and “fb:app_id” to control other apps like Facebook comments.
4. “og:locale” and “og:locale:alternate” to define blog language and alternate languages.
Steps to use Facebook Open Graph meta tags for Blogger/Blogspot
1. Find <head> in your Blogger template and replace it with the following code –
<head prefix='og: http://ogp.me/ns# fb: http://graph.facebook.com/schema/og/ article: http://graph.facebook.com/schema/og/article'>
2. Now paste following Facebook Open Graph meta tags below new <head> tag it –
<b:if cond='data:blog.pageType != "index"'> <meta expr:content='data:blog.title' property='og:site_name'/> <meta expr:content='data:blog.pageName' property='og:title'/> <meta content='article' property='og:type'/> <b:else/> <meta expr:content='data:blog.title' property='og:title'/> <meta content='blog' property='og:type'/> </b:if> <meta expr:content='data:blog.metaDescription' property='og:description'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> <b:else/> <meta content='http://blog-img-url' property='og:image'/> </b:if> <meta content='1020412247' property='fb:admins'/> <meta content='348446671899960' property='fb:app_id'/> <meta content='en_US' property='og:locale'/> <meta content='en_GB' property='og:locale:alternate'/> <meta content='hi_IN' property='og:locale:alternate'/>
3. Save the template, and you’re done.
Note: Must change highlighted values as per your requirement. Replace this value http://blog-img-url with your square blog logo to show when there is no image in a blog post. Standard image size is 1000px by 667px.
If you want to get your Facebook Admin/User ID, you can read this post – How to find Facebook user ID?
Learn More About Facebook Open Graph
If you have more interest in Facebook Open Graph meta tags, please go to this official page, where lots of resources are available in detail to guide you.
After using OG meta tags, you can test it with Facebook Sharing Debugger.
GitHub’s gist – https://gist.github.com/vinayprajapati/5900461
If you cannot see the correct link preview of a blog post or web page. You should learn more about using Facebook Debugger to Update link preview.
Facebook Open Graph meta tags integration is possible with Blogger/Blogspot. After injecting these meta tags in a Blogger theme, we don’t find errors.
- Social crawlers crawl blog posts without errors
- Blog post sharing on Facebook, Twitter, and LinkedIn work perfectly
- Post title, description, and thumbnail appear correctly
Please, don’t forget to share this post with friends.
15 thoughts on “How to Use Facebook Open Graph Meta Tags for Blogger/Blogspot?”
fb:app_id is necessary ?
It’s necessary only when you use Facebook social plugins like Like Box, Recommendation Bar, Comments etc. But I recommend you to use it.
Most welcome Emad!
Do you know something about “data:post.firstImageUrl”?
Yes of course! please tell me what you want to know?
How to use it with twitter cards?
Give me some time I will write a post about it. Regards!
Even if I do that, I still see something like that when I clicked AddThis Facebook share button :
We need to replace it with hompage og (-http://blog-img-url) right?
Yes, you need to use an image for homepage OG.
Great tips. Thanks for sharing your thoughts about meta tags. Very helpful and informative.
Those who use Facebook are well known for the importance of tagging on Facebook. Tagging is sharing some necessary information with those linked to your Facebook account.