In this article, I will show you how to add a custom featured image to the
homepage of your Blogger website.
By default, when you share the homepage link on 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.
First, make sure to back up your Blogger theme file. This way, if you make any
mistakes, you can restore it to its original state.
After taking a backup, find and remove the Open Graph meta tags in your
Blogger theme.
Then, you can use the code below or paste it directly into 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>
Make sure to replace the Image URL with your own featured image
Related Posts
For a complete guide, I recommend watching the video below to see the entire
process.
After following these steps, you should have successfully set a custom
social media preview image or Open Graph image for your Blogger website's
homepage.
If you need a complete set of Open Graph meta tags, including post title,
meta description, and Open Graph image, you can use the code below:
<!--[ 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>
Remember to change the Image URL to your own featured image. Also, remove
your existing tags if you want to use this in your theme.
If you have any questions, feel free to ask me in the comments section.