Alt text (alternative text) is a written description of an image, offering context for individuals with visual impairments and improving your website's SEO performance. It ensures that users relying on screen readers can engage with visual content while also providing search engines with key information to index and rank images effectively.

What is alt text, and why is it important?

Alt text is an HTML attribute describing an image when it fails to load or when assistive technologies like screen readers are used. For example:

<img src="image.jpg" alt="A beautiful sunset over a beach in Hawaii">

In this case, the alt text clearly conveys the content of the image to users and search engines.

Alt text improves:

  • Accessibility: Individuals with visual impairments understand image content through screen readers.
  • SEO: Search engines index alt text to rank images and improve visibility in search results.
  • User Experience: It ensures a smooth, inclusive experience for all website visitors.

The role of alt text in accessibility

Accessibility makes digital content usable for everyone, including individuals with disabilities. Alt text ensures:

  • Compliance with accessibility standards like WCAG and ADA.
  • Enhanced User Experience: Screen readers describe images, offering a complete understanding of content.
  • Independence for Users: Visually impaired users can navigate and engage with content autonomously.

Alt text and SEO benefits

Alt text plays a significant role in improving your website's SEO by:

1. Better Image Indexing: Search engines use alt text to rank and display images in search results.

2. On-Page Optimization: Incorporating relevant keywords helps improve page relevance for target search queries.

3. Improved Crawlability: Search engine crawlers rely on descriptive text to understand image content.

For example:

  • Optimized Alt Text: "Black leather tote bag with gold hardware and removable shoulder strap."
  • Impact: The image ranks for searches related to leather tote bags.

Best practices for writing effective alt text

Follow these guidelines to craft alt text that balances accessibility and SEO:

1. Be Descriptive and Accurate: Clearly describe the image without unnecessary details.

2. Incorporate Keywords: Add relevant keywords naturally (avoid keyword stuffing).

3. Keep It Concise: Limit alt text to one or two clear sentences.

4. Provide Context: Describe how the image relates to surrounding content.

5. Avoid Redundancy: Do not repeat text already included in captions or surrounding content.

6. Handle Decorative Images: Use an empty alt attribute (alt="") for visuals that don’t add meaning.

Optimizing alt text for different image types

  • Product Images: Include product name, color, and key details (e.g., "Blue ceramic coffee mug with handle").
  • Infographics: Summarize key points (e.g., "Bar chart showing Company X revenue growth from 2015 to 2020").
  • Team Photos: Mention individuals and roles (e.g., "Headshot of Jane Doe, CEO of Company X").
  • Decorative Images: Use alt="" to signal that the image is non-informational.

Common alt text mistakes to avoid

1. Leaving Alt Text Blank: Missing descriptions hinder accessibility and SEO.

2. Keyword Stuffing: Overloading alt text with keywords hurts SEO and user experience.

3. Using Generic Text: Placeholder text (e.g., "image123.jpg") adds no value.

4. Duplicating Alt Text: Ensure each image has unique, relevant descriptions.

5. Ignoring Context: Align descriptions with the image's purpose on the page.

How to add alt text on popular platforms

WordPress

  1. In the WordPress admin dashboard, navigate to the page or post where you want to add an image.
  2. Click the "Add Media" button and either upload a new image or select an existing one from the media library.
  3. Once the image is uploaded or selected, click on the "Edit" pencil icon to open the image details.
  4. In the "Alternative Text" field, enter a descriptive and relevant alt text for the image.
  5. Click "Update" to save the changes.

Shopify

  1. Log in to your Shopify admin dashboard and navigate to the product or page where you want to add an image.
  2. Click the "Add file" or "Upload image" button to upload a new image or select an existing one.
  3. After uploading or selecting the image, click on the "Edit" or "Alt text" option.
  4. Enter a descriptive and relevant alt text in the provided field.
  5. Click "Save" or "Done" to apply the changes.

Squarespace

  1. Log in to your Squarespace account and navigate to the page or post where you want to add an image.
  2. Click the "Insert" or "Add Image" button to upload a new image or select an existing one from the file manager.
  3. Once the image is uploaded or selected, click on the "Edit" or "Settings" icon.
  4. In the "Alt Text" field, enter a descriptive and relevant alt text for the image.
  5. Click "Apply" or "Save" to save the changes.

Wix

  1. Log in to your Wix account and navigate to the page or section where you want to add an image.
  2. Click the "Add" or "Add Image" button to upload a new image or select an existing one from the media library.
  3. After uploading or selecting the image, click on the "Settings" or "Edit" icon.
  4. In the "Alt Text" or "Description" field, enter a descriptive and relevant alt text for the image.
  5. Click "Apply" or "Save" to save the changes.

Tools to help with alt text optimization

  • AI Tools: Use platforms like Google Vision AI for alt text suggestions.
  • SEO Auditors: Tools like Screaming Frog identify missing or poor alt text.
  • Browser Extensions: Tools like Accessibility Insights flag accessibility issues.
Published by Michael Cahill in SEO Strategy