For front-end users, websites thrive on the visual. A vibrant picture catches our attention and enriches the message of the text. But to make your images visible to more users and to search engines, you'll have to optimize them for accessibility.
If you've got three minutes to read, in this post we'll go over:
- Why accessibility is important
- How to optimize images (and what doesn't work), and
- How image optimization can improve your search rankings.
Is Accessibility Really That Important for My Website?The primary reason for optimizing images is to make them viewable by software. Screen-reader software translates your descriptions of the images into speech or Braille for users with vision impairment. Search engines favor accessibility, so to look out for people who use screen readers, search engines look for image descriptions. Search engine software also reads the description, to determine if the image might be a good return for someone's query.
Here's an example:Anna Minnus wants to purchase a Scotch pine.
Nursery Wan has no photos of Scotch pines on their website.
TuTu Trees has photos of Scotch pines which have been optimized for accessibility.
Three Tree Farm has photos of Scotch pines but hasn't optimized them.
Search engines know that TuTu Trees has diverse content (text as well as images) and is accessible to screen readers. The search engine assumes that TuTu Trees will have the most helpful website for Anna's search, so TuTu will rank higher than the others.
How do I optimize images?Here's where it gets confusing. Where do you actually type this description?
In LiveEdit Aurora, place an image. Then click on the image again and select the Advanced tab. In the advanced options, you'll see a box for Title under Container Settings and Alt Text under Image Settings. What do those mean?
This is where it gets confusing. The image title is not the file name (image-name.jpg) or the image description. The image "title" is the text which pops up when a desktop user hovers over an image with their cursor. (On a computer, move your cursor over any images in this article to see a title pop up.)
Image titles should add value to the user. If the image links to a different page, you can use the title to give a call to action—"Click Here to Sign Up for Our Workshop!"
You could also use the image title attribute to provide additional information the user might like to discover—"Fun Fact: Dr. Pellersels' favorite pastime is driving race cars!"
Alt text is commonly referred to as an "alt tag," but it's text that displays as an alternative to an image.
Because image titles are only accessible for desktop users, Google pretty much ignores them now that more searches occur on mobile devices than desktop computers.
Alternative text (alt text) is the description of an image that software reads for accessibility or determining relevance in search engine rankings.
This image illustrates what the software sees in the code for an image without and with alt text:
How can I use alt text to improve my search rankings?Alt text doesn't need to be complex—it just needs to depict the contents of the image accurately. Like all SEO writing, alt text should be descriptive and specific. You can use a description of the image ("Close up of the needles of a Scotch Pine, which can be up to three inches long") or the text on the image (“Summer Special: Get 15% off with Coupon Code SUMMERTIME” ).
An alt tag could also be good place to use a keyword for your page. However, you should avoid “keyword stuffing.” Think about the message and ideas you want to communicate with the picture, and use words and phrases which will encompass those themes and attract the right users.
Our SEO team's two tricks for writing great alt text:
1. Be descriptive yet concise.Considering screen-reader parameters, we recommend a maximum of 125 characters for alt text.
2. Be authentic, not spammy.No more than one keyword per image. Images should be relevant to your content, and descriptions should be relevant to the image.
Final Thoughts:DON'T throw in a picture of a celebrity with the alt text "Chris Hemsworth thinking about subluxation manipulation from one of our Minneapolis Chiropractors."
DO use images of your services or benefits and describe what is happening in each image. "Diagram of vertebra, nerve and disk in a normal spine vs subluxation and pinched nerve."
Need help with your image optimization? Contact our social media and SEO experts by calling Esultants today: 612-623-8054 (877-553-7858 toll free)