Setting up blog pages' default thumbnail for social media sharing.
The official Blogger template uses the first image in the blog post for social media thumbnail. There's no default thumbnail for blog posts, as well as multi-items views (homepage, search page, archive).
To set up a default thumbnail for social media sharing, you will have to update the template code.
Template Code
Update the <head> block of your template as follows, and replace the defaultImageUrl value with your desired image URL.
<head>
<!-- ... -->
<!-- tags: # thumbnail -->
<b:with var="defaultImageUrl" value='"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7iHnjS0s8ZibXxv564iww0JXHrTFWUs3a52GjMrkdn8kMrpsL7HDKuZ0mykEX9bITlZ9hmv8Dpe8qMMkELKu85tpWoamjcJumZ0WGytG-wrhQpzkr4pvel-iZ0uVq1DXR79t9PieFVVmBg-KaHOCiVI_l3W4gp0m_SvmFDOwdwqpSyrA/s128/pixel-cat.png"'>
<b:if cond="data:blog.postImageUrl">
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:defaultImageUrl' property='og:image'/>
</b:if>
</b:with>
<!-- ... -->
</head>The thumbnail image used in this example is a 128x128 pixel cat hosted in this blog.
 |
| Example thumbnail image: pixel cat. |
After updating the template, check the social media preview of your blog using opengraph.io, If the link that you check is a multi-items view or a blog post that doesn't have images, it should detect the default thumbnail that you've set.
 |
| Validating default social media thumbnail. |