What is alt in html. Do I need to include keywords in these attributes? Why is it important to include title and alt tags? How they are added to images

Facebook

Alt is an attribute for the img tag that sets alternative text for the image. Text information is displayed when graphics loading is disabled in the user's browser and makes it clear what is shown in this picture. The HTML tag gets its name “alt” from the word alternative – Alternative option text.

Why fill in the alt attribute?

In a search engine, not only text is indexed, but also graphic information, and images are one of the sources additional traffic. To show relevant images when searching for images, Google and Yandex focus on tags that say what is presented on them. Thanks to this, the user gets exactly what he was looking for in the search results.

The search robot primarily focuses on images with the alt attribute, so from the point of view of SEO optimization this is very important point. For example, if you have more than 1,000 images on your site across hundreds of articles, then each of them can bring in additional traffic.

Visitors will only see the alt attribute if image loading is disabled or if the Internet connection is poor. Loading graphic elements is carried out after the information is received by the browser, so the alternative text is visible on the monitor screen earlier.

The alt attribute will only help when searching for images, so it will not affect organic results in any way.

Rules for correctly filling alt

For achievement maximum result When filling out alt tags, you must adhere to the following rules.

Search engines ignore long descriptions, so adjust your alt to 5-6 words, but don't exceed 200-250 characters.
The description of the image must clearly correspond to its content. For example, it doesn't make sense to insert the phrase "house cat" into an image with a car.
To increase the effect of image optimization, it is recommended to use keywords from an H1 tag or article title, but only if they are similar in meaning.
Do not use in text a large number of keywords, do not allow spam in the description.
Do not optimize the alt attributes of images that belong to the background of your site or menu items. Their tag should be empty or absent altogether. If possible, images for design elements can be included in CSS sprites.
Don't make things up additional tags alt for similar pictures from the same material or product. For example, you have an online store of jackets, each with several photos. This means that you write the same name for everyone, you just can add the numbers 1, 2, 3 for differentiation.

From the author: The alt attribute for pictures allows you to set the text that will appear for the user if the display of these same pictures is disabled. But that's not all you need to know about him. Let's take a closer look at how to apply this attribute.

In general, to understand how it is written, you need to know html basics, have at least some understanding of how text and images are added to web pages. In particular, a photo is a single img tag, which has only one required attribute - src. This is the path to the file.

Obviously, if you enter it incorrectly, you will not see anything on the screen. In short, to display a picture you just need to write this in the right place in the html code:

< img src = "path to image">

This should all be clear, but besides src there are other attributes that can be written in img. Now they are optional, that is, you can do without them. In particular, alt. An attribute that displays so-called alternative text.

Why alternative? Because it will only be displayed if graphics are disabled in the user's browser. In this case, there must be some kind of alternative? In any case, if you insert a photo of the Eiffel Tower into an article, then that's great, but if suddenly there is a person who has turned off the display of images in his browser, he simply will not see anything in this place. There will simply be a cross (or icon) that indicates that there should be an image in this place. For example, in this image you can see a world map:

But if a person has graphics display turned off, he will not see this. If you enter alt, then next to the cross there will be explanatory text. In this case, a person will have at least an approximate idea of what is on it. I also suspect that speech browsers can somehow read the contents of this attribute.

The influence of alt in SEO

Oh, how many discussions I’ve seen on SEO forums about whether filling out an attribute improves the ranking of a site and its individual articles in search. It's safe to say that today everything remains the same. Some people think that filling out the alt helps with search engine optimization, while others think that it has absolutely no effect.

I would say that both opinions can be challenged, and it is better to choose something in between. That is, not to say that this gives a direct significant result, but at the same time not to think that there is absolutely no sense in it.

You know, I would compare alt filling to cross-browser layout (if anyone understands what we’re talking about). This is when the site adapts to everything popular browsers. If the most important pictures On your site you will fill in this attribute, you will make your project at least a little better. You will also make your project a little more accessible to people.

Of course, today there are fewer and fewer people who use browsers with images disabled. I would say that there are very few of them. But if you are a perfectionist and want to idealize your project, please fill out this attribute, who is stopping you?

How to fill alt?

But this is the most important thing, in my opinion. If you’ve read my past articles on SEO, you’ve probably heard more than once that search engines love naturalness. Accordingly, the ideal attribute filling would be the most accurate and short description Pictures. As a rule, 30-100 characters are enough. Wherein maximum length should be approximately 250 characters. But why would you describe the image in such detail?

At the same time, you should try to write such text in the attribute so that when reading it you can mentally imagine the picture, even if you do not see it. Many optimizers advise adding an alt to the first image in a publication, which will contain a key phrase.

