How to add the ALT attribute to an image correctly?

Table of contents:

How to add the ALT attribute to an image correctly?
How to add the ALT attribute to an image correctly?
Anonim

Every web page is created using markup - code that is written in a specially provided language (most often HTML). The user's browser, in turn, can read this code in order to properly display all the information that the creators of the resource wanted to convey to us. It turns out that all the elements that we see on a web page are provided by the source code of the site we visit.

Code optimization

set the ALT attribute
set the ALT attribute

As you can guess, every letter of this code, every symbol has a meaning. Also, interestingly, it happens that visually the site may not contain those elements that are extremely important for its optimization (meaning the correct setting of the resource for search engines). The ALT attribute can be attributed to the number of such hardly noticeable ones, for example. It is on the pages of many resources, and very often we simply do not notice it.

In this article, we would like to pay attention to just this element of web design. Here we will tell you why it is so important for the correct ranking of the site, the growth of its traffic and the user's convenience in working with it.

What is the ALT attribute?

Let's start from the very beginning: we will describe what this article is aboutspeech and why we need this attribute at all.

ALT attribute
ALT attribute

So, to understand this text, you first need to understand the HTML markup language. This is the code on which the basic web pages are written, which, as already noted, has the property of being displayed in the browser. The entire language is made up of special attributes (like IMG, ALT, FONT, and so on). Each of them is responsible for working with one or another design element. In practice, the "Image" attribute mentioned above is used for pictures that can be found on website pages. More specifically, with its help, a description is created for the pictures, according to which the user (site visitor) can easily understand what is shown on them. Surely you yourself have come across such descriptions - they appear when you hover the mouse over the picture.

Practical value

Of course, these attributes are applied in practice for a reason. Webmasters need descriptions for their images as much as site visitors do (probably more). After all, if all images lack the ALT attribute, a person may not even notice this if explanatory texts are added to the pictures on the page. On the other hand, search robots (with an empty ALT) may not rank the site highly enough, reduce its position in the search results and, thus, will not bring in a sufficient number of visitors. Therefore, we can say with confidence that the descriptions for the pictures on the site also play an important role for the webmasters themselves, so they cannotneglect.

All visible images are missing the ALT attribute
All visible images are missing the ALT attribute

Bonuses from search engines

To better understand the benefits of correctly filled in description tags for pictures, let's give a small example. Let's say there is a website with images hosted on it. If the ALT attribute is not set, the user will not suffer, because in any case he will see what is shown in a particular photo. A completely different outcome awaits the owner of the resource, who will neglect the above tag, because of which he will lose some share of traffic from image directories, for example.

How to write the ALT attribute?

Technically, there is nothing difficult in filling in a description under this or that picture. This is obvious: you need to go to the HTML editor on your site and find the image code (starts with IMG and ends with the same). Inside this block of code, there is code. This is what they mean when they say that you need to write the ALT attribute. This is done like this: “alt=“description”.

If you do not work with pure code, but use some separate “engine” for the site (for example, Wordpress or Joomla), it integrates a special mechanism for adding “alts” through which our site will be remembered by search engines. If you fill in a new ALT, the update is on your page.

What do they write in the attribute?

Of course, when you have the task of writing the ALT attribute, you are not thinking about technicalside. Most often, this question is asked if the webmaster does not know what information he needs to provide about a particular image. This makes it difficult to say what information will benefit the site from the point of view of search engines.

In practice, there are many approaches to solving the description problem. Someone works with typical templates, according to which the tag is simply filled with keywords for which the page is created. Perhaps this is the most common practice that can be found often. Sometimes, instead of looking for how to write the ALT attribute, the user simply leaves this space empty. It should be clarified here that everyone makes their own decisions about which description to indicate.

missing alt attribute
missing alt attribute

Requirements

At the same time, there are several basic rules (or, if you like, requirements) according to which everyone can add up the ideal attribute for their pictures. They consist of a small number of items, each of which refers to the descriptions of photos and pictures on the site.

For example, the first such requirement is the length of the entire text. If you are looking for how to write the ALT attribute correctly, the solution is elementary: use no more than 2-3 words. Text of this size will, firstly, be ideally read by a search robot (and make your site more relevant); secondly, such a description is more understandable to the users themselves. Agree, read the whole sentence, if you just want to know what is shown in the picture, no one will. Suffice it to be brief and precise.a description that will be useful to both you and your customers.

Don't forget about the meaning. If you post a photo of an elephant, be sure to describe its breed or history; specify why it is depicted in this photo, what you would like to say by this. It would be helpful for the visitor to know your thoughts on this elephant.

Another important point (which was established in the course of numerous practical tests) is uniqueness. If you are looking for how to add the "Image" attribute to an image, remember that it must be unique for each of the listed photos on the site. For example, publishing three pictures in a row with the caption “my elephant” will be wrong - this will only harm your resource in the search results. It's better to name the images "elephant 1" and "elephant 2", which will make them more unique.

Finally, keep in mind the parameters of the images themselves you are looking for, how to add the ALT attribute. For pictures, it is important to meet a number of criteria - not to be too small, to look realistic. That is, if you specify a description, then do it for more serious images that are taken into account more weightily. Don't qualify the "Image" attribute for some small emoticons or something like that.

Search ALT

Finally, we talked about the basics of an attribute, some of the rules for its compilation and the requirements of both parties (both users and search robots) to them. Now let's think: how to search for keywords and phrases,which we will prescribe on our website? As noted above, the search should be directed towards ready-made databases of keywords that really start attracting customers to your site. Of course, this cannot be achieved if you still lack the ALT attribute. Take ready-made keywords and phrases that you use in your content and paste them into pictures.

If you do not have such information and you have not thought at all about starting to gradually promote your resource, we suggest that you start looking for databases of such “keywords” with which you can easily create new sites. For this, services like Google Keyword Extract Tool or Yandex. Wordstat are perfect, which show search statistics for certain phrases. By “playing” with these settings, you can significantly increase the share of search traffic on your sites and thereby begin to reap new benefits. The main thing is to avoid a situation in which all visible images lack the ALT attribute.

Conclusions

So, what can we say about the attribute described in this article? It is part of the language in which the simplest sites are created - HTML. It is very easy to do this, since it describes an elementary, basic language. In order to still register the tag in pictures, you need to independently issue it through the source code. Or, using the new instructions, start making out again. Be that as it may, tagging "Image" is an ideal case of mutual benefit when both the visitor and the owner of the resource are satisfied.

Indicating a tag can lead to newvisitors - this phenomenon is especially often observed on services such as Google and Yandex Images. When you click on an image, the site independently determines the source from which the image was taken and redirects the visitor. And this, as you understand, is very important to be able to do in the future.

Recommended: