The alt attribute for images - how to fill it in and what it is for. What texts does the robot use to search for images?

In today's article, I want to consider why it is still worth filling the Alt HTML attribute for pictures, how it differs from the Title attribute. The material is designed for beginners and novice webmasters who are interested in the question of why and why you need to fill in the Alt attribute. At the end of the article, I have prepared answers to popular questions about these attributes. Let's start with the basics.

What is Alt Attribute?

Alt near the image is an alternative source of information for users who, for some reason (weak Internet, disabled images, etc.) do not display images on the page. It is displayed as text where the picture should be.

Let's look at an example.

For example, I took a photo from a desktop wallpaper site. The main content of the page is images.

After I turned off the display of images in the browser, all graphics on the page ceased to be displayed and you can see an alternative description of the image.

It helps us understand what is on the page. In addition, this attribute is useful not only for the user, it also helps the search robot understand what is shown in the picture. Both Google and Yandex use Alt as one of the ranking criteria for image searches.

The next question arises: what should be added to Alt so that it is as useful as possible for both the user and the search engine?

How to fill in the Alt attribute for pictures correctly

To understand how to fill in the Alt attribute correctly, consider the following example: we have an online pet store, and we want to register Alt for a product card with a "dog ball".

There are several options for filling the attribute:

Option 2. Write in Alt "Dog with a ball in his mouth". In this case, we describe the picture itself, but it should be noted that the request "Dog with a ball in his mouth" is informational. It is not suitable for describing the image of an online store.

Option 3. Alt "Ball for dogs" - this option suits us more, but since there can be a lot of balls in the store, it is better to clarify the request.

Option 4. Alt "Humunga Chomp Ball for Dogs" - this option is optimal for us. The attribute contains the name of the product and its manufacturer. If there are a lot of such goods, you can expand Alt using the color, model name.

Option 5. Alt “Ball for dogs Humunga Chomp, toy Humunga Chomp, buy, inexpensive, Moscow” - this option may be perceived by the search engine as spam and will not bring the desired result.

From these examples it follows that the Alt attribute:

• should be meaningful and describe the picture;
• consist of 3-5 words, but no more than 250 characters (it is difficult to describe a picture in two words);
• shouldn't be spam.

Why is the Title attribute needed?

Title for images gives additional information about the image. It is needed to make it easier for the user to understand what is shown in the picture. The attribute is displayed when you hover over the image.

The picture above shows how the attribute is displayed on the page.

In the HTML code, the attribute is written as follows:

.

It is recommended to fill in Title. It can positively affect the behavioral parameters of the site. When it is difficult for the user to understand what is shown in the picture, he can automatically hover over it with the mouse and the Title hint will help him orientate.

The basic requirements for Title are similar to those for Alt:

• should be meaningful and describe the image;
• consist of 3-5 words, but no more than 250 characters;
• should not be too large, as the text of 3-4 lines can be scared off when hovering;
• if possible, contain a key request;
• shouldn't be spam.

Knowing this, let's move on to the questions.

Answers to popular questions about Alt and Title

Alt are descriptions for images?

Not really. Alt is an alternative description that will be displayed instead of the image if the user does not have images displayed.

Do I have to fill in the Alt and Title attributes for images?

If you are interested in traffic from image search, Alt must be filled in, Title - optional.

Alt and Title should be different or the same?

There are two main opinions on this matter:

1) Alt and Title must be unique;

2) the attributes must be the same.

If we look at how these attributes are filled by sites whose images are in the TOP of the image search, we will see both options for filling.

Yandex writes the following about this:

I believe these attributes can be the same. The main thing is that they give a clear, structured description of your picture.

Do I also need to add Title next to the Alt attribute?

Optional, but keep in mind: the Title attribute in some cases helps to better understand what is shown in the picture. This can have a positive impact on the site's behavioral performance.

Should Alt-images be used with the same keywords as for the article, or different?

Desirable. The main thing is that Alt should be meaningful and describe the picture.

Do I need to write keywords in these attributes?

If these keywords describe the picture, then yes.

How to write Alt attribute correctly: Cyrillic or Latin?

If your site is in Russian, fill it in Cyrillic.

How to write - with a capital or small letter?

Irrelevant.

And if the article has already been indexed by search engines, can you add a description to the pictures or not?

Can. When search engines re-index your page, they will consider these descriptions.

Where to fill in Alt and Title?

It all depends on what CMS your site is made on.

If it's pure HTML, then:

