Adding the Open Graph Protocol in your Blogger or Blogspot Blog

by gprialde Banned
0 replies
  • WEB DESIGN
  • |
Adding Open Graph metadata to Blogger is easy. Simply copy the code below and paste it into your template after the <header> tag.

A few notes:

1. og:locale Should probably actually reflect the blog's locale instead of just being a hardcoded string. Unfortunately, Blogger only gives us en-us with a hyphen, instead of an underscore, so that won't work.

2. If you're using your blog as a personal profile, you may consider changing the second og:type from website to profile and adding your personal information

3. og:image Is only supplied if Blogger finds an image in the current post. However, not supplying og:image is invalid. You could provide an alternate image of your blog logo, or a Gravatar.

<!-- Begin Open Graph metadata -->
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>

<meta expr:content='"en_US"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- End Open Graph metadata -->

After adding the code above simply copy and paste the button or widget code anywhere in your website.

Cheers!
#adding #blog #blogger #blogspot #graph #open #protocol

Trending Topics