How to Add Open Graph Tags to Blogger Website

How to Add OpenGraph Tag

By default blogger themes don’t have open graph tags. So, they don’t show a preview on social media like facebook and so on. To show a preview in social media you need to add open graph tags. Open graph tags are nothing but some meta tags representing post title, post description, post thumbnail, post url and such on. Open graph shows them in a universal way. So, most website is able to recognize the post preview.

What is the Benefit of Open Graph Tags

Open graph tags shows your post preview while sharing to a social media. If your post don’t have a preview but just a link then you will not get much click from the site. Because a link without preview is not trusty. Moreover major search engines including google, being, yahoo seek whether your open graph tags are completed or not. So your open graph tags has a great impact on your site SEO. If you don’t have any open graph tags then your site will be indexed behind likely.

How to Add Twitter Open Graph Tags to Blogger

You need a add some html meta tags to your theme. Here are the steps for how to do that.

  1. Go to theme tab. Click on the dropdown menu just aside of your theme preview and right of “Customize” button. You will see a option “Edit HTML”. Click on This.
  2. An XML file will be opened. Seek for starting <head> tag. This will be appear in very first of your file. Almost in first 5 lines.
  3. Paste the code below just after the head tag. And save the file. Then check into Open Graph Validator to check whether your twitter card is ok.
<!-- Open Graph Meta Tags BEGIN -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta property="og:type" content="website"/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<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'/>
</b:if>
<!-- Open Graph Meta Tags END -->

See Also: How to Add Twitter Cards Tags to Blogger Website