Usually, the fields for filling Alt and Title are in the image parameters. For example, if your site is built on WordPress, opening the image options, you will see a field to fill in the Alt attribute. In the advanced settings, there is a field for the Title attribute.

If your site is on 1C-Bitrix, in the additional settings of the image parameters there is a field for the Alt attribute. The Title attribute will be pulled from the Title field.

You need to understand that everything is individual. Much depends on what CMS your site is made on and how it is configured.

Is it worth and is it possible to prescribe Alt and Title for your pictures in the comments?

I do not see the need for this, and hardly anyone in the comments has the opportunity to optimize images.

When I write title and viola in Russian for pictures, hieroglyphs are displayed on the site, what should I do?

This is due to the encoding. You need to convert the current encoding to UTF-8.

Outcome

Let's go over what Alt and Title should be.

Basic requirements for the Alt attribute:

• meaningful, describes the image;
• about 3-5 words long (up to 250 characters);
• if possible, should include a key request;
• shouldn't be spam.

Why fill in Alt:

1. taken into account by search engines when ranking pictures, which means that if your picture gets to the TOP, it is a source of additional traffic;

2. will be useful to a user who has disabled images on the site.

Title attribute:

• meaningful and describes the image;
• about 3-5 words or up to 250 characters long;
• if possible, should contain a key request;
• no spam.

Why fill in Title:

1. will be useful to the user who finds it difficult to figure out what is shown in the picture;
2. Title hints can have a positive impact on the behavioral indicators of the site.

Greetings, dear users of the site. Optimizing your blog is a complex process that requires certain skills, experience, and if you don't have it, then you need to have a large knowledge base, which we take from articles on blogs of popular webmasters.

Many people talk about the fact that SEO is dying, but there are still many who continue to follow the rules of these three letters. Anyone who is completely ignorant of what SEO is can be stumped. However, this problem is easily solvable, for everyone. Having learned the main aspects in this area, you will be able to master the rules of promoting your blog in search engines, and as we know, this is the most important thing.

So, what will today's article be about. Now we will talk about the mistake of many designers, bloggers, etc. In general, not attentiveness in optimizing images on the site, which affects the promotion of your resource on the network.

What is not mindfulness? For example, the title of a picture should consist of a key request for which the article is tailored. Yandex, Google pay attention to this, but people in the blogosphere do not even think about it.

Let's get started!

What is alt and title for images?

The "alt" attribute!

Its purpose is to display a fragment of the text of a picture. Most often, this is a description of the image; it is not visible to your users. Such tags are very important for search engine promotion. They mean practically nothing to humans.

Let me explain it on my fingers. The search robot walks through the sites, came to you, and if you remember, in the article about unique pictures, I wrote that he pays attention to thematic images for the post, but not only that the picture should be, it, in turn, should be optimized, from you need to register a name.

Thus, the search engine check will capture your entire article and there will be no shortcomings and minor errors. Based on this, the wanderer will be near the TOP-10 or even fly there.

TOP means high traffic. And how to build it up, I wrote in an article about

The title attribute!

"Title" is the title. Probably everyone knows about it. In a picture, this is a name that is available to everyone, for example, when we move the mouse cursor over the image, a short text appears, which is the title. With this, everything is clear. You can specify the title on your PC or laptop, and then you drop the picture into the post itself and, again, write the title and description (alt).

As for where to write, don't worry.

In the Title, enter some key request. We wrote a post about a sitemap for people, then in the title and fill in the field, with the same phrase, sitemap for people. The description or alt is not visible to anyone except the robot, therefore something like this can be done:

Sitemap for people, plugin such and such, the line must be written here that, etc. Try to keep the article compact. Discard those only the main aspects, just a few lines.

Here's another about "title". They should not be longer than 5 words. And also it is desirable that you write them in Latin, that is, English. And the most important image format should be jpg. This reduces weight, which means loading will be faster, which has a significant impact on site traffic.

You can reduce the weight of the picture in Photoshop. We open it. Click the file and then Save for WEB. Where the number 50, 60 or some other is written, you can adjust it, the less, the lower the weight. If you don't have photoshop yet, then go ahead and master it. After all, this is an essential element of any webmaster.

If someone doubts that image optimization has a big impact on blog promotion, then I can say one thing - do not hesitate. Try to check, conduct an experiment. The main thing is not to close your eyes to this, because it is not a pity to spend the extra 5 minutes. Especially if you wrote an article before that and put a piece of yourself there. I think it will not be superfluous, how best to arrange it, but what do you think?

Why is it important to write title and alt tags? How are they added to images?

I told you a little about this. But now we will understand in more detail. See below for a list of steps to take when posting a new blog post.

Here they are:

• The first step, of course, is to write an article and find a unique picture. As a rule, everyone makes a standard template, their own, and they already insert an image there, screenshots, for example, or draw something, or even order from an artist.
• Looked at the key phrases you used for the post and added one to the title;
• The second key was registered in alt, in the description and added a few more words, diluted the request with one word.
• Now we save the changes and add the picture to the text, then look through the article and hover the cursor over the image, see which title is displayed. Everything is ready.

In short, the advantages are as follows, this is for those who are not yet fully convinced.

1. More traffic;
2. Its quality is higher, since you indicated the exact keys to which the article is devoted, the visitor will hammer them into the search and find the information you need, which means he will stay on your blog longer and the number of refusals will be less;

This infa is for those who have been working on their site for more than a year, but there is no result. Perhaps this is the problem!

This is where I will finish writing the article. I wish you the best of luck with your promotion. IMPORTANT! Do not go away from such seemingly trifles. Listen to the recommendations that will definitely help. Bye everyone!

Yours faithfully,Zhuk Yuri.

Each web page is created using markup - code that is written in a specially provided language (most often HTML). The user's browser, in turn, is able to 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 the web page are provided by the source code of the site we visit.

Optimizing your code

As you might guess, every letter of this code, every character 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). Such subtle ones include, for example, the ALT attribute. It is on the pages of many resources, and very often we simply do not notice it.

In this article, we would like to focus on 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 convenience of the user in working with it.

ALT?

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

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 consists of special attributes (for example, IMG, ALT, FONT, and so on). Each of them is responsible for working with a particular design element. In practice, the ALT attribute mentioned above is used for images that can be found on site pages. More specifically, it is used to create a description of the pictures by which the user (site visitor) can easily and simply figure out 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 used in practice for a reason. Webmasters need descriptions of their images as much as website visitors themselves (and most likely even more). After all, if all images lack the ALT attribute, a person can do this even if explanatory texts are added to the pictures on the page. On the other hand, search robots (with an empty ALT) may not rate the site highly enough, reduce its position in the search results and, thus, will not bring enough 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 cannot be neglected.

Search engine bonuses

To understand better than the benefits of correctly filled description tags for pictures, we will give a small example. Let's say there is a site with images on it. If you do not prescribe the ALT attribute, the user will not suffer, since he will in any case see what is shown in this or that photo. A completely different outcome awaits the owner of the resource, who will neglect the above tag, which will lose some of the traffic from image catalogs, for example.

How do I write the ALT attribute?

Technically, there is nothing difficult to fill in under this or that picture, it is obvious: you need to go to the HTML editor on your site and find the image code (starts with IMG and ends with it). There is code inside this block of code. This is what they mean when they say that you need to register the ALT attribute. It is done like this: “alt \u003d“ description ”.

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

What do they write in the attribute?

Of course, when you are faced with the task of writing the ALT attribute, you are not thinking about the technical side. Most often, this question is asked if the webmaster does not know what information he needs to provide about a particular image. Because of this, it is 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 that space blank. Here it should be clarified that everyone independently makes decisions about which description to indicate.

Requirements

At the same time, there are several basic rules (or, if you prefer, requirements), according to which everyone can add the ideal attribute for their pictures. They consist of a small number of points, 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 spell the ALT attribute correctly, the solution is simple: use no more than 2-3 words. Text of this size will, firstly, be perfectly read by a search robot (and make your site more relevant); secondly, such a description is more understandable for the users themselves. Agree, no one will read the whole sentence if you just want to know what is shown in the picture. It is enough to briefly and accurately state the description, which will be useful to both you and your customers.

Don't forget about the semantic load. If you are posting a photo with an elephant, be sure to describe its breed or history; specify why it is shown in this particular photo, what would you like to say. It will be helpful for the visitor to know your thoughts about this elephant.

Another important point (which was established during numerous practical tests) - If you are looking for how to prescribe the ALT attribute to a picture, remember: it must be selected unique for each of the listed photos on the site. For example, it would be wrong to publish three pictures in a row with the caption “my elephant” - it will only harm your resource in search results. Better to name the images “elephant 1” and “elephant 2”, which will make them more unique.

Finally, remember about the parameters of the images themselves you are looking for, how to add the ALT attribute. It is important for pictures to meet a number of criteria - not too small, look realistic. That is, if you specify a description, then do it for more serious images that are considered more weighty. Do not specify the ALT attribute for any small smileys or anything similar.

ALT search

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

If you don’t have such information and you didn’t think at all about starting to promote your resource little by little, we suggest starting to look for databases of such “keywords” with which you can easily create new sites. For this, services like Google Keyword Extract Tool or Yandex.Wordstat, which show search statistics for certain phrases, are perfect. By “playing” with these settings, you can significantly increase the share of search traffic on your sites and thus begin to derive new benefits. The main thing is not to have 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 used to create the simplest sites - HTML. This is very easy to do, since it describes an elementary, basic language. In order to still register the tag in the pictures, you need to arrange it yourself through the source code. Or, using the new instructions, start over. Be that as it may, and the indication of ALT tags is that ideal case of mutual benefit, when both the visitor and the owner of the resource are satisfied.

Specifying a tag can also bring new visitors - this phenomenon is especially often observed on services such as Google and Yandex Images. When you click on a picture, the site independently determines the source from which the image was taken, and redirects the visitor. And this, as you know, is very important to be able to do in the future.

Hi people. In order not to waste your time, let's be short and to the point.

Title of an image is an inscription that pops up when you hover over an image. This is to give a hint to the visitor. Tell what is shown in the picture or where to pay attention.

Alt pictures - from the English word alternative. This is such a useful thing that search engines love to index in order to determine what is shown. Also, it will be visible if the user turns off the display of images in the browser. Which does not make sense and is done on rare occasions.

If, nevertheless, the user turns off the display of graphic content or some kind of failure occurs on someone's side, then instead of a picture, a small icon with text will be seen. This text is the alt of the image.

Alt and title images for SEO

For the title of the picture, it has a minimum value. It is not indexed willingly, but it can play into your hands in behavioral factors. It's 2018, seo now is about usability and quality content. Therefore, grab the user's attention in any way.

Even think for yourself, it's more pleasant when a tooltip appears at the image.

But the alt picture is a treasure. First, GoogleBot considers its absence a mistake, Yandex is more loyal. Secondly, it is willingly indexed, and such an image gets into the "Pictures" section of the search. This means that in this way you can attract additional traffic to your site.

Thirdly, since it is indexed, that is, the ability to use it to increase the value of the page. It will be good if you add an extra low-frequency request to alt. But here you need to be careful.

How to fill in the alt and title correctly for images

C title is much simpler. There are no rules for a search engine, but this does not mean that you write any heresy here. Above, we have made a reference to behavioral factors. It is advisable for you not to bother the user, to be useful to him.

1) It doesn't have to be long. Agree, a hint in 4 lines will cause rejection.

2) Must relate to the image somehow.

3) Should not be duplicated with the main title, headings h1-h5, with alt attributes.

The alt image has weight with the search engine, so there are restrictions with the rules, but so are the possibilities.

1) One word is not enough, it is advisable to keep within 3 words. The maximum number of characters is 250.

2) It must match the content of the image.

4) Desirable, should not be repeated with other alts on the page.

So, when adding another image to your blog, think about it. Maybe some person wants to find her? Try to turn it into extra traffic.

Where to fill in the alt and title of images using the example of wordpress

For example, in WordPress, you just need to go from the control panel (console) to the section "Media files" — "Library"... Next, select any image.

Or, when editing an article, just click on any inserted picture, then on a pencil.

Of course, the example of wordpress is the easiest to show, but many popular CMS provide this opportunity. For example - Joomla. There are some pitfalls, but most graphic content can be alt if you click "Edit Image"

That's all. We really hope that we were useful to you. If yes, please like it. This motivates us to make more high-quality and interesting content!

Regards, Your Essence.

Attributes title and altshould be used for each imagesor links on the page so that search engine robots understand the content of each links or images... Always remember that search engine robots do not view sites the way you and I do.

Below you can look at examples of use attributes title and altfor imagesand links.

<A HREF \u003d "http://www.yoursite.com" title \u003d "title of your page" alt\u003d "your page title"\u003e your page title

Using a fictitious example, consider how at-tributes are actually used titleand alt for a link to, say, an e-book offered for download from the site page "Fundamentals of Mortgage Lending":

\u003d "/ downloads / skachat-besplatno.html" target \u003d "_blank" title\u003d "Anyone - knowledgeable reader will find here information about how the interest rate on a loan is formed, find out the difference between floating and fixed interest rates, get an idea of \u200b\u200bhow to calculate the amount of the loan that he, as a borrower, can afford to borrow, and much more another. " alt\u003d "How to choose a mortgage loan that best meets YOUR goals and capabilities"\u003e How to choose a mortgage loan that best meets YOUR goals and capabilities