When it comes to on-page optimization, one of the most often overlooked tasks is image alt text optimization. There are several reasons for this. For instance, when you are looking at a page, you can’t see the image alt text. In some cases, the existing image alt text is okay as it is and effort placed on other tasks can yield greater results more immediately. Whatever the reason, though, image alt text optimization has been the red headed stepchild of SEO for far too long.
In this post, we are going to dig deeper into what image alt text is, why it’s important, and techniques for doing it better than your competitors.
What is Image Alt Text?
Before we put on the waders and step into the deep end of image optimization, let’s first take a moment to look at what, exactly, image alt text is in the first place.
Alt text, which is short for “alternative text” is used with HTML coding to describe what information is contained in an image on a web page. It’s sometimes also referred to as “alt tags,” “alt attributes,” or “alt descriptions.”
To take a quick look at an image on your site: mouse over the image > right click > choose Inspect Element from the dropdown menu. This will open a window (on the right in Chrome and on the bottom in Firefox) that shows you the code of the area you highlighted. Look for this:
alt="Insert Alt Text Here".
Why is Alt Text Important?
The beauty of alt text compared to other elements of a page is that it is important for several different reasons. For our purposes, we are going to go over four of these reasons in detail. Those reasons are:
- Improves accessibility
- Reinforces page copy
- Increases visibility in Google Images
- Acts as anchor text for image links
1. Properly Optimized Alt Tags Improve Accessibility
The main reason alt text exists in the first place is to describe the content of images to users with vision impairments. Via screen readers, the alt text from an image can be read aloud to users who are unable to see the image. According to the CDC, this is no small number. They estimate that, in the United States0 alone, about 12 million people aged 40+ have some sort of vision impairment. More than 1 million of those are completely blind.
If you are adding images to your pages to further convey information about the topic or product, which you totally should do, then you should also be thinking about writing good alt text so that all of your readers have a full grasp of the information you are trying to convey.
2. Reinforces Page Copy
I’m a very firm believer in the idea that content is king. No matter the purpose of your page, you should make it as thorough as possible for users and search engines alike. Of course, it is your discretion as to what constitutes “thorough.” In some cases, it could be 50 words and a link. In other cases, it could be 3,000 words, images, graphs, and videos. The general rule of thumb, however, is that every element on the page should be there to reinforce the main point of the page. To that end, if the image you are adding to the page is deemed necessary enough to be included in the first place, having accurate alt text in place gives greater topical context for users and search engines.
In fact, this is a factor that Google takes into consideration. John Mueller, Google’s Webmaster Trends Analyst, tweeted:
I think it’s important to separate “looking for an image” from “looking for content with an image preview”. Lots of people search visually in Google Images, and the image is just a snippet for the result, it’s not the thing they’re looking for.
This would indicate that someone who does an image search for “Shetland Sheepdogs,” may not just be looking for a picture of a Shetland Sheepdog, but using that type of search to get to a page that offers more about the specific Shetland Sheepdog content for which he or she is looking.
3. Increases Visibility in Google Images
Piggybacking on the last point, sometimes users are, indeed, just looking for a specific type of image. And that’s fine, because sometimes users don’t know what they want, but… they’ll know it when they see it!
For example, say a prospective customer is looking for an U.S. Air Force Sweatshirt. They aren’t sure exactly what kind of sweatshirt yet, but they are in the ballpark. If you are a purveyor of such sweatshirts, you may have them in an array of colors and styles. By having your alt text properly filled out, you increase your odds of being seen in an image search. If someone likes one of your sweatshirts, then they can click through to your product page and buy it.
Many users search this way so they don’t have to visit several different sites and sift through dozens (if not hundreds) of different sweatshirts to find the one they like.
Still not convinced? Then here are some staggering numbers reported from Rand Fishkin at Sparktoro regarding search engine market share from Q2 of 2019.
- Google: 69.35%
- Google Images: 20.45%
- YouTube: 2.98%
- Amazon: 1.99%
- Yahoo: 1.41%
- Bing: 1.18%
- Facebook: 0.96%
- Google Maps: 0.75%
- DuckDuckGo: 0.40%
- Twitter: 0.20%
- Pinterest: 0.20%
This information is gathered from browser-based searches and not apps. Some of the numbers may change when mobile apps are figured into the mix, but certainly not enough to diminish the significant role of image optimization.
4. Acts as Anchor Text for Image Links
What’s anchor text, you ask? Anchor text is the text that is used in a text link to another page or site. This is important for users and search engines, because it gives context to the page the link is pointing to. Not all links are text link, though. Some are images. When creating a link from an image to another page, the alt text for the image acts as the anchor text for search engines, so they can associate the context of the image with the link destination.
Adding Alt Text to an Image
Now that we know what alt text is and why it’s important, it’s time we discuss how you add it to your images.
When looking at the source code for a page, an image will be in an image source tag It will look something like this:
<img src=“shetland-sheepdog.jpg”>
To add alt text to the tag, we simply insert code that looks like the code shown earlier in this post. For this example, it would look like this:
<img src=“shetland-sheepdog.jpg” alt=“Shetland Sheepdog”>
It’s as simple as that.
Most modern content management systems (CMS), such as WordPress, offer you a field to input alt text while you are uploading the image in the first place. This saves some of the hassle that can come from sifting through source code page after page.
This brings us to another good point: you don’t have to—and actually shouldn’t—add alt text to every image. Many of the images that go into the design of a page, such as buttons and spacers, are there for design purposes and don’t requite alt text.
The general rule of thumb is that, if you don’t think the image file is going to be adding any value for users or search engines, forget about it.
What Makes for Good Alt Text?
Knowing how to add alt text is just one part of the image optimization process. Writing great alt text is the other part. There are a few factors to keep in mind when writing alt text:
- Is it detailed and thorough? Remember, you are trying to paint a picture for people who cannot see as well as giving search engines enough information to show your image for any image searches with any relevancy to your image. The more detailed, the better.
- Does it have a keyword in it? Images are a great place to include keywords, but only if they fit organically with the image. This is not the place to go shoehorning keywords in “behind the scenes.”
- Is it better than your competitors? Now that you know how to find alt text in source code, look at your competitors and see what they are doing. Don’t be surprised if the alt text generic… if it is even there! Every now and again, you’ll find good alt text on competitor sites, so it pays to do your homework.
Now that we have established that detail is important, let’s examine a few examples of how we can turn bad alt text into great alt text.
Bad: <img src=“vegetables.jpg” alt=“picture of vegetables”> Okay: <img src=“vegetables.jpg” alt=“vegetables”> Good: <img src=“vegetables.jpg” alt=“basket of vegetables”> Great: <img src=“vegetables.jpg” alt=“small wicker basket filled with lettuce, tomatoes, peppers, beets, and turnips”>
Bad: <img src=“baseball-player.jpg” alt=“baseball player mitt hat”> Okay: <img src=“baseball-player.jpg” alt=“baseball player”> Good: <img src=“baseball-player.jpg” alt=“little league baseball player”> Great: <img src=“baseball-player.jpg” alt=“little league baseball infielder scooping up a grounder to his glove side”>
Bad: <img src=“toilet-paper.jpg” alt=“tp image 2”> Okay: <img src=“toilet-paper.jpg” alt=“rolls of toilet paper”> Good: <img src=“toilet-paper.jpg” alt=“rolls of toilet paper in a miniature shopping cart”> Great: <img src=“toilet-paper.jpg” alt=“4 rolls of toilet paper in a miniature shopping cart on someone’s back patio”>
Hopefully you get the idea. One more note about alt text image optimization for ecommerce sites, in particular: If your product has a unique model number or SKU that searchers might use to look for your product, be sure to also include that in the alt text.
Finding Missing Alt Text
We’ve already covered how to locate alt text in source code. While it is simple enough to do, even the simplest task doesn’t always scale well. Sure, if you are looking at a few pages, inspecting elements on a page is a great way to check the status of your alt text. Once we get to hundreds or thousands of pages, however, you need a different approach.
Using Screaming Frog
At Lett Direct, we use the Screaming Frog SEO tool to crawl an entire site, sort the files by images, and look at the attributes associated with each image. This makes it very easy to see which images do not have alt text present.
This 5:47 video created by the Screaming From team breaks down how to do this step by step.
Note: The free version of Screaming Frog only allows you to crawl up to 500 pages.
For an even more detailed breakdown of this process, you can check out their page titled: How to Find Missing Image Alt Text & Attributes.
Using Google Analytics
If you don’t have the Screaming Frog SEO Tool or this process seems to cumbersome, another option—and a free one at that—is to look to Google Analytics!
Now, you may already know what your top pages are, or at least the ones you want to be your top pages. You could easily make a list of those and start checking those pages first. In general, your most popular pages mimic the hierarchy of your site, with the most popular page being the home page, then category pages, then product/post pages. This will vary a little based upon your individual site, but by and large, this is how it usually looks.
Another way to make a data-based decision on which pages to start looking at for image optimization opportunities is the open your Google Analytics, then click on the “Acquisition” dropdown, then “All Traffic,” then “Channels.” By default, you’ll get summary stats separated by marketing channel. In the Primary Dimension options located directly above the summary chart, choose the “Other” dropdown, then the “Commonly used” dropdown. On that list, you’ll find the “Landing Page” option; click it.
Now, you can see your most popular pages by Users. It will look something like this:
Depending upon your KPI of interest, you can re-sort this list by revenue, new users, bounce rate, and the like. When you have a list set, you can start from the top down to make sure that you are adding alt text to images in the order you think it will make the most difference to your bottom line.
Image Optimization and Product Schema
In recent month’s there has been a really low-key, yet big impact, change to the way Google shows product images in Google image search. Until late 2019, images in Google image search would feature the dimensions of the image in the lower right-hand corner, so you could see the size of the image at a glance.
Now, if you have a product image that shows up in a Google search and you have the proper product schema markup on the page where that image resides, Google will show a little price tag in the corner of the image. When a user clicks on that image, the larger version of the image will appear on the right side of the search results and, along with it, will be product information, such as the site carrying the product, the price, availability, sizing, and so forth.
While I have been a steadfast supporter of integrating schema markup to websites for years, this is just one more (quite major) reason why you should do it if you haven’t already.
Most modern e-commerce platforms have schema markup capabilities baked into the platform. It can usually be rolled out with little effort, as it is displaying information that you will already be entering into your ERP system in the first place.
To see if your site has schema markup in place, as well as any warnings/errors related to schema markup, simply enter one of your URLs into Google’s Structured Data Testing Tool.
In Conclusion
Optimization can seem like a puzzle sometimes. To be sure, some pieces of the puzzle can be more important than others at different times. Image optimization has always been a significant part of the optimizations process. In recent months (and even years), however, changes in search behavior and the way Google presents image results have made it absolutely critical to re-examine your image optimization efforts, particularly your use of alt text.
Hopefully this guide has provided enough of the “why” and a good start on the “how.”