HtmlHow-ToBeginner · 3 min read

How to Use Alt Text for SEO in HTML: Best Practices

Use the alt attribute inside the <img> tag to add descriptive text for images. This helps search engines understand the image content and improves SEO while also aiding accessibility.

📐

Syntax

The alt attribute is added inside the <img> tag to provide alternative text describing the image.

<img>: The HTML tag to display an image.
src: The image file URL.
alt: The descriptive text for the image, used by search engines and screen readers.

html

<img src="image.jpg" alt="Description of the image">

Output

Displays the image located at 'image.jpg' with alt text 'Description of the image' for SEO and accessibility.

💻

Example

This example shows how to use alt text to describe an image of a sunset, helping search engines understand the image content.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alt Text SEO Example</title>
</head>
<body>
  <h1>Beautiful Sunset</h1>
  <img src="sunset.jpg" alt="Sunset over the mountains with orange and pink sky">
  <p>This image shows a colorful sunset behind mountain peaks.</p>
</body>
</html>

Output

Page with heading 'Beautiful Sunset', an image of a sunset (if 'sunset.jpg' is available), and a descriptive paragraph.

⚠️

Common Pitfalls

Many make these mistakes when using alt text:

Leaving alt empty or missing, which hurts SEO and accessibility.
Using generic text like "image" or "photo" that doesn't describe the content.
Stuffing keywords unnaturally into alt text, which can be penalized by search engines.

Always write clear, concise, and relevant descriptions.

html

<!-- Wrong way -->
<img src="dog.jpg" alt="image">

<!-- Right way -->
<img src="dog.jpg" alt="Golden retriever playing in the park">

Output

The first image has unhelpful alt text 'image'; the second has descriptive alt text improving SEO and accessibility.

📊

Quick Reference

Tip	Description
Use descriptive text	Describe the image clearly and briefly.
Avoid keyword stuffing	Do not overload alt text with keywords.
Always include alt	Never leave the alt attribute empty unless decorative.
Keep it concise	Aim for 5-15 words that explain the image.
Use for SEO and accessibility	Alt text helps search engines and screen readers.

✅

Key Takeaways

Always use the alt attribute in tags to describe images for SEO and accessibility.

Write clear, concise, and relevant alt text that accurately describes the image content.

Avoid generic or empty alt text and do not stuff keywords unnaturally.

Alt text improves search engine understanding and helps users with screen readers.

Keep alt text brief but descriptive, ideally between 5 to 15 words.