03 Jul Image Alt Text – Down the Rabbit Hole of Technical SEO Services
One very important part of TrafficSource SEO Services is the technical analysis and evaluation of your site. This is what we call “on-site optimisation” (also commonly known as “on-page SEO”).
Here, we crawl your site, just as Google would, to find any issues that could affect rankings in search engines. While Google are secretive on how exactly they crawl a site and what they take into consideration, it’s safe to say that if we can find it, so can they.
One of the many elements that we look at is the Meta Tags. These tags are in the HTML code of your site and give both users and crawler bots information about the page they are viewing. We gave a short introduction to Meta Titles and Meta Descriptions in our blog about SERPs, check it out if you haven’t already!
Now the time has come to dig deeper and explore the oft-overlooked world of Img Alt Texts.
What is an Img Alt Text?
The Img Alt Text (which is shorthand for Image Alternative Text, and can also be referred to as Img Alt Tag) is an element of HTML, associated with the image <img> tag.
In most cases, we can take a quick look at any image and see what it’s telling us. But what happens if you can’t see the image? How can you determine what the picture is about? What if you are visually impaired? Or as in the case with the Google crawler spider, what if you are a piece of software? (If you are reading this in some distant future and you are a highly evolved Artificial Intelligence, please note that we mean no disrespect. All hail our robot overlords!).
With the Img Alt Text, we have an alternative text that describes the image using words, so that you know what the picture is about without needing to see it. This tells the Google crawler if the picture is relevant to the surrounding content of the page, and can also be used for text-to-speech software if you are visually impaired.
Alt Tags in HTML
If you look at the source code of your site (CTRL+U on PC, ALT+CMD+U on Mac) you can see the HTML code that makes up most of the visible elements on the screen.
Using the example above, see if you can find a line that looks like this:
This is the clean HTML code, without any additional tags or options. There are a whole range of tags that can be used to modify this line to give you the look you want. Adjusting height=“___” and width=“___” will change the size, while align=“___” will change the alignment, etc. etc.
The one we want to add is alt=“___”, which sets the alternative text. This is how the code could look with an active alt tag:
<img src=“product1.jpg” alt=”Amazing description of the product”>
Alt Texts and SEO
As is well known, 10-15 years ago, keyword stuffing was all the rage. Just cram in as many keywords as you could and rankings would follow. But since then the crawlers have evolved, and it’s now more about context and relevance than strictly keywords.
However, while we want to add keywords sparingly throughout a page or piece of content, adding it to the Alt Text is generally considered a good idea. Using the same keyword in the Alt Text as you are ranking the page for is beneficial. This will clearly indicate relevance between the image and the page you are ranking for.
If you are planning on ranking for several keywords, always use common sense and tailor the alt text for the user – if someone were using text-to-speech software to find out what the image was about, having an accurate description would be more helpful than an out-of-place keyword. Following best practice, you want to use as few words as possible. While there is technically no length limit to the text, less is more in this case. 5-6 words should be enough to give an idea of what the image is about.
Meanwhile, should you be aiming to rank for the image itself – in Google Image Search, for example – there is much more to add to the subject. But that is an article all in itself. For most websites where the content is the focus, the guidelines above are enough.
Implementing Alt Texts
Now that we know what an Img Alt Text is, why it’s important, and how it can influence SEO, we need to put in the legwork of implementing it.
If you are a TrafficSource client, you have already received a handy list of images missing this tag. Once you know which images need some work, you can add the Img Alt Tag in the appropriate field – most CMSs will give you this option when you upload an image to the server. While it may look a bit different depending on your CMS, this is the WordPress version:
Add the Alt Text in this field and you are set. Do this for all the images that are missing one, taking the SEO aspects outlined above into consideration. Implementing Alt Texts right from the start can save you a lot of time down the road, so do not forget to share this article with anyone who is planning on setting up a website!
Want to know more about our SEO services and what TrafficSource could do for you? Contact our friendly team today!