Setting the 'featured' image for Open Graph (Facebook) og:image tag in Blogger

After a year of defaulting to my less than flattering profile pic (put there on purpose - I'm not showing off my personal looks, eh?) a coworker encouraged me to dig in and figure out how to set the Open Graph tags to use the image in the post, rather than the default image for sharing.

 

Namespace

First you have to add the Open Graph Namespace. You are going to do all of this in the HTML editor for your blog template:

 

In the HTML you 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='http://ogp.me/ns#' 

Adding the Open Graph Tags

Scroll down in the HTML and just before the closing </head> tag, add the code that will pull images, titles, descriptions and more:

<!-- 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'/>
</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 -->

Testing Your OG tags on Blogger

Save your template, and you can test by finding a post with an image in the body of the post and taking it to the Facebook Developers Tool, or Facebook Lint.  Paste your post URL in the provided URL box, submit, request it to be scraped, or re-scraped, and you'll see what Facebook and most other sharing services will display when your link is shared.  I've tested this in Facebook and Slack, both work.

Twitter

Twitter does not follow the OG standard and has Twitter Card Tags all of it's own.  Sigh.  Fortunately, it's easy to add them into your blogger template code to create a 'Twitter Card' when your content is shared.

Add in to your meta tags along with to Open Graph tags Twitter specific tags for what kind of content you're sharing, the URL, and title of the post,

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" expr:content='data:blog.canonicalUrl' />
<meta name="twitter:title" expr:content='data:blog.title' />

Then add your Twitter handle and the web domain you want displayed on the Twitter card:

<meta name="twitter:site" content="@willengland" />
<meta name="twitter:domain" content="wxexw.blogspot.com" />

Next, in the post image condition, after the OG:Image tag, add the Twitter image tag; be sure to add a default image as well, like we did for OG tags.

<meta name="twitter:image:src" expr:content='data:blog.postImageThumbnailUrl'/>
<meta content='https://example.com/path/to/default-img.jpg' name="twitter:image:src"/>

 After all your image condition and default image OG and twitter tags, set a size:

<meta name="twitter:image:width" content="760" />
<meta name="twitter:image:height" content="380" />

and add a Twitter description after your OG description:

<meta expr:content='data:blog.metaDescription name="twitter:description" '/>

And that's it.  One problem you may run into if you are using an older fixed width template is the images you add are smaller than what Twitter expects, creating a pixilated display image. Try for 720px wide, if that fits your template, for your first image in the blog. Your finished card can be tested in the Twitter card debugger and should look something like this (note my pixilated image; it's well under 720px on the blog post):

I hope this helps you to properly tag your Blogger site for social sharing!

- Will England