Marketing Tip: What is “alt text” and Why you Should be Using It

Alternative text (alt-text) and Indexing

Alternative text (alt-text), which is often referred to as “alt tags”, “alt attributes”, and “alt descriptions” are sections of code used to describe an image and or button. Though less technical than actual code, they serve an important purpose in allowing search engines like Google and Yahoo to index your content. So what is indexing?

Indexing is how search engines organize the world wide web, much like how librarians use the Dewey Decimal System to organize books. To accomplish this task of indexing, search engines use “web crawlers”, they are like a team of librarians that roam around the library checking to make sure everything is in order and in the right place. 

This process of crawling and indexing the world wide web allows search engines like Google and Yahoo to deliver us relevant content as it pertains to our search terms. Let’s look at the following example.

In the following example, I entered the search term “dogs”: 

As we see, Google has done an excellent job of delivering what I’ve asked, dogs. Yet, it is not very specific as to a type of dog. In this case, I can be more specific in my search query, let's try the search term German Shepherds.

In this case, we can see that our search result is much more specific to our search term, german shepherd dogs. 

Now, if you’re an experienced digital marketer then you will recognize that I am using what is called “head” and “long-tail” keywords in my search. Without getting into detail here, “head” keywords are broad-based words such as in the example, dogs. “Long-tail” keywords are typically three words or longer, as they tend to be more descriptive, such as in our german shepherd example. Don’t concern yourself with the technical understanding of head and long-tail keywords right now, only concern yourself with what is needed to write good alt text. 

The Why to using Alt Text

There are four main reasons why alt text is important:

1. Improves accessibility
2. It can improve your topical relevance
3. Can help you rank in Google images
4. Serves as anchor text for image links

1. Alt text improves accessibility

It’s 2020 folks and it is time to be considerate of the idea that millions of people are visually-impaired, and many of them use screen readers to consume content.

Improving accessibility for the visually-impaired, a number that is estimated to be approximately 12 million for people over the age of 40 located in the United States (US) alone. These screen readers work by converting on-screen content, including images, into audible descriptions.

Images without alt text cause problems for screen readers because there is no way to communicate the content of the image to the user. In most cases, these screen readers skip over these images, or worse off, they read aloud unhelpful image filenames. Let’s look at the image below provided by ahrefs.com.

As you might be able to tell, I replaced all the cats with dogs for obvious reasons...dogs are better. 

This example illustrates the difference in how a screen reader would relay content to its listener. On the left without any alt text, we have “IMG_584792.png” but in reality, it’s more like “I.M.G. underscore five-eight-four-seven-nine-two-period-P.N.G. 

On the right with alt text, it will read “cute dogs”...Yes, cute dogs are right screen reader, very cute dogs. 

Do you see how big of a difference that can make for people interacting with your content? It all goes back to providing the best customer experience possible. 

2. Alt text can improve topical relevance

As we discussed earlier, Google and other search engines scour the web to index your content, making it easier for your web visitors to find. This relates to images in the same way it relates to text, these search engines will read your alt text to understand what your images are about. Making it easier for your web visitors to find and also ranking your content appropriately within its relevant categories.

Now in the last few years, Google and search engines alike have greatly improved their capabilities in recognizing image content. In most cases, the search engine could tell the difference between a person, an animal, food, etc. However, search engines may still get a little confused when it comes to specificity. On par with our example from before, let’s do a Google search of only German Shepards and then click the images tab. 

As we can see from this google search of “adult german shepherds,” we got more than what we searched for. We have images of baby german shepherds and even one that appears to have a medical diagnosis. Being specific about your alt text will help Google and your visitors get the right content delivered to them. 

3. Can help you rank in Google images

We should all be caught up on this point by now, so I won’t say much more about it here. What I will say is that Google Images is the world’s second-largest search engine...the first being Google Search. Roughly, Google search has an 86.86% market share of searches as of July 2020, with Google images ranking for about 20.45% of that traffic. As you can see, getting on Google and using good alt text in your images will help you get noticed. 

4. Alt text serves as anchor text for image links

Anchor text is the blue clickable text that you and I have seen on webpages, word documents, PDFs, and other places. Just as search engines use alt text to understand an image, they use anchor text to understand more about the linked page. Now, if that anchor text is replaced with a clickable image, then search engines refer to your alt text to gather an idea about the linked page. 

You see, alt text serves a variety of important purposes that improves your web contents search ranking. Having a high search ranking makes it easier for web users to find your content and also to stumble across your content during those late-night browsing sessions. By familiarizing yourself with the various benefits of alt text, we can better understand its level of importance. Now, let's examine how we can add it to our images.

How to add alt text

There are a couple of ways to add alt text to your images, the first is adding alt text via your HypterText Markup Language (HTML). In your HTML code, you will see:

<img src=”german_shepard.jpg”>

Right after the closing quotes, add your alt text, it should look similar to this:

alt=”German Shepard sitting down next to his owner in Central Park”

The completed version will be along the lines of:

<img src=”german_shepard.jpg” alt=”German Shepard sitting down next to his owner in Central Park”>

*IMPORTANT: It’s important to note here that alt tags should always be inside of the image tags (<>) as shown above. 

The second way of adding alt text is by leveraging your platforms Content Management System (CMS) platform like WordPress, SquareSpace, Wix, and many others out there that make it possible to edit your images alt text without diving into HTML code.

Lately, I have been favoring the platform Tilda to manage my personal website, www.prestongilmore.com. See an example of how I set up my alt text on Tilda below: 

As you can see, once I open up Tilda's image settings menu, I am able to adjust the “SEO: IMAGE ALT TEXT”. I have my alt text set to “Preston Gilmore’s is wearing a pink dress shirt under a blue v-neck sweater.”

Conducting an alt text Audit

There are a few methods to choose from when conducting your alt text audit, the first option is using the “Inspect” functionality that’s built into your computer. Simply right-click and select “Inspect” to view the site's HTML code. You’ll get presented with a screen that should look similar to the screenshot I have below of pewpewtactical.com. 

This is what the Inspect page functionality will bring up. A pro-tip to make this less work on you is to search through the HTML code, use the “Command+F” shortcut on Mac or the “Control+F” shortcut on PC to bring up the search box. As you can see in my example, I set my search to “alt=”, as we learned earlier, alt= is how we assign alternative text. It looks like pewpewtactical is doing a good job of assigning alt text to their images, as we can see here they have “alt=The Good, the Bad, and the Ugly Draw”. 

An easier way to inspect your pages alt text is to install the Google Chrome extension “Alt Text Tester” https://chrome.google.com/webstore/detail/alt-text-tester/koldhcllpbdfcdpfpbldbicbgddglodk

Once you have the extension installed, you simply view the page you’re auditing, click on the extension to activate it, then hover over any image to view its alt text or lack thereof.

But First...

Before you go through every page of your website to conduct your alt text audit, start with the pages that bring in the most traffic. Right!? After all, you are trying to maximize your bang for the buck, so start off with the pages that account for the majority of your digital traffic. To help guide you through this process, let’s continue on our previous example of pewpewtactical. 

What we are looking for here are the pages that bring in the majority of the traffic, if you have Google Analytics connected to your site, which you should, you can view your traffic/page reports there. Otherwise, you can use a third-party tool to find what pages attract the most traffic for either your own business or competitors, pretty cool, huh. For this, I will be using SEMrush.com. 

Step 1: Head over to SEMrush.com 

Some features like the “Top Pages” feature, requires that you have a subscription to SEMrush. If you don't already have a subscription, then you can try them out free for seven days. Don't forget to cancel your plan if you don't intend on using them past their trial period.

Step 2: Copy and paste the URL address of the website you want to investigate into the SEMrush search bar. 

Step 3: Click on the “Marketing Insights” tab on the left under the “Dashboard," then click the “Traffic Analytics” section under the “Marketing Insights” tab. 

Step 4: From the “Marketing Analytics” screen, find the “Top Pages” section located on the same menu as the “Overview” tab. 

