Would you tell me how to set a custom Facebook thumbnail for a blogger page? When shared to Facebook, I want the first image on the page to appear as a thumbnail, but it gives me the image I have for my homepage. I also want to change the og:title to exclude my site’s name. I tried to add some coding in the HTML of my template, but I couldn’t do it without changing the thumbnail for my site’s URL. If this is the way, how to do it correctly?
What you are asking for is OpenGraph tags For Facebook which tells Facebook what title, Description summary snippet and Thumbnail image to pick. You need to add the following code inside your template just below <head> tag
Note that you need to replace http://downloads.mybloggertricks.com/logo.png with your blog logo and this logo will appear only for your homepage thumbnail. For Posts, facebook will pick an image randomly from your post body using the tag data:blog.postImageThumbnailUrl . Facebook also then give you options to pick your prefered image if you have added multiple images on your post. To ensure facebook picks the first image of your blog post , make sure you use a good quality image in JPEG format with atleast 450px width. Facebook often avoids picking small resolution images.
The above code will also deliver the correct Post title to Facebook and Post description.
If you are also looking for showing rich snippets in Google+ correctly then you must also install the microdata tags be reading this post
Thank you very much! It really corrected the thumbnail of the page, but this code created another problem - now the thumbnail of my homepage is not shown anymore through the Facebook debugger. I chose a bigger picture as a thumbnail, but it is still not among the images that could be chosen as a Facebook post thumbnail. It tells me:
Extraneous Property: Objects of this type do not allow properties named ‘og:image:src’.
Parser Mismatched Metadata: The parser’s result for this metadata did not match the input metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple values being given for a property only expecting a single value, or property values for a given property being mismatched. Here are the input properties that were not seen in the parsed result: ‘og:image:src’