How to show a Custom social preview image for Blogger Homepage
In this article, I will share with you the technique of how to add a custom featured image on the homepage of a Blogger website.
By default, when you share the homepage link in Blogger, it shows the image from the first blog post, but you can set a custom Open graph thumbnail or social preview image for the homepage.
For this, I recommend you take a backup of your Blogger theme file and proceed with the below steps. so, if you do any mistake, you can take it back to its original state.
Now, After taking a backup, you need to find the open graph meta tags on your Blogger theme and remove them.
Now you can use the below code in place of that or you can directly paste it in the head section. ( just below the <head> tag.)
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='resizeImage(data:blog.postImageUrl, 0)' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/a/AVvXsEhRIlFWAORv1K9tXw1ATtxWD4Bjze6rnCgAg21bHo8plqkZ-L5qaFeMeYJj4a-vUB31E__lPzkb61f6Mr3iBPNs1qgLITbXX3ivQRyoCOOZ9_s6eJIad427AF5f655Jd3XaYgsMTUTt0Ujp7MDnJQuC55TmWeLKfNa2c2tsv1O3QTqG0laaRIYqSDCI4A=s16000-rw' property='og:image'/>
</b:if> Don’t forget to change the Image URL of your own Featured image.
I recommend you to follow the below video to check the complete process
I hope you have successfully set a custom social media preview image or Opengraph image for homepage in blogger website.
If you want to get a complete Open Grpah Meta tags including Post title, Meta description, Open Graph image etc you can take a look at the below code.
<!--[ Open graph ]-->
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title.escaped' property='og:site_name'/>
<b:if cond='data:view.isMultipleItems'>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<b:else/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' property='og:description'/>
</b:if>
<b:else/>
<meta content='article' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' property='og:description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:image:alt'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='resizeImage(data:blog.postImageUrl, 0)' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/a/AVvXsEhRIlFWAORv1K9tXw1ATtxWD4Bjze6rnCgAg21bHo8plqkZ-L5qaFeMeYJj4a-vUB31E__lPzkb61f6Mr3iBPNs1qgLITbXX3ivQRyoCOOZ9_s6eJIad427AF5f655Jd3XaYgsMTUTt0Ujp7MDnJQuC55TmWeLKfNa2c2tsv1O3QTqG0laaRIYqSDCI4A=s16000-rw' property='og:image'/>
</b:if> Don’t forget to change the Image URL here, And Remove your existing Tags if you want to use this in your own theme.
If you have any doubts, you can ask me in the video comment section or In Our Telegram Group.
If you are new to Our Community, don’t forget to Subscribe our YouTube channel. Thank you for being a part of Key2Blogging Community.