Step 5: From here, you will be able to see how well each page is performing and which pages you should work on first, the pages bringing in the most traffic. 

Should you add alt text to all of your images? 

The answer is no, you should NOT be adding alt text to all of your images. For example, if your image exists for decorative purposes, then there is no need to add alt text. 

One example of this is having icons on your webpage to separate your content, let’s look at an example found on my website. 

As you see here, I am using icons to represent different educational accomplishments, yet having alt text inserted for these images adds no real value that does not already exist in my actual text. Keep the following three points in mind to decide if adding alt text to your images is necessary.

1. Is this information that needs to be known? Both by viewers using screen readers and by search engines? 
2. Will adding alt text here annoy visitors with screen readers?
3. Does it add SEO value? 

Now you might be thinking that if my image does not require alt text then it’s best to leave it blank, well, you’re kinda right about that. For the sake of clarity, let’s go over an example of how you should handle your alt text if you deem you don’t need any. 

If you determine that your readers and search engines would be best served by having no alt text then the best practice is to add the alt=”” attribute but leave the part within the quotations empty. The reason for this is if you don’t add the alt attribute then in some cases, screen readers will read the filenames in the absence of an alt attribute. However, if you add an alt attribute, then the screen readers and search engines will skip reading/indexing this image. 

In this case, your HTML code for this image will look like this: 

<img src=”german_shepards_are_awesome.img” alt="”>

With the alt text or alt attribute being in the code but intentionally left blank, screen readers and search engines will ignore this content and also ignore the file name. 

Now that we understand that we should not always be adding alt text to our images, let’s go over one more point of caution, longdesc. 

Longdesc

Like our alt text, longdesc provides a way to communicate our images to screen readers and to search engines. Particularly, longdesc is best suited when the alt text needs to be longer than 125 characters. Think in terms of artwork, graphs, or complex charts that would be impossible to communicate their meaning with a short description, this is the job of longdesc. Unlike alt text that is read while on the same page, longdesc is intended to point to a separate webpage of text. On this separate webpage, the screen reader would be able to read-off as much text as the author thinks is needed to communicate the image clearly. 

Longdesc does provide a few benefits in terms of being able to communicate complex images clearly, however, longdesc does pose a few problems that make using it less desirable than alt text. 

The problems with longdesc:

1. It has low support from popular web browsers, even in regards to extensions, you won’t see a lot of support for it. 
2. Poor user experience from a navigational standpoint. As longdesc was designed to point to a separate webpage for contextual information, it would bring the user to this new page. Yet, the information found on this page is only in regards to the image that the longdesc is supporting, thus eventually the user would have to navigate back to the original webpage to pick up where they left off. 
3. As stated earlier with the lack of support from major web browsers, longdesc is currently defined as “obsolete” in HTML5. HTML5 is the latest HMTL framework, thus, if it’s not being supported now then odds are it won't be in the future.

Here’s a screenshot pulled from www.w3schools.com as it relates to longdesc support on web browsers. 

So, if your colleague mentions that we should start using longdesc in our image descriptions, you can be sure to point out the pros and the cons for doing so, namely the lack of support for using longdesc. 

Now that we have a strong understanding of the various factors that play into creating our alt text, let’s now learn how to create good alt text. 

Creating good alt text

1. Be descriptive yet concise, and avoid using abbreviations. 
2. Keep alt text short - 125 characters or less.
3. Use keywords but avoid keyword stuffing (see below).
4. Don’t use images as text. It's counterintuitive to be using an image to describe an image when the point of alt text is to provide a textual understanding of the image. 
5. Don’t include “image of,” “picture of,” etc. in your alt text.
6. Avoid using longdesc=. Until longdesc is supported by major web browsers and by the programming language itself, HTML5 (current), stay clear of using it. 
7. Don’t neglect form buttons. If a form on your website uses an image as it’s “submit” button, give it an alt attribute. Image buttons should have an alt attribute that describes the function of the button e.g. "search", "apply now", “sign up,” etc.
8. Don’t cram your keyword into every single image’s alt text. 

