Illustration of an image graphic with an ALT TEXT tag and lines to Search, Screen Readers, and Broken Images

SEO: The Powerful Magic of Alt Text

by
with no comment
DesignSEOWebsite

Search Engine Optimization (SEO) and Alt Text

Business owners (and web designers) want their websites to be seen! There are lots of ways to make that happen, but one of the best (because it’s free) is by organic search. That means a person wants something, they ask their favorite search engine about it, and then as if by magic, a list of relevant websites appears. How do you get your site to be at the top of that list – SEO (search engine optimization).1 This can be super scary because it feels opaque, technical, and too complicated. But doing nothing isn’t moving your site up that ranking list, so best to start somewhere that is both relatively simple and impactful – Alt Text. 

What is Alt Text?

Alt text is short for “alternative text” and it is used to provide concise descriptions of images for those who are non-sighted or low-sighted so that they can still experience the content of the webpage as intended. 

“Only what gets measured gets managed…”

– Peter Drucker

Real-world Results for Alternative Text Implementation

I work for a national company that supports other “partner” companies and works directly with the public in the financial services industry. As a Web Design and User Experience Specialist, I design web pages for both the company and its over 852 partner sites. Shortly after starting work there, I was given a project to develop the SEO of all of the partner sites. Because these sites had little to no existing image alt text and titles that were unintelligible, that was the first major undertaking – provide alt text and titles for the images on key pages and any downloadable resources offered on the site. 

Tracking their SERP (search engine results page) ranking for a specified keyword over time, I am able to see how the actions I am taking are impacting the search rankings for these partners. With over 85 sites to optimize, this project has taken me nearly a year to complete (phase one anyway). Let me tell you that this has had a massive impact on the search rankings for these sites! In the beginning, #% of these sites ranked on page one. Now #% rank on page one. Little else has changed beyond the alt text, title text, and meta descriptions. 

Is writing titles and alternative text difficult? Nope. Is it time-consuming? Also no, if you are doing it as you add images to your site (highly encouraged!). If you have to go back and write alternative text for 3,000 images, it will be tedious as hell. Sorry, there’s just no getting around that. The point is, that for something so simple, there is a huge return on the time invested! 

Frequently Asked Questions – Answered!

Is alternative text important for SEO

YES! Search engines absolutely take alternative text into account. 

Who is alt text for?

  • Alternative text is for non-sighted or low-sighted users and is read to them using assistive technology. It can also be helpful for sighted users when loading is slow or an image fails to load. In this way, designing a user experience for those with the least access benefits everyone.
  • Alternative text is also useful for sighted users when the instance arises that an image isn’t loading – Alt text will appear when an image is unable to be displayed so that they can understand what the intended image is.
  • Alternative text is also for search engines! Having good alternative text is favored in searches. It’s like a little reward for providing the best experience for all users!

Alt text vs image description

  • A description is an in-depth explanation of what the image portrays with detail that might not be necessary at a surface level. It may or may not be seen on the screen based on the settings and design of the page.
  • Alternative text is not seen by sighted users but is read by assistive technologies. It should briefly describe what the image portrays. 

Alt text vs caption

  • A caption often includes attribution (names the source of the image), identifies who is in the image, or what the context of the image is (such as an event). Captions are seen on screen by sighted users and read by assistive technologies that help non-sighted or low-sighted users. 
  • Alternative text is not seen by sighted users but is read by assistive technologies. It should briefly describe what the image portrays. 

Alt text vs title text

  • Title text displays the title of an image when a user hovers over the image. It is the name of the image and can include some descriptive information.
  • Title text is also useful when you are searching for an image in your media library!
  • Alternative text is not seen by sighted users but is read by assistive technologies. It should briefly describe what the image portrays. 

Can alternative text have spaces?

  • According to W3.org, it is best to use appropriate punctuation, grammar, and spacing in alt text to make sure that the screen reader is conveying the message clearly.

Alt text character limit

  • Alternative text should be a sentence or two describing what is important about the image. 
  • There is no HTML character limit, but best practices suggest 125-150 characters or fewer.

Alt text best practices

  • Do not begin the alternative text with “image of,” “photo of,” “graph of” etc. This is wasting your characters and unnecessary as the assistive technology will already tell the user that they have encountered an image (so it might sound like: “an image of a photo of a dog barking at a cat”).
  • Use the alternative text to add context to the content. If the image has value to the story you are telling, use this space to provide that information to the non-sighted/low-sighted visitors.
  • Don’t do “keyword stuffing.” Use keywords if they are relevant to the concise description of the image. 
  • Put the most important information at the beginning of the alternative text (in case the visitor chooses to skip the rest).
  • “Imagine that you’re reading the web page aloud over the phone to someone who needs to understand the page. This should help you decide what (if any) information or function the images have. If they appear to have no informative value and aren’t links or buttons, it’s probably safe to treat them as decorative.” – w3.org 

Alt text generator

There are AI generators for alternative text. Not having used any of these personally, I will refrain from a recommendation at this time. However, here are a few that clearly have good SEO – I searched and they appeared:

Resources

If you hired a webmaster, agency, or web designer, they can probably help you out here too. 

In the market for a web designer? Check out my Website Design Portfolio or Contact Me!

  1. No results are guaranteed from the implementation of any of the suggestions made in this article. This is an account of my own experience, research, and opinion. ↩︎
  2. The number of sites varies over time as partners come and go or transition to a new relationship, but hasn’t fallen below this number during my employ ↩︎

Add a Comment

Your email address will not be published. Required fields are marked *