← Back to Guides

🖼️ Image Alt Text

Drive 10-15% more traffic from image search + improve accessibility

💡 Why Alt Text Matters

Alt text (alternative text) serves two critical purposes:

  1. Accessibility: Screen readers use alt text to describe images to visually impaired users
  2. SEO: Search engines use alt text to understand and rank your images in Google Image Search

Impact: Images with descriptive alt text can generate 10-15% of total site traffic through image search. Plus, it's legally required in many countries for accessibility compliance.

✅ Good Alt Text vs ❌ Bad Alt Text

❌ Bad Examples

<img src="hero.png" alt="image">
<img src="screenshot.jpg" alt="">
<img src="logo.svg">

Why bad: Too generic, empty, or missing entirely

✅ Good Examples

<img src="hero.png" 
  alt="Dashboard showing analytics graphs">
<img src="screenshot.jpg"
  alt="Task management interface with drag-and-drop">
<img src="logo.svg" 
  alt="TaskFlow Pro logo">

Why good: Descriptive, specific, helpful

📝 How to Write Great Alt Text

1. Be Descriptive and Specific

Describe what's actually in the image as if you're talking to someone who can't see it.

❌ <img alt="screenshot">
✅ <img alt="Project timeline view with Gantt chart showing 5 active tasks">

2. Include Keywords (Naturally)

If relevant, include keywords users might search for, but don't stuff them.

❌ <img alt="project management software tool app dashboard">
✅ <img alt="Project management dashboard with team collaboration tools">

3. Keep it Concise (125 characters or less)

Screen readers may cut off long alt text. Aim for one clear sentence.

❌ <img alt="This is a screenshot of our amazing product dashboard that shows all the features including analytics, team management, task tracking, and reporting capabilities that help teams collaborate better">
✅ <img alt="Product dashboard with analytics, team management, and task tracking features">

4. Context Matters

Alt text should fit the context of the surrounding content.

Blog post about productivity:

<img src="kanban.jpg" alt="Kanban board showing work-in-progress limits">

Pricing page:

<img src="kanban.jpg" alt="Pro plan includes unlimited kanban boards">

🎯 Alt Text for Different Image Types

Product Screenshots

<img src="dashboard.png" 
  alt="Analytics dashboard showing website traffic trends and conversion rates">

Logos

<img src="logo.svg" alt="Company Name logo">

Team Photos

<img src="team.jpg" alt="Team photo of 8 remote workers on video call">

Icons (functional)

<button>
  <img src="search-icon.svg" alt="Search">
</button>

Decorative Images

If an image is purely decorative (doesn't add information), use empty alt:

<img src="divider.svg" alt="" role="presentation">

🛠️ Quick Fix Guide

Step 1: Find All Images Missing Alt Text

Use your SEO report to see exactly which images need alt text. Each will show:

Step 2: Add Alt Attributes

Find each image in your HTML and add the alt attribute:

<img src="/images/dashboard-screenshot.png" 
     alt="Real-time analytics dashboard with conversion metrics">

Step 3: Verify

  1. Deploy your changes
  2. Right-click images and "Inspect" to verify alt text is present
  3. Re-scan with SEO Booster to confirm 8/8 points

⚡ Pro Tips

  • Use proper nouns: "Slack integration" not "chat tool integration"
  • Avoid "image of" or "picture of": Screen readers already announce it's an image
  • Make it actionable for CTAs: "Download free trial" not "download button"
  • Update CMS templates: If using WordPress, Webflow, etc., set default alt text fields
  • Batch process: Fix all images at once to save time

📈 Expected Results

After adding proper alt text to all images:

← Back to your SEO report