Home
Blogger

How to Show a Custom Social Preview Image for Blogger/Blogspot Homepage

How to Show a Custom Social Preview Image for Blogger/Blogspot Homepage


In this article, I will show you how to add a custom featured image on the homepage of your Blogger website. By default, Blogger uses the image from the first blog post on your homepage, but you can set a custom image to make your homepage look more professional and attract more visitors.

To do this, I recommend you back up your Blogger theme file first. This way, if you make any mistakes, you can always restore your theme to its original state. Once you have backed up your theme file.


Add Custom Social Preview Image for Blogger Homepage

Now you can use the below code in place of that or you can directly paste it in the<head>section

<b:if cond='data:blog.postImageUrl'>
  <meta expr:content='resizeImage(data:blog.postImageUrl, 0)' property='og:image'/>
  <b:else/>
  <meta content='IMAGE_URL' property='og:image'/>
</b:if>


Warning: Don’t forget to change the Image URL of your own Featured image.

I hope you have successfully set a custom social media preview image or Opengraph image for homepage in blogger website.

Conclusion

Adding a custom social preview image to your Blogger/Blogspot homepage is a simple way to make your blog look more professional and attract more visitors. By following the tips in this article, you can create a custom social preview image that will help you achieve your blogging goals. I hope this helps!