How to add Custom Thumbnails in Blogger?

By default, Blogger automatically grabs the very first image inside your blog post and uses it as the "Featured Thumbnail" for your homepage, related posts, and social media platforms like Facebook or Twitter.

But what if you designed a beautiful custom thumbnail with a large title for your homepage, but you don't want that massive image sitting at the very top of your actual written article?

You need to hide it. However, hiding images the old way (style="display:none") can hurt your SEO because Google largely ignores images that are set to "display none". Instead, you should use the modern "Visually Hidden" technique, which tells screen-readers and search engines the image exists, while keeping it perfectly invisible to your readers.

Here are the two easiest ways to do it:

Method 1: Using the Blogger Image Optimizer Tool (Recommended)

If you don't want to mess around with confusing CSS code every time you publish an article, you can use our free Blogger Image Optimizer Tool.

This tool automatically generates the perfect SEO-friendly visually hidden HTML code for your thumbnails. Bonus: it can also convert your standard in-post images into lightning-fast, lazy-loaded formats for a massive Core Web Vitals boost.

Here are the steps to use the thumbnail generator:

1. Open the Blogger Image Optimizer and select the Hidden Thumbnail Generator tab.
2. Paste the URL of your uploaded image.
3. Add a descriptive Image Title (this acts as your Alt Text for SEO purposes).
4. Click on the Generate HTML button, and then click Copy Output.
5. Finally, go back to your Blogger Post, switch to HTML View, and paste the copied code at the very beginning of your article.

Method 2: The Manual Way (Visually Hidden CSS)

If you prefer not to use the tool, here are the exact steps to manually add an SEO-friendly hidden thumbnail to your post:

1. Go to Blogger and create a new post or edit an existing one. Next, switch to the HTML View by clicking the < > icon at the top left corner of the editor.
2. Upload the image you want to use as your thumbnail via Blogger's image upload tool. Once it is uploaded, copy the URL of that image to your clipboard and delete the image from the editor.
3. Paste the following HTML code at the very start (Line 1) of your HTML code:

<div style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;">
  <img src="YOUR-IMAGE-URL" alt="Your Post Title" width="100%" />
</div>

4. Replace YOUR-IMAGE-URL with the image link you copied earlier, and change Your Post Title to the actual title of your article.
5. Switch back to Compose View and write the rest of your post content as usual! You won't see the image in the editor, but Blogger's engine and social media platforms will perfectly recognize it as your featured thumbnail.

Conclusion

Adding a custom thumbnail in Blogger posts gives you massive control over your blog's design and click-through rates. By using the modern visually hidden technique—either manually or by using the Blogger Image Optimizer—you ensure your blog stays beautiful, your social shares look professional, and your SEO remains intact.