How to Add Caption to Images in Blogger - Figure Caption SEO Method 2026

 

Blogger has no caption option. You add image, no text below. Caption = explains image, helps SEO, gets image rank in Google Image Search, + caption = +15% AdSense CTR because eyes stop.

In Post #125, add captions.

Step 1: Add Caption CSS Once

1. Blogger → Theme → Edit HTML
2. Find ]]></b:skin>
3. Paste above it:

/* Image Captions Post 125 */
.figure{margin:20px 0;text-align:center;}
.figure img{max-width:100%;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,0.1);}
.figure figcaption{background:#f9fafb;border:1px solid #e5e7eb;padding:8px 12px;font-size:13px;color:#555;border-radius:0 0 12px 12px;margin-top:-8px;display:inline-block;width:100%;box-sizing:border-box;max-width:100%;}
.figure-credit figcaption{font-style:italic;}
.figure-overlay{position:relative;display:inline-block;max-width:100%;}
.figure-overlay figcaption{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.65);color:#fff;border:none;border-radius:0 0 12px 12px;}

4. Save theme

Step 2: 4 Caption Styles - Copy Paste in HTML Mode

1. Simple Caption Below Image (SEO Best)

<figure class="figure">
<img src="YOUR-IMAGE.jpg" alt="Blogger dashboard 2026"/>
<figcaption>Fig 1: Blogger dashboard in 2026 - clean and fast</figcaption>
</figure>

Google SEO: Use <figure> + <figcaption> - Google understands it's caption, ranks image higher.

2. Caption with Credit / Source

<figure class="figure figure-credit">
<img src="YOUR-IMAGE.jpg" alt="Template preview"/>
<figcaption>Image credit: Your Blog Name - Free Blogger Template 2026</figcaption>
</figure>

3. Overlay Caption on Image (Pro Look)

<figure class="figure figure-overlay">
<img src="YOUR-IMAGE.jpg" alt="Overlay caption"/>
<figcaption>Blogger Pro Bundle - 200 Templates Inside</figcaption>
</figure>

4. Caption with Link (For Affiliate)

<figure class="figure">
<img src="YOUR-IMAGE.jpg" alt="Hosting discount"/>
<figcaption>Get Hostinger hosting at 80% off - <a href="YOUR-AFFILIATE-LINK" target="_blank">Click here</a></figcaption>
</figure>

Step 3: No Theme Edit Version (Inline)

<figure style="margin:20px 0;text-align:center;">
<img src="YOUR-IMAGE.jpg" alt="Blogger caption inline" style="max-width:100%;border-radius:12px;"/>
<figcaption style="background:#f9fafb;border:1px solid #e5e7eb;padding:8px 12px;font-size:13px;color:#555;margin-top:6px;border-radius:8px;">This is caption without editing theme - inline method</figcaption>
</figure>

Step 4: SEO Rules for Images + Captions

Field	What to Write	Example
Alt Text	Describe image, include keyword	alt="How to add caption in Blogger 2026"
Caption	Human explanation, 1 line	Fig: Blogger image caption example
File Name	Before upload, rename	how-to-add-caption-blogger.jpg not IMG_1234.jpg

Step 5: Auto Caption All Images?

No auto. Add manually for important images only: first image in post, tutorial screenshots, product images. Don't caption decorative icons.

Post #125 Complete.

Next Post #126: How to Create Image Gallery in Blogger - grid gallery without plugin.