The ALT tag (also called alt text or alternative text) is an HTML attribute that describes the content of an image and is a fundamental element of web accessibility. In case the image is broken, does not load correctly or cannot be seen (as in the case of the blind) the ALT tag provides the information about what is represented in the image.
But the importance of the ALT tag goes much further: it can give your . In this post we will see:
What is the ALT tag
The ALT tag is an HTML attribute that allows you to specify content in written (alternative) text format in case the image is not displayed. That is, it is an attribute that offers information about the image. This alternative text, a priori, is not visible to the user; It would only be if the image does not load correctly, but it is for screen readers (in the case of the blind) and for bots, among which we find Google.
The format of the ALT tag of an image is as follows:
Why ALT text is important for SEO
Improves user experience
The alt attribute offers an alternative text to the image when it cannot be read (either due to a loading error or because the user has a visual disability). In an environment in which Google gives more and more importance to the user experience, the alternative text is an important factor to take into account if we want to position ourselves.
Provides contextual information to Google
Google reviews all the content on the page, and the alt attributes help you understand the visual content of the page. This is important because Google is giving more and more importance to all kinds of visual material (images and videos) as it considers that they enrich the content and give it dynamism. In fact, pages well positioned in the SERPS often contain images and videos.
Help position images
Ignoring the importance of images in the SERPS would be a mistake. Both in Google images and the search engine, images are an important source of attracting traffic and the alt text is an essential optimization tag for them to appear positioned (I’m not saying this, John Müller himself says it).
Alt text is extremely helpful for Google Images — if you want your images to rank there. Even if you use lazy-loading, you know which image will be loaded, so get that information in there as early as possible & test what it renders as.
— 🌽〈link href=//johnmu.com rel=canonical〉🌽 (@JohnMu)
linked
Would you put a link with the empty anchor text? Well, why are you going to do it in the images? When you insert a link in an image, the alt text acts as it would in anchor text in the texts. From an SEO point of view, both act as a help for Google to know what it will find on the landing page.
How to add the ALT tag to an image
Add ALT tag via HTML
If you are not very familiar with the HTML language, don’t worry! There are simple alternatives to insert the Alt text in the different CMS (we will tell you how to do it below) but it is good that you know what is the syntax of the code that will be inserted, whichever method you choose to add the Alt tag. is the following:
is the HTML tag used to embed an image on the page.
- src: is the tag used to specify the path (URL) of said image
- alt: by now you should know what it is: it is the alternative text that we put in an image and that will only be shown as an alternative to the image when it does not load.
- style – This tag is used to specify styles for the image, such as width and height; although you can directly use width: and height: to give it a specific size.
Example:
Add ALT tag in WordPress
Adding an ALT tag is easy, simple and for the whole family. You will only have to fill in the “Alternative text” field that appears when you upload the image. In case you want to do it later (because we know that you have not yet got your act together with image optimization), you can do it by going to “Media” and clicking on the image you want to add to the ALT. A series of boxes will appear that you can optimize. In addition to the alt text, you can add a caption and description to the image to finish optimizing it.
Add ALT tag in Prestashop
In Prestashop there is no section where we can access the media gallery nor is there an “alternative text” field as in WordPress. And so? Don’t be scared, it can be done. When you upload an image, you can fill in the “Caption” field, which will match the Alt text.
Enter any product and click on the associated cover image. There you will have the “Legend” field. What are you waiting for to optimize the images of your products? In case you have not yet decided to do this job, we have to tell you that although it is tedious, it is essential to improve the SEO of your ecommerce: think that many people search for products through images. And although there are many other optimizations that you should take into account, of course the Alt text is one of them.
However, if you are one of those who is lazy or you have a very large ecommerce, calm down, the developers of Prestashop modules are in everything and they exist.
How to see the ALT of an image
Chrome/Firefox Checker
An easy way to view the atl for a particular image is through the Chrome inspector. Hover over the image, right click > Inspect. A window will appear in which you can see the complete HTML code of the selected element (in this case, the image). Within this selected text (it will appear in a darker color), look for the field at=”…” and there you have it. That’s the alt text for that image.
eye! If it appears empty, the image does not have alt text. In that case, you know: get down to work and start optimizing.
Chrome extensions to see the ALT of images
web developer
It is perhaps one of the most complete and useful Chrome extensions for SEO consultants. Among the many options it has, you will find the one to display the attributes of the images. In the menu, go to “Images”, click on “Display Alt Attributes” and voilà! A red box will be displayed showing you the alternative text above each image of the page you are browsing.
SEO Goal in 1 Click
With this Chrome extension you will be able to see all the alt texts of the images in a screen room. In this case, they will not be shown on the page, above each image as in Web Developer, but on a page of the extension itself.
How to optimize the ALT of an image in SEO
If you are more or less familiar with SEO, you will know that Google places more and more emphasis on content that is relevant, descriptive and useful. Well, in the case of the images, he was not going to change his mind. Alt text should be concise, descriptive, and relevant. Blah, blah, blah… and how is that achieved?
- Avoid keyword stuffing: the alt tags help you to optimize the image and the page, but that does not mean that you use your alt to put all the keywords that you want to position (you could consider it keyword stuffing). Insert the relevant keywords embedded in the text of the image in a natural way, always thinking that it should describe what the image shows in order to enrich the content and offer a good user experience.
- be consistent: Related to the above, the alt text must be consistent with the image. Even if you want to put a keyword, if the image is not related to it, don’t do it! The alt text will be displayed when the image doesn’t load and helps blind people to know its content, so if you put an alt text, be honest.
- Be concise and brief: don’t use alt attributes to write a manuscript. Think that there are blind users who must listen to it and, surely, you don’t want to bore them (and neither does Google). Be brief and avoid adding words that do not add value such as “image of”, “photo of”, etc.
Optimized Alt Text Examples
Poorly optimized alt text example
Eiffel Tower
Well optimized alt text example
Eiffel Tower in Paris seen from the Trocadero at sunset
Poorly optimized alt text example
Flowers
Well optimized alt text example
Bridal bouquet of white roses
And you, did you already know the importance of alt tags for the user experience and for SEO? What other tags do you consider essential for image optimization? Tell us in comments!
Facebook Comments
Disqus