How To Add Facebook Open Graph Meta Tags In Blogger 2022

In a Simple term Open Graph Meta Tags are small snippets of codes that control how URLs are displayed when shared on social media.

As a Blogger sharing your blog contents on social media platforms like Facebook and Twitter is one of the easiest means to drive traffic to your blog and improve your blog domain authority in search engine ranking.

If you are blogging on Google Blogger/Blogspot and using the default or an old Blogger template you might discover that post thumbnails is not visible when you shared any of your blog post on Facebook or Twitter. This is simply because Open Graph Meta Tags are not added to header section of your blog.

In one of our recent updates I shared with you How to Add Social Media Icon in Blogger so today I have prepared and will be sharing the easy step by step guide to add Facebook and Twitter Open Graph Meta Tags In Blogger with any hassle. Just follow all the guidelines listed in this article.

Before we begin we need to understand what open graph meta tags are, what they does and how to Integrate them in Blogger.

What Are Open Graph Meta Tags?

Open Graph Meta Tags also known as social media tags are small snippets of code introduced by Facebook so as to improve the integration between Facebook and other websites thereby allowing any web page to have the same functionality as any other object on Facebook. In a more simple term Open Graph Meta Tags are code that control how URLs are displayed when shared on social media.

Ultimate Guide on How to Add Social Media Icon in Blogger

How to Integrate WhatsApp Chat Widget on Blogger

You can find them in the <head> section of your Blogger template and are usually indicated by the og: meta property

Below is an example of a blog post shared on Facebook with Open Graph Meta Tags added

Post Shared on Facebook

Importance of Open Graph Meta Tags

Open Graph Meta Tags make your posts shared on social media more attractive, clickable, and understandable. This leads to more website traffic and thereby improves brand visibility.
Og tags help Facebook and other social media to understand what the content is about, which can help increase your Blog and brand visibility in Search Engine.

How To Setup Open Graph Meta Tags In Blogger

Step 1. Log in to your Blogger Dashboard, Choose the blog you what to add Og meta tag to.

Step 2. Goto Themes > Edit HTML and click the gear icon beside Customize.

How To Add Open Graph Meta Tags In Blogger

edit blogger template

Step 3. Click anywhere inside the template HTML code,Use CTRL+F and search for <head> (It is often refer to as head tag).

Step 4. Copy and paste the following code just below the head tag

HTML

<!--[ Open graph ]-->

    <meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:title'/>

    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>

    <meta expr:content='data:blog.title.escaped' property='og:site_name'/>

    <b:if cond='data:view.isMultipleItems'>

      <meta content='website' property='og:type'/>

      <b:if cond='data:blog.metaDescription'>

        <meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>         

        <b:else/>

        <meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' property='og:description'/>

      </b:if>

      <b:else/>

      <meta content='article' property='og:type'/>

      <b:if cond='data:blog.metaDescription'>

        <meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>            

        <b:else/>

        <meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' property='og:description'/>

      </b:if>

    </b:if>

    <meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:image:alt'/>

    <b:if cond='data:blog.postImageUrl'>

      <meta expr:content='resizeImage(data:blog.postImageUrl, 0)' property='og:image'/>

      <b:else/>

      <meta content='Add Blog Image URL' property='og:image'/>

    </b:if>

Step 5. Replace [Add Blog Image URL] with your blog image URL.

Note: This image will be visible when your blog is shared on Facebook and other social media.

Step 6. Lastly save the theme.

Conclusion

Incase you have not added Og meta tag to your blogspot blog use, then you should quickly add it so as to make your blog contents user friendly with a perfect appearance.

How to Add Custom Permalink on Blogger for Better SEO

How to Create Contact Us Page in Blogger

Hope I was able to make you understand How To Add Open Graph Meta Tags In Blogger. And if you still have any issues related to this post, feal free to ask me in the comments, I would be happy to answer!

Warning!

All Our Posts Are Protected by DMCA. Therefore Copying Or Reproducing Of The Contents Of This Blog Without Our Permission Is Highly Prohibited!

If Found, Legal Action Will Be Taken Against Offender.

That's All

Thanks for reading our blog

Have a great day ahead!😍

About the Author

A Young Nigeria Blogger Who Love Sharing His Knowledge And Idea With Others❤️

#blogger-setups #Blogging #Meta tags

Report Abuse

Threads app: Meta Officially Launches Twitter Rival

How To Setup Bookmark Post Widget in Blogger

How to Disable Active Status on Instagram: A Comprehensive Guide

TechBrainaic