Search Engine Optimization (SEO) can seem mythical at times, even for experienced professionals. I mean, it all started with a doctoral thesis on how to organize the world wide web, which has since evolved to include a penguin, a hummingbird, and a fancy AI called Rank Brain. Despite the technical jargon, SEO is can be simple to learn. Let’s start with a common question, what is an “alt tag”?

As the web has evolved, we’ve seen more and more diverse media. We started with text, then images and video, and now virtual and augmented reality. However, with all of these sensory items some people weren’t able to consume the content, which is contradictory to why the internet was created.

When were alt tags introduced?

Backstreet Boys were popular in the mid-1990s around the time image alt tags were introduced. Here's a photo of the Boys in their heyday.

Alt Tags were introduced in 1995 as part of HTML 2.0 (yeah, way back when the Backstreet Boys were hot). A little bit later in the release of HTML 4.01, the alt tag became a required attribute for <img> and <area> tags. This means that if you want your website to be properly optimized for search engines and humans, you need to include an alt tag for any image you put on your website.

What is the purpose of alt tags?

Alt tags were added into the HTML framework to assist with accessibility. Back when it was first introduced we didn’t have machine learning programs that could accurately describe an image so the alt tag was introduced as a way to describe an image using text. This allowed screen readers to “read” an image. For people with vision loss, this meant that images on the internet could now be seen. Fast forward to today and the alt tag is still important for accessibility but perhaps machine learning will replace the need for this manual process.

Do alt tags affect SEO?

The short answer is. yes. The long answer is, absolutely yes! Here’s why you should use alt tags to improve your search engine rankings.

It’s a web standard

There are often grey areas when it comes to standards on the web but this one is clear, use an alt tag when you have an image (some exceptions so check the next section). It’s a good idea to follow web standards if you want to rank highly on Google.

Google loves accessibility

Beyond following best practices, helping ALL people use the internet is important for Google. This should be true for you as well because the more people who can access your website the more people who can become your customer. If you’re a developer, Google’s web fundamentals guide has an entire section on website accessibility that you’ll want to read.

How to use an alt tag?

Hopefully by now I’ve convinced you of the importance of using alt tags when you have an image on your website so let’s talk about when and how to implements them. I’ll be using a WordPress example here but the steps are similar for any CMS or hard-coded HTML.

Way-finding

Way-finding images are images the help people navigate a website. These might be next arrows or a checkmark icon. If these images aren’t accompanied by text you need to add an alt tag to the image otherwise people using a screen reader will have trouble navigating your website.

Visuals core to the subject

These images are part of the story you are telling. Sometime it’s an infographic and other times it’s a diagram. Make sure these images have descriptive text to explain what is going on in the visual. Nothing could be more challenging for those with vision loss than reading see figure 1 for details and then realizing you haven’t implemented an alt tag.

Images without meaning

In this case we don’t want to add an alt tag to these images. Often times these are icons or background images. The reason being is that adding text to the image won’t add anything to the experience. In fact, it may distract from it because often times these images are a repetition of the text on the page. It could start to sound like a broken record.

Implementing an alt tag

Here’s how to add an alt tag in an article

  1. After importing the image to your post, click on it
  2. In the right side bar you will see a text box for inserting an alt tag

Take a look at what I used for the image above. Notice it’s descriptive of the image but also connects to the article.

How to add an alt tag in WordPress

If you’ve already have an image in a post or page you can add the alt tag using the media editor in WordPress. Here’s how:

  1. Go to your media library and find the image you want to add an alt tag
  2. Click on the image and the editor box will appear
  3. Edit the alternative text on the right side of the editor window

Lastly, if you’re hard coding the alt tag here’s what to look for:

  1. Find the HTML tag for the image you want to tag
  2. Put this in the <image> tag: alt=””
  3. Add your alt tag between the quotes

No matter what system you’re using the HTML image tag will look something like this <https://imagedomain.com/imagefilepath.jpg” alt=”this is an image alt tag” />

How do you know the alt tag is working

From an SEO perspective, you’ll notice more and more of your images showing up in the appropriate searches that people are making. Your images will appear in Google image searches and on the main SERP in an image pack. You will likely also see a boost in traffic to your website.

In closing, helping others will help you. Get on with those alt tags!

Reach out to me if you have any questions.

Theme: Illdy.