AddThis Academy

An ever-growing library of resources to help you become a better online marketer.

How to Add Open Graph Tags Using Blogger

To instruct Facebook and many other services what to show in a share or preview on the Newsfeed, you need to specify Open Graph meta tags. If Open Graph tags aren’t on the page when sharing, an undesirable image or title may appear.

Additionally, Smart Layers uses Open Graph meta tags to determine how to display links to your related posts, and to specify which content is shared from your page.

To add Open Graph tags to your page, you will need to be comfortable with editing your Blogger Template.It is also recommended that you create a backup of your template before making any changes.

To get started, click on Template > Edit HTML within the Blogger menu. From there, you will need to add Facebook’s XML namespace to your page’s initial HTML tag. By default, there will be other namespaces already included, so you will just need to add “xmlns:og=''” to the end. Here’s an example of how the HTML tag may look after you’re finished:

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='' xmlns:b='' xmlns:data='' xmlns:expr='' xmlns:og=''>

After the namespace has been added, the actual Open Graph meta tags will need to be added to the template. To do this, search for “</head>” within the template (CTRL+F for Windows users and Command+F for Mac users).  From here, it’s just a matter of copying the following snippet of code just before the </head> tag.

<!-- Open Graph Meta Tags BEGIN -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
<!-- Open Graph Meta Tags END -->

This will generate Open Graph meta tags for title, description, url, and image (if one exists in the post). If additional Open Graph tags are needed, we recommend that you take a look at the Open Graph Protocol page for more information.

How to Add Open Graph Tags Using Blogger
5 (100%) 1 vote

Was this article helpful to you?