Get Facebook to show feature image for your Blog's Homepage

Facebook seemingly exclusively uses Open Graph protocol (og:image)  tags to determine which image to feature. As a result, sharing your content to Facebook from blogspot has no image or a broken image for the homepage.

To fix this, you can explicitly specify the feature image on feed pages.
  1. Select your image, and copy the URL
  2. Go to Template => Edit HTML
  3. Search for the 'all-head-content' tag
  4. Underneath that tag, add the following XML, replacing [Your image URL] with the URL of the image you want to feature.
    Note: Make sure to leave the single AND double quote-marks wrapping the URL.
<b:if cond='data:view.isMultipleItems'>
  <b:with var='image'
          value='"[Your image URL]"'>
    <meta property='og:image'
          expr:content='resizeImage(data:image, 1200, "1200:630")' />
  </b:with>
</b:if>

Resizing the Feature Image

If the image you have uploaded is hosted on a Google product, it can be resized to the dimensions that Facebook recommends (1200x630). If it is not correctly resizing, upload the image to Blogger (in the post editor) and get the URL from there, and try again.

How it works

Take, for example, this 'Medium' image which I've added to this post.



Its url is

https://1.bp.blogspot.com/.../s320/PANO_20140810_102814.jpg

In bold is /s320/, we see the sizing parameters of the URL - s320. If we change this to be w1200-h630-p-nu (width 1200, height 630, smart crop and no upscale), we get a nice feature image for facebook. (You can follow the link to see the size it displays at.)

https://1.bp.blogspot.com/.../w1200-h320-p-nu/PANO_20140810_102814.jpg

Note that for this to work, you'll need a nice big original image.

Happy Blogging!

Comments

  1. Hi! Tried doing this, but its not helping! Pl suggest

    ReplyDelete
  2. Could you please help me out?
    Here is a link :)
    http://lifexplorers.net/switched-32kg-luggage-backpack/

    ReplyDelete
    Replies
    1. You have a bunch of og:image tags on that page (you can see this if you right-click and view source). Which image are you wanting to be the FB feature image?

      Delete

Post a Comment

Popular posts from this blog

Remove the header image for posts in Emporio

Rotate my Blogger images

Add snippets to the Emporio theme