Alt tags, also known as alternative text or alt text, are short descriptions added to images on a web page. These descriptions live in the HTML code of the page and serve multiple important purposes.
What Are Alt Tags?
- Help People Who Can’t See the Images
Screen readers, which are tools used by people with visual impairments, read the alt text out loud. This way, users can understand the image content without seeing it. - Assist Search Engines
Search engines like Google can’t “see” images the way people can. Alt tags help them understand what the images are about, which improves search engine results and makes your website more searchable. - Drive More Traffic Through Google Images
Adding optimized alt text helps your images show up in Google Image Search. This can bring more visitors to your website. - Support Navigation
When images act as links, alt text works like a label or anchor text, guiding users and search engine bots.
Why Are Alt Tags Important?
Alt tags matter because they:
- Improve accessibility for screen reader users.
- Help your page rank higher in search engines by connecting images to your page content.
- Make your site easier to use for everyone, especially people with visual impairments.
Pro Tip: Adding concise, accurate alt text to your images not only boosts your SEO but also creates a better experience for all visitors.
How to Add Alt Text to Images in WordPress
Adding alt text to your images is simple, especially if you’re using WordPress. Here’s how you can do it:
- Upload Your Image
Go to the WordPress media library or upload a new image through the “Add Media” button in your editor. Then click on the uploaded image.
- Locate the Alt Text Field
Once your image is uploaded, you’ll see a field labeled “Alt Text” in the image settings on the right side of your screen.
- Write a Description
Type a concise description that explains the image’s purpose. For example:- For a picture of map with lots of pins: “A world map with pins.”
- For a picture of map with lots of pins: “A world map with pins.”
- Save Changes
After entering the alt text, WordPress will automatically save the settings. That’s it! Your alt attribute is now part of the image’s HTML code.
What to Remember When Adding Alt Text
- Be Specific: Describe the image clearly, focusing on how it relates to the page content.
- Avoid Keyword Stuffing: Don’t overfill with irrelevant words as this can hurt your SEO.
- Skip Decorative Images: If an image is purely decorative, leave the alt attribute empty (alt=””). This prevents screen readers from reading unnecessary details.
Pro Tip: Always think about how the image helps your audience or supports your content when writing image alt text.
Should You Add Alt Text to All Images?
Not every image on your website needs an alt description. Here’s how to decide:
1. When to Add Alt Text
- Content Images: Add alt text to images that convey important information or support your content. For instance, a chart explaining sales growth needs a good description to explain its value.
- Images Appearing in Google Searches: To rank in Google Images and drive traffic, add optimized alt text to images that users might search for.
2. When to Leave Alt Text Blank
- Decorative Images: Use an empty alt attribute (alt=””) for visuals that don’t add meaning, like background patterns or decorative icons. This improves the experience for screen reader users by skipping irrelevant details.
- Generic Stock Images: If the image isn’t crucial to the content, it’s better to leave the alt text blank rather than cluttering it with unnecessary descriptions.
Pro Tip: A clean alt strategy ensures a better user experience and avoids creating a poor user experience for visitors with visual impairments.
How to Write Good Alt Text
Crafting appropriate alt text is key to making your website more accessible and improving its SEO. Follow these simple guidelines to write optimized alt text effectively:
1. Be Concise and Specific
Keep it short but clear. Describe the image content without unnecessary words.
Example:
- Instead of “An image of a beautiful chocolate cake on a white plate”, write “Chocolate cake with raspberries on a white plate.”
2. Focus on Relevance
Explain how the image relates to the page content. If the image highlights a feature or supports a topic, mention that.
Example:
- For a blog post about baking tips, an image of tools might have the alt text “Baking tools including a whisk, rolling pin, and measuring cups.”
3. Avoid Keyword Stuffing
Use relevant keywords, but don’t overload the description. For example, don’t write “Delicious chocolate cake chocolate dessert baking chocolate cake recipe.”
4. Skip Redundant Phrases
Avoid stating “image of” or “picture of” in the alt text. Screen readers already identify it as an image.
Example:
- Instead of “Image of a smartphone on a desk,” write “Smartphone on a desk.”
5. Consider Context
For complex images like graphs or infographics, summarize the main point. Add more details in the surrounding page content if necessary.
Alt Text Examples
Example 1: Chocolate Cake
- Bad: <img src=”cake.png” alt=”photo of cake”>
- Okay: <img src=”cake.png” alt=”chocolate cake”>
- Good: <img src=”cake.png” alt=”chocolate cake with raspberries on a white plate”>
Example 2: Smartphone Usage
- Bad: <img src=”phone.png” alt=”mobile phone modern technology iPhone”>
- Okay: <img src=”phone.png” alt=”person holding a phone”>
- Good: <img src=”phone.png” alt=”woman smiling while holding a smartphone”>
Pro Tip: Always think about how your audience would describe the particular image in a sentence.
How to Find and Fix Issues with Alt Attributes
Ensuring your images have well-written image alt attributes can improve both accessibility and SEO. Here’s how to identify and fix issues with missing or poorly written alt text:
Step 1: Use Tools to Audit Alt Text
- Browser Extensions: Tools like WAVE can highlight missing or incorrect alt attributes on your website.
- WordPress Plugins: Plugins like Rank Math can flag images missing alt text and guide you to optimize them.
- Manual Review: For small websites, you can manually check alt attributes through the HTML or your WordPress media library.
Step 2: Focus on High-Impact Pages
Use analytics tools like Google Analytics or Search Console to identify pages with the most traffic or conversions. Prioritize fixing alt text on these pages to maximize impact.
Step 3: Optimize Alt Text for Key Images
- Replace vague or keyword-stuffed alt text with descriptive alt text.
- Add alt text to images that appear in key sections of your content or drive traffic through image search results.
Step 4: Address Missing Alt Attributes
For images missing an alt attribute, decide whether they need one:
- Add alt text if the image supports your content.
- Use an empty alt attribute (alt=””) for purely decorative images to improve usability for screen reader users.
Pro Tip: Regularly auditing your image alt text ensures you maintain both accessibility and strong search engine optimization over time.
Step 5: Maintain a Process
Make writing concise alt text part of your workflow whenever adding new images to your site.
Conclusion
Alt text plays a crucial role in making your website accessible, improving your search engine optimization, and driving more traffic through Google Images. By following best practices for creating concise alt text, you’ll not only help screen reader users but also boost your site’s performance in search engine results.
Key Takeaways:
- Start Creating Alt Tags Where Needed: Prioritize meaningful images that contribute to the page content or user experience.
- Use Optimized Alt Text: Write clear, descriptive text without overloading it with keywords.
- Audit Regularly: Use tools like WordPress plugins or browser extensions to identify and fix alt attribute issues.
- Think Accessibility First: For purely decorative images, leave the alt attribute empty (alt=””) to enhance usability for screen readers.
Bonus Tips for Better Image Optimization:
- Descriptive File Names: Use a clear image file name, such as “chocolate-cake-raspberries.jpg”, to support alt text.
- Responsive Images: Ensure images load well on all devices to improve user experience.
- Lazy Loading: Speed up page loading times by enabling lazy loading for images.