A note on Keyword Stuffing

Keyword stuffing is the practice of inserting a large number of keywords into your web content, this includes your actual content as well as alt tags you may be using. This practice is frowned upon by search engines like Google, as well as generally being an infective way to boost your page's SEO ranking. Apart from being an unethical practice, it goes against my number one rule of providing the best experience possible for your customers, a.k.a. The Customer is King. 

Good vs Bad alt text Examples

Before I send you away to rule the internet with alternative text, let’s take a look at a few examples of what good and bad alt text can look like for your business. 

Bad: <img src=“goldenLabrador.png” alt=“picture of a dog”>

Okay: <img src=“goldenLabrador.png” alt=“dog”>

Good: <img src=“goldenLabrador.png” alt=“golden labrador retriever”>

Best: <img src=“goldenLabrador.png” alt=“golden labrador retriever atop a mountain in Lange Boden, Switzerland”>

Bad: <img src=“diggsMiracle.png” alt=“football player running towards the endzone”>

Okay: <img src=“diggsMiracle.png” alt=“A member of the Minnesota Vikings running towards the endzone”>

Good: <img src=“diggsMiracle.png” alt=“Stefon Diggs of the Minnesota Vikings making a touchdown”>

Best: <img src=“diggsMiracle.png” alt=“Known as the Minneapolis Miracle, Stefon Diggs of the Minnesota Vikings wins the playoff game against the New Orlean Saints”

Bad: <img src=“macbookPro.png” alt=“MacBook Pro ”>

Okay: <img src=“macbookPro.png” alt=“MacBook Pro with Touch Bar”>

Good: <img src=“macbookPro.png” alt=“MacBook Pro with Touch Bar one TB SSD”>

Best: <img src=“macbookPro.png” alt=“2016 MacBook Pro with Touch Bar, model number A2251”>

*NOTE: In this example, you will notice that the model number of this product is included. This can be a good practice to get into, especially for images on e-commerce product pages.  

One last tip

One last tip for writing good alt text, read it aloud. Sometimes all we have to do to spot a mistake in our writing is to read it aloud. If you slip up the first read-through, then chances are you have room to improve. Remember, we are not only writing our alt text for improving our page's visibility, but we are also writing it for those using screen readers. 

Thank you for checking out this post! If you've found it helpful, then please like it, share it and let me know your thoughts in the comments. 

Sources

I realize that my limited marketing experience may cause some concern, which I like because you should be doing your own research anyway. If you’re curious about the best SEO practices from companies that specialize in the field, then I encourage you to check out the sources below.  

CDC - Fast Facts of Common Eye Disorders

https://www.cdc.gov/visionhealth/basics/ced/fastfacts.htm#:~:text=Approximately%2012%20million%20people%2040,due%20to%20uncorrected%20refractive%20error.

Sitepoint - a word on longdesc

https://www.sitepoint.com/longdesc-and-other-long-image-description-solutions-part-1-the-issues/#:~:text=As%20you%20probably%20know%2C%20the,of%20an%20image%2C%20when%20needed.

statista - search engine market share

https://www.statista.com/statistics/216573/worldwide-market-share-of-search-engines/#:~:text=Ever%20since%20the%20introduction%20of,share%20as%20of%20July%202020.

Ahrefs - Alt Text for SEO: How to Optimize Your Images

https://ahrefs.com/blog/alt-text/

Shoutmeloud - what is google crawling and indexing in SEO

https://www.shoutmeloud.com/google-crawling-and-indexing.html#:~:text=In%20layman's%20terms%2C%20indexing%20is,to%20the%20web%20search's%20index.

Whatis.techtarget.com - alt text (alternative text)

https://whatis.techtarget.com/definition/alt-text-alternative-text

Commonplaces.com - length of alt text

https://www.commonplaces.com/blog/writing-alt-tags-for-images/#:~:text=While%20ALT%20tags%20need%20to,the%20context%20of%20the%20page.