Alt Text: A Better User Experience & SEO

Alt text often finds its way into SEO content optimization discussions. Designed as a means to increase a site’s accessibility, these seemingly inconsequential alt attributes can have an impact on your site’s SEO and usability. To help you make the most of your alt text, we will cover how to write alt text to maximize SEO potential and improve your site’s accessibility.

🔎 What is Alt Text?

Alt text or alternative text are written image descriptions within an image’s IMG tag’s ALT attribute in HTML code.

Also referred to as “alt attributes” or “alt descriptions,” these text descriptions provide information about the appearance and function of images on a web page should the image not load or should the user be visually impaired.

💡 Uses for Alt Text

Alt Text for Accessibility

Internet users with visual impairments rely on alt text to gain full access to a website’s content. Screen reader users have alt text read aloud, giving them a clearer picture of all the information on the page.

Alt Text for Loading Issues & User Experience

If an image file cannot load, its alt text will be displayed instead. This benefits users with low bandwidth or who disable images, ensuring a complete content experience.

Alt Text for Image SEO

Web crawlers use alt text to understand what an image depicts, its purpose, and its context, helping with indexing and Google image search visibility.

🖼️ Examples of Alt Text

Example:
alt="Beagle standing in a frosty field on a cold morning."

HTML Example:
<img src="file" alt="Dignity of Earth and Sky Statue">

Another Example:
alt="<p>Clear evidence: Atlantic currents carry the Gulf Stream</p>"

You can use an alt text tester to check if a web page’s images include alt text.

🧱 Formatting Alt Text

Most CMS platforms format alt text into HTML automatically.
To add it manually:

<img src="file" alt="add text" width="" height="">

✍️ How to Write Good Alt Text

Writing good alt text means describing the picture as if over the phone — ensuring the listener understands the image and its purpose.

Step 1: Be as descriptive as possible

Include what makes the image unique and relevant. Mention gender or ethnicity when it adds context.

Step 2: Keep it concise but not too short

Avoid redundancy. Keep alt text to a short phrase or single line that complements page content.

Step 3: Use your target keywords

If a keyword is relevant to the image, include it naturally. For example:
Instead of “whale shark,” use “whale shark with its mouth open.”

Step 4: Don’t stuff keywords

Avoid keyword stuffing — it harms user experience and SEO.

Step 5: Skip “photo of” or “image of”

The HTML tag already indicates an image; avoid unnecessary phrasing.

Step 6: Use `longdesc=""` for detailed images

For complex visuals (e.g., infographics), use long descriptions for clarity.

Step 7: Describe buttons too

Buttons with embedded text should include readable alt text, e.g.:
<input type="" src="" name="" height="" width="" alt="text on button">

Step 8: Avoid typos

Misspellings confuse screen readers and can hurt SEO.

Step 9: Consider the type of image

Mention if it’s an illustration, graph, chart, painting, infographic, or GIF if relevant.

🔍 What Else Should You Know About Alt Text?

Avoid using images that only contain text. Instead, write the text into the alt attribute.
Decorative images don’t need alt text — include a null attribute:
alt="" or alt=" "
Use null alt text for images that are links but have text alternatives nearby.
Videos don’t need alt text but should include transcriptions for accessibility.

🧩 How to Check Alt Text

To view alt text:

Right-click the image and select Inspect or Inspect Element.
On a Mac, use Control + click.
Use an accessibility checker to identify missing or improper alt text.

🎯 Always Consider the Image Context

Context helps you integrate keywords naturally and write meaningful alt text.
Example:

For a blog comparing dog foods, with keyword “premium dog food”:
alt="a bowl of premium dog food beside a bowl of lower quality for comparison purposes"

⚖️ Is Alt Text the Same as an Image Caption?

No. Captions are visible to users and used for credit or explanations, while alt text exists only in HTML for accessibility and SEO.

⚙️ How to Add Alt Text in WordPress

When uploading an image in WordPress, add your alt text before inserting it into the page. Depending on your version, the alt attribute field may appear beside or beneath the thumbnail.

📊 Models of Decent to Effective Alt Text

Bad: alt="dog"

Better: alt="brown dog with leash"

Best: alt="Tan poodle happily playing in the grass with its leash still attached"

Bad: alt="people with books"

Better: alt="mother and son doing homework"

Best: alt="illustration of a black mother helping her son with his homework to demonstrate the power of involved parents."

Bad: alt="picture of a cup, napkin, and pen"

Better: alt="a blue coffee mug next to a napkin with writing and pen"

Best: alt="a blue coffee mug with coffee to the left sitting on a wooden table with a pen opposite and a napkin between with the words set goals, not limits"