How To Add Facebook Open Graph Meta Tags In Blogger 2022

How to add a Stylish Note Block [Notebox] in any Blogger Template

Published by Peter Ogunleye On June 25, 2023

Adding a stylish note block , also known as a notebox , to your Blogger template can greatly enhance the visual appeal and user experience of your blog. Noteboxes are effective tools for highlighting important information, providing additional context, or drawing attention to specific content. Whether you want to share tips, reminders, or important announcements, incorporating a notebox in your Blogger template can make your content more engaging and visually appealing. In this guide, we will walk you through the step-by-step process of adding a stylish note block to any Blogger template, allowing you to customize and personalize your blog to better suit your needs. Let's dive in and discover how you can create eye-catching noteboxes that will captivate your readers and make your content stand out. Brief Overview A stylish note block, also known as a notebox, is a visually appealing element that is added to a blog or website to draw attention to specific content...

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!😍

Report Abuse

How to add a Stylish Note Block [Notebox] in any Blogger Template

TechBrainaic

How To Add Facebook Open Graph Meta Tags In Blogger 2022

What Are Open Graph Meta Tags?

Importance of Open Graph Meta Tags

How To Setup Open Graph Meta Tags In Blogger

Conclusion

That's All

About the Author

Post a Comment

How to add a Stylish Note Block [Notebox] in any Blogger Template

TechBrainaic