Here you need to understand that search engines have become smarter. If you inserted some kind of left-handed picture and boldly wrote the key there, positive result It's not worth the wait. I'm not saying that the search engine will punish you, but there will be no effect as such.

Moreover, if you cram all the pictures more keys and do this with every page of your site, then the punishment will be taken very realistically. In this case, it's a matter of time.

How to be? If you insert some key phrase in alt, add it only to the description of one image per article. Also, do not try at any cost to add a phrase in its exact occurrence. The request may be inserted with dilution.

Well, the most important thing is to try to write alt in such a way that it is as natural as possible, as if you accidentally used the key there. For this, the description may have to be a little larger, but this is only for one picture where you will insert the key.

Actually, for the rest of the images, if there are several of them in the article, you can fill in the alt, but you can not. It's yours personal decision. In general, it is important to fill out this attribute without any unnecessary expectations, as if you fill it out correctly and will be in the top tomorrow. There may be no effect, or it will be minimal, but the main thing here is that you did everything efficiently.

So let's summarize the basics of alt filling:

You need to describe the picture as simply and briefly as possible

If you insert a key phrase, do it only 1 time and so that it looks natural

For other pictures, fill in the alt at your personal request

Again, do not think that this is some kind of guide to action. These are just recommendations. Each webmaster does it differently. Some people never fill in the alt of any picture, some do it as recommended here, and some spam keys.

Of these three options, the first and second are optimal. That is, there are 2 solutions: either never touch the alt at all, or fill it as naturally as possible.

Should I fill in alt or not? Depends on the site

For example, you are driving personal blog. Well, why did you give up this alt? Most likely, you will need pictures purely to dilute the text, but not to attract customers. Another thing is a commercial site. For example, an online store. Here pictures play a huge role, because people most often buy what pleases their eyes the most.

