How to Use Alt Text for Images SEO: Best Practices

Use the alt attribute in your <img> tags to describe images clearly and concisely for SEO and accessibility. Good alt text helps search engines understand image content and improves your site's ranking and user experience.

Syntax

The alt attribute is added inside the <img> tag to provide alternative text for an image. This text describes the image content for search engines and screen readers.

• <img>: The HTML tag to insert an image.
• src: The image file URL.
• alt: The descriptive text for the image.

html

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

Output

Displays the image 'image.jpg' with alt text 'Description of the image' used by screen readers and search engines.

Example

This example shows how to add meaningful alt text to an image of a red apple. The alt text helps search engines understand the image and improves accessibility for users who cannot see the image.

html

<img src="apple.jpg" alt="A fresh red apple on a wooden table">

Output

Displays the image 'apple.jpg' with alt text 'A fresh red apple on a wooden table'. Screen readers read this description aloud.

Common Pitfalls

Many make mistakes with alt text that hurt SEO and accessibility:

• Using empty or missing alt attributes when images convey important information.
• Writing too short or vague descriptions like "image" or "photo".
• Stuffing keywords unnaturally in alt text.
• Using the same alt text for different images.

Correct alt text should be clear, concise, and relevant to the image content.

html

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

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

Output

The right way provides a meaningful description that helps SEO and accessibility, unlike the vague 'image' alt text.

Quick Reference

• Always use descriptive and specific alt text.
• Keep alt text concise, ideally under 125 characters.
• Do not include phrases like "image of" or "picture of"; screen readers already announce it as an image.
• Use empty alt text (alt="") only for decorative images that add no content.
• Ensure alt text matches the image context on the page.

Key Takeaways

Use clear and concise alt text to describe images for SEO and accessibility.

Avoid vague or keyword-stuffed alt text; be natural and relevant.

Use empty alt text only for purely decorative images.

Alt text helps search engines index images and improves user experience for screen reader users.

Keep alt text under 125 characters for best compatibility.