Facebook Open graph tags for blogger - OG Image is too small. Can I designate full size image instead of thumbnail?

Question

Blogger does not allow you to designate an open graph image in each post. Currently, there is a piece of code in the template that designates the automatically generated thumbnail as the open graph image for facebook. The problem is, the thumbnail image is 72*72 and Facebook now requires at least a 200px width in the OG image or it defaults to the first image on the page that meets the criteria, which is my header image.

My question is this: Can I amend this code in my template to designate the full size image in the post instead of the generated thumbnail? If so, how? Thank you so much if you can help!

Answer 1

I know this is an old question (2 years ago), but I hope my answer can help other peoples when they are looking for a solution.

Currently, we are using this code to create thumbnail when sharing links on Facebook:

<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

And Blogspot will generate the HTML code looks like this:

<meta property="og:image" content="http://1.bp.blogspot.com/-t5-HTAnnThU/Vicp0SSNPeI/AAAAAAAACZw/9lbrjwRY64A/s72-c/get-free-xyz-domain.png" />

Yes, as you said, it is a 72x72 image. But did you know that we can change the image size based on the image URL?

When you replace s72-c to w600-h315-c (600x315):

Now, the problem is how we can replace the new link? I used the following tricks:

<meta expr:content='"http://junookyo.freevnn.com/?img=" + data:blog.postImageThumbnailUrl' property='og:image'/>

And here is the simple PHP code:

<?php

if (isset($_GET['img']) && filter_var($_GET['img'], FILTER_VALIDATE_URL)) {

    $img = $_GET['img'];

    if (strpos($img, '/s72-c/') !== FALSE) {

        $img = str_replace('/s72-c/', '/w600-h315-c/', $img);

        header("Location: {$img}");

    }

}

exit;

The final result:

Read my blog post for more details.