Accordingly, for each product in an online store it is reasonable to specify an alt. Let's look at an example of how to do this correctly. Let's say we have a product - an ASUS G560 laptop (don't search for it, I made up the name). Naturally, there is a photo of this laptop. How to write alternative text for it? Here are the options:

“Photography”, 1, “yyavpv” and so on - these are all options that are in no way suitable. Based on this description, it is absolutely unclear what product we are talking about. The text “photo” or “picture” (as photos are often signed) is generally the funniest, because people already understand that this is not a video. It's like hanging a sign on an elephant saying that it is an elephant.

“Cool red laptop for gaming” is a good description if the laptop is truly a gaming laptop. But if you are targeting traffic from pictures, then this description is not the most optimal, since 0 people type a similar phrase in the search. People type names more often specific models or at least the manufacturer.

“Laptop” is a description that can be characterized as follows: better than nothing. But it’s also not optimal, since there are no specifics. You won’t sign every product like this, will you? The description must be unique for everyone separate laptop.

“ASUS laptop G560” – best option, there is a specific description. Possibly if the product is present in different colors, you can add color, as well as words that are often used when describing laptops: for office, powerful, gaming, etc.

“ASUS G560 laptop, buy in Moscow with delivery, reviews” – looks like spam, right? This is the worst option of all.

Bottom line

There's not much more to say here. Optimizing images with the alt attribute is something that can help you improve your site and get some traffic from image searches. This is a matter for perfectionists, because it is quite possible to do without it. And of course, it’s worth considering what kind of website you have. If it is commercial, then it is advisable to sign the images, but if you are running a blog or information site, then you can completely forget about it.

Each web page is created using markup - code that is written in a specially designed language (most often this is 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 that we are visiting.

Code optimization

As you can guess, every letter of this code, every symbol has a meaning. Another interesting thing is that it happens that visually the site may not contain those elements that are extremely important for its optimization (meaning correct setting resource for search engines). These 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 pay attention to just this element of web design. Here we will tell you why it is so important for the correct ranking of a site, the growth of its traffic and the user’s convenience in working with it.

ALT?

Let's start from the very beginning: we'll describe what this article is about. we're talking about and why do we even need this attribute.

So, to understand this text, you first need to understand the language HTML markup. This is the code in which basic web pages are written, which, as already noted, tends to be 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 one or another design element. In practice, the above-mentioned ALT attribute is used for images that can be found on website pages. More specifically, with its help, a description is created for the pictures, from which the user (site visitor) can easily and simply understand what is shown in them. Surely you yourself have come across such descriptions - they appear when you hover your mouse over the picture.

Practical significance

Of course, these attributes are used in practice for a reason. Webmasters need descriptions of their images just as much as site visitors themselves (and most likely, even more). After all, if all images do not have 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 rank the site highly enough, lower its position in the search results and, thus, will not bring a sufficient number of visitors. Therefore, we can say with confidence that descriptions of pictures on the site also play an important role for the webmasters themselves, so they should not be neglected.

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 posted on it. If you do not specify 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 result in him losing some share of traffic from image catalogs, for example.

How to set the ALT attribute?

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

If you do not work with pure code, but use some kind of 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 out a new ALT, the update appears on your page.

What is written in the attribute?

Of course, when you have the task of specifying the ALT attribute, you are not thinking about technical side. Most often, this question is asked if the webmaster does not know what information he needs to indicate 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. This is perhaps the most common practice that can be seen often. Sometimes, instead of looking for how to write the ALT attribute, the user simply leaves this space empty. Here it should be clarified that everyone makes their own decisions regarding which description to indicate.

Requirements

At the same time, we can identify several basic rules (or, if you like, requirements) by which everyone can put together the ideal attribute for their pictures. They consist of a small number of points, each of which relates to 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 correctly write the ALT attribute, the solution is simple: use no more than 2-3 words. Text of this size will, firstly, be perfectly readable search robot(and make your site more relevant); secondly, such a description is more understandable to 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 clients.

Don't forget about the semantic load. If you post a photo of an elephant, be sure to describe its breed or history; specify why it is depicted specifically on this photo what would you like to say? It will be useful for the visitor to know your thoughts regarding this elephant.

Another important point(which was established through numerous practical tests) - If you are looking for how to add an ALT attribute to a picture, remember: it needs to be selected 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 - it will only harm your resource in search results. It is better to name the images “elephant 1” and “elephant 2”, which will make them more unique.

Finally, be aware of the parameters of the images themselves that you are looking to add an ALT attribute to. For pictures it is important to meet a number of criteria - not be too small in size and look realistic. That is, if you provide a description, do it for more serious images that count more heavily. Don't specify the ALT attribute for some little emoticons or anything like that.

Search ALT

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

If you don’t have such information and you haven’t thought at all about starting to gradually promote your resource, we suggest you start looking for databases of such “keywords” with which you can easily create new sites. Services like Google Keyword Extract Tool or Yandex.Wordstat, which show search statistics for certain phrases, are perfect for this. “Playing” with these settings, you can significantly expand the share search traffic on their sites and thereby begin to derive new benefits. The main thing is that a situation does not arise 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 websites are created - HTML. This is very simple to do, since it describes the elementary, basic language. In order to still add a tag to the pictures, you need to create it yourself using source. Or, using new instructions, start processing again. Be that as it may, the indication ALT tags- this is the ideal case of mutual benefit when both the visitor and the owner of the resource are satisfied.

Specifying a tag can also bring in 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 understand, is very important to be able to do in the future.

Hello, friends.

Today is the next material on working with images.

I continue to publish promotional materials on this moment This is the second article that deals specifically with images on our site. The first was about creating high-quality screenshots.

In this article I will show how to optimize images on a website using the title and alt attributes to promote pages in search engines Oh.

The article will not be very long, but useful.

Let's start with the fact that you must understand one thing. Not everyone pays attention to the little things when promoting their websites. Especially for various little things technical plan, such as image optimization.

It's just one little thing out of a lot, correct use which can help you beat your competitors on search pages. If you use all the little things together, you will get a much greater advantage over other sites.

Therefore, it is extremely undesirable to miss such a moment. And now we’ll talk about how to properly optimize images on our website and what stages this process consists of.

I divide the entire optimization process into 3 stages:

Creating a unique image;
Preparing the final image for placement on the site, which will not load the blog. On at this stage We reduce the image size so that pages load quickly;
Correct optimization of the title and alt attributes of the image.

You can also add here correct name source file, before uploading to the site. We'll talk about this below.

I will highlight separate detailed articles with video tutorials about creating a unique picture and what follows. Now I want to focus my attention specifically on the title and alt attributes, since many fill them out incorrectly or don’t fill them out at all. But in vain!

After all, by filling them out, we can add relevance (correspondence to the promoted query) to our pages and increase the amount of traffic to the site from image search. Also make the page better in terms of description, since even pictures will show search engines that they are placed appropriately, which means the page is even higher quality.

Well, now let’s look at the process of image optimization in practice. As I said above, let's consider filling out all the data - title and alt images.

But first, I give a video presentation in which I explained the main points, which will be enough for you to do everything correctly and avoid making serious mistakes. Enjoy watching.

How to correctly fill in the title and alt of images?

First, I will say a few words about these attributes. What are they needed for?

The main task is to let search engines understand what this or that image is about. Also, these parameters allow images to be included in image search for certain queries, which we will write in these attributes.

Now let's look at how to fill them out.

On this score there is simply a huge number opinions. I formed my own vision based on studying various courses and reports from people who understand websites.

First, let's look at what these attributes are.

Title - in all cases, this is the title tag of something (post title, images, etc.);
Alt is an attribute of the img itemprop="image" tag that describes the image. Also called "alternative text".

The alt attribute is very important for images. It must be filled out 100% correctly. By filling out the Title, nothing bad will happen, but for better effect you also need to pay attention to it.

The first one is also displayed on the site as text when the image does not load for certain reasons. The title is displayed when you hover over the image located in the article.

In practice, if you look at the image code on the site, the title and alt look like this.

We see that these attributes are in the code in the 2nd line. They are given certain meanings, or rather those phrases or words that describe the contents of the picture. It is the content of the picture, not keywords or anything else.

Now it is no longer possible to enter a large number of keywords into these attributes, and more so into each image of the article. Imagine you have 40 images on a page. If you write the key owl in the title and alt of all images, then it is likely that you will be subject to sanctions by search engines and will not see high positions in the search results.

The only rule that I adhere to and recommend that you use it too is to write very short description what is shown in the picture.

You can also enter the keyword by which the article is promoted, but don’t play too much with it. I apply to a maximum of one image in the article - to the main first thumbnail.

It will be very good if your picture is surrounded by thematic text that also describes it. But again, everything should be clear to the visitor and not be perceived as some kind of manipulation. We do everything naturally. If the thematic text does not have a place to be near the image, then simply write the title and alt to the image and that’s it.

Should title and alt be the same?

And again, a lot of opinions. Some say there must be a difference, and some say better effect when they are the same. I am more inclined to believe some facts. To do this, I took a couple of very successful resources and looked at how these attributes were written in them.

On resources that quickly received good results, image optimization comes down to filling both attributes equally. And they don’t contain keywords. They actually provide a brief description of what is shown in the picture.

Therefore, the next conclusion is title attributes and alt can be made the same.

But this is not 100% dogma. You can make them a little different, but so that the meaning is not lost from this. Both the title and alt must describe the image. In addition, the title may be absent altogether (there is no error in this) and contain other information other than the description of the picture itself. Learn more about correctly filling out the alt and title. Using the previous link, I dug deeper into the issue of filling out these tags. I highly recommend studying the material.

How to practically write attributes to an image

If you use any engine, then it provides such a function. Most likely, you have a WordPress site. Everything is done very simply.

In the pop-up window, the image parameters are set, including the title and alt.

We fill out everything and do not forget to update the file so that the changes take effect. We do this with every image.

If your site is not managed by any platform, that is simple html page, you will have to add it manually.

I recommend doing it as follows. Naturally, you will need the source code of the site, where you can see the image code. You need an opening tag

In order not to rack your brain too much, I’ll give you the same code as before. Take it as a blank for yourself.

Look at it as a sample where you need to paste the attributes that you copy from the same code. Then you add them to your pictures, filling in your description.

Don't forget that we fill in this data based on the contents of the picture. Let's describe the image itself!

This issue has been resolved. Everything is very clear here.

Briefly the conclusion is: “fill title and alt the same and write in them a description of the image itself, that is, what is shown in the picture”.

We have considered this issue. But the topic of image optimization is multifaceted and there are other important points that you can use to improve the effect of your website.

Other Important Points

There are 3 more things that I didn't cover above:

image file name;
reducing the weight of images;
uniqueness of images for the site.

Now I will consider only the 1st point, since for the other 2 I have allocated full-fledged volumetric materials.

Few people write about the file name on the Internet. But there are also some nuances here. What should you name the file itself before uploading it to the site?

As always, opinions are divided. Someone writes that you need to use keywords. Someone that needs to be called a description of the picture, that is, exactly the same as title and alt.

And some upload files with any names. We took a screenshot using some program. It was given a name with the current date, and that’s how it was loaded.

I am more inclined towards the second option, when we also try to describe the image in the name of the file itself. No keywords, except for the most important image in the article. And then, you don’t have to use it there either.

As an example, I’ll show you an image from a previous article on my blog about creating a subscription form for site updates. I'll take the next picture.

The image code looks like this.

The topic of today's article is SEO - image optimization using the ALT attribute. Many people don't know that when you optimize this attribute, you increase the likelihood of people visiting your site. So, I’ll tell you in more detail later in the article:

What is the ALT attribute?

ALT is an attribute that contains alternative text for an image. The attribute is shown when the browser is disabled to display the image, but you won't see it in the standard settings.

How to write a picture description correctly

Before writing the Title, I will tell you common mistakes that I notice on websites.

Empty attributesALTAndTITLE. As a rule, many SEO optimizers do not bother with this tag. Yes, it’s possible that if your site is very large and has 100,000 visitors per day, you shouldn’t bother, but if you’re just getting started and you need your first traffic, then it’s still worth specifying the attributes.

The image and attributes do not match. Let’s say if your picture shows a BMW X5, and you specify an Audi A3 in the attribute, then don’t expect a person to follow your picture to the site.

Reoptimization. This is a common problem that can be used as an example of what not to do. Optimizers, hoping to get the coveted traffic, write several keywords into the “alt” attribute and wait for positions in the search results among images to begin to grow. You must understand that this text will be read by people who evaluate several pictures, and if it is all spam, no one will click on the link. Adding commercial words “buy, order, price, cost, city name” is not recommended.

Search engines may also impose sanctions on you, so don’t get carried away.

How should you write tags for pictures?

Brief and clear description of the picture. Describe the image as accurately as possible and if the ALT was created automatically, double-check all pages.

Attribute length is limited. Search engines take into account 3-4 words (about 250 characters), which makes it difficult to describe a picture.

Inclusion of keywords. Actually, this is why the ALT attribute is worth specifying. Write the keyword in user-friendly text.

For example:

alt=”Computer repair in Cheboksary”

Unique attributes for each picture. It is also an important component, the most common problem among SEO optimizers. Using an example, I will show you how to solve it.

The product card contains many pictures

How can you separate pictures of the same product if you can’t spam and you need to register everything unique? Let’s say “HYUNDAI H-AR6-07H split system” can be written as follows:

“Split system HYUNDAI H-AR6-07H Type 1”

“Split system HYUNDAI H-AR6-07H Type 2”

In addition to product pictures, you have elements on your website: similar products, this product is viewed more often, and so on. This type of image should not be discounted and SEO optimized by specifying ALT and Title. Moreover, it’s worth taking the time to write down specifically: brand, model, product number, all the important parameters that people can type into the search.

Image Size– the higher the image resolution, the better. In any case, its display can be adjusted thanks to the “width” and “height” attributes. But you should not make the image too small, otherwise search engines will not take into account an image smaller than 150 pixels and will consider it an icon.

Image Location– as close as possible to the text that contains the keywords. That's why many optimizers take this factor into account and the standard image layout looks like this:

Title text with keyword

Further Description

Reducing image weight. The size of the image plays a key role, because if it weighs so much that it even slows down the loading speed of the site, this will affect the ranking of the entire site. Yes, yes, this has happened!

Caption under the picture

If your site has a lot of pictures and almost no text, a caption with a picture will be useful, so it is necessary to optimize it from an SEO point of view:

Specify keywords. The inclusion of keywords in the signature is mandatory, since this text will play a role in the ranking of the entire page;
State some fact/benefit about the picture.

For example, you have a picture of iPhone 7 speakers.

In the signature, indicate this fact: “The sound of the iPhone 7 has become noticeably better thanks to Lighting.” Yandex's attitude to the ALT attribute

“How can I put my picture first?”

When ranking pictures, the text adjacent to the picture is taken into account. The more accurately the image description matches the user’s query, the higher the likelihood that the image will be shown on the first page of search results.”

The text under the image is much more useful for the search engine than the ALT itself.

Google Image Ranking

Besides the aforementioned ALT, here's what Google considers when ranking images.

Let's go over the top factors for Google.

Good quality photos– this should be clear, so. No one will be interested in photos that are blurry or simply of poor quality. Here, rather, the quality of the image plays a role in its clickability, a certain CTR.

Separate pages for each picture– an interesting idea, but honestly I rarely come across such sites. It becomes problematic to optimize: online stores, one-page sites, catalog sites where a large number of images are stored.

What about the Title attribute?

Google did not mention, and Yandex did not mention the Title attribute. (Not to be confused with the tag). It definitely wouldn’t be superfluous to indicate, but it’s only possible because the Title is displayed when you hover over the image and carries meaning. In this regard, as with the text under the picture, you can experiment, indicate useful information: various facts, advantages, and so on.

In any case, it is much more useful than the one I wrote quite recently.

That's all. Ask questions in the comments about what you think about the ALT and TITLE attributes. How do you style your images?