Alt Attributes

Adding pictures to the articles encourages users to read them, and, of course, well chosen pictures certainly back up the message and give a good ranking in the image search engine results. It is crucial to give the pictures good “Alt Attributes”, as that strengthens the message intended through the article via search engine spiders, and, in turn, improves the website accessibility from the user point of view. In this article, we will talk about alt attributes and why it is vital to optimize them.

What is Alt Text

Mentioned below is a complete image tag used in HTML language:

<img src=“image.png” alt=“image description” title=“image tooltip”>

Alt and title attributes of images are generally referred to as the alt tag, title tag, or alt text. Technically, these are not tags. In fact, they are called attributes. The alt text gives a description about what is on the image and its function on the given page. For example, if someone wants to use an image as a button on their website to buy some xyz product, the alt text must say: “button to purchase product xyz”.

The alt tag is used by the screen readers, which are in fact browsers used by the visually impaired and blind people. The screen readers inform these people what’s on the picture by reading the alt tag. While hovering over the element, the title attribute shows as the tooltip. For image buttons, the image title might contain an extra call-to-action, but this is not the best practice. 

The pictures should have an alt text, not only from the SEO point of view, but also for the visually impaired people, because otherwise they wouldn’t know what the image is all about. There is no requirement for title attribute, because there is no sense adding it. The title attribute is only required for the pointing devices like mouse to hover around and in the case of <frame> and <iframe> tags. If the information conveyed through the title attribute is relevant, the best option is to make it available somewhere else, preferably in plain text. 

Is Alt Attribute Required?

Images and graphics are two crucial elements in website designing. Both are often used for conveying complex interrelations better in comparison to written descriptions, which in turn makes the page far more appealing. Background images, banners, logos, frames and other decorative items are crucial for the aesthetics. Also, many images sometimes pose stand-alone content, where website visitors can have direct access to those pictures.The best examples would be pictures on Instagram or any online gallery. 

But, not every internet user is capable of seeing the images, and also the search engines can only understand the graphic elements used in the webpage to a certain extent. In such cases comes the ‘’Alt Attributes’’ option, which solves the problem by offering a textual alternative. Website browsers and different other programs use this text if the corresponding image cannot be seen, displayed or understood. With the defective or otherwise undisplayed images, no information is lost with the help of ‘’Alt Attributes’’, and the user can still know what the image is all about. In short, the alt attribute improves the page usability and makes it more user friendly for the users.

Why is Alt Attribute Important?

The search engine providers give huge importance to the quality of alt attributes, because it helps them to understand the image and the related webpage. This in turn enables them to categorize the image and page content correctly. In addition to the above, such webpages rank without any barriers and offer higher website accessibility. So, from the SEO point of view, the alt attribute is very important and should not be ignored, when it comes to improving the ranking of any website. 

How Important are Alt Tags for SEO?

In addition, a good alt tag improves the image ranking in the Google image search engine results. Graphics which are strongly related to the page content generate higher traffic because it draws additional users from the image search to the actual website. If the images are particularly important for a certain search term, those images might get displayed in the organic search engine results which in turn brings additional traffic to the website. So, with regards to search engine optimisation, the alt tags are considered to be indispensable. 

What are Alt Attributes for Images?

The optimal content for any high quality alt text depends on the content and purpose of the image. An important starting point is the question whether the tag will substitute the image, if it does not exist in the first place. Also, differentiating among the below mentioned image types can certainly help in formulating the correct alt attributes for the images from the SEO point of view.

1. Independent Images: These represent the graphical content that stands for itself. The best example would be pictures to download, fun images, application screenshots, pictures in albums and galleries. The alt text provides a short yet meaningful description to the image and includes the most important keyword for image search.
2. Online Images: These graphical elements replace a single word or few words for space saving or aesthetic reasons. It includes emoticons, smileys, icons, symbols and pictograms. The alt attribute contains the text which is replaced by the image like for example “smiling emoji” or simply “smiling”.
3. Explanatory Images: These include statistics, graphs and explanatory screenshots. If the graphic only summarizes the text, without offering new information, then the entire text remains empty. Thus, providing information is the core aspect of this category of images. 

How to Optimize?

Mentioned below are some of the best practice rules that one should follow when it comes to optimizing the alt text of images. Crafting descriptive alt tags is certainly not that difficult. The best practice is not to overthink and be led by the content of an image. More often than not, writing an amazing alt text means using common sense for describing what the image is all about. There are 3 golden rules of alt tags and implementing them would certainly help in optimizing.

• Be specific and descriptive: The alt tag must describe the image contents in as much detail as possible. The more specific you are while describing an image, the better the search engine rankings will be.
• Relevancy: The alt tags are certainly not the place for spamming exactly matched keywords. In fact, they should be used to describe exactly what the image is all about.
• Uniqueness: One must not use the main target keywords of a page for every image as an alt tag. Try to write a unique alt text that aptly describes the content of the page. 

How Long Should Alt Tags Be?

The alt tags must be descriptive but they must be brief and to the point at the same time. They should not be in the form of full sentences or in paragraph format. Being limited to 125 characters only, the alt tag must provide sufficient details for the search engines and users to relate the image with respect to the content on that particular page.

Like for example, this alt tag – “Two rabbits” is certainly not descriptive enough for the image displayed above.

Again, the alt tag – “two rabbits, one gray and the other white, with black and red eyes respectively, sitting on yellow grass with flowers around them” is way too long.

In fact, the perfect alt tag for the image would be – “gray and white rabbit sitting on grass”.

What Should Alt Text Include?

The alt tags must utilize the related keywords used in the content. Placing relevant keywords within the alt tags in addition to the content around the image would certainly improve the overall search engine optimisation. At the same time, the alt tags must be written with the user in mind. The focus should not be on SEO and search engines. Try to focus on the relevance of the content in the image. Using the same alt text for multiple images on the same webpage may seem like spam. Thus, remember to put a unique alt text for each image. 

How Do I Add Alt Attributes?

Search engines are pretty good at figuring out what the article is all about and its relevance for the readers. To achieve this, the search engines rely on different indicators, and alt attributes are one of them. For every image which is used in a particular webpage, there is a unique alt attribute which stands as its description. 

Furthermore, while uploading an image to WordPress, one can easily edit the metadata which gives access to the following:

On the right side, there are several fields to fill out, such as: changing the image title, captions, alt text and description. While there can be several permutations of alt tag, something adequate for the image displayed below would be: “an angry black cat”. After that, just fill out the ‘’Description’’ field, and save the changes.

The difference between the alt text and caption is that the latter is displayed on the front end of the website, as a description for the users to read. On the other hand, the alt text is not displayed at the same time as the image. Regarding the descriptive field, it contains details which will show up when someone accesses the image url directly. 

By and large, writing a good alt attribute comes down to a few important elements:

• being descriptive, but straight to the point, without being too vague and long in explanations;
• the alt text must be under 125 characters mark, so that it could comply with the screen readers;
• it is important to use unique descriptions, as well as the ones which are relevant for a particular image;
• one should be aware of several different kinds of images, and choose among them, in order to formulate correct alt attributes, with an aim of optimizing those images, as well as the website, to the fullest extent. 

Having all of these elements in mind, and using them, will generate highly useful alt attributes, which will be recognized by search engines. This, in turn, will result in the webpage gaining more popularity, as well as better Google ranking, which surely should be a goal, if we are to talk about search engine optimization.

More Resources

• Backlinks
• Competition Analysis
• Google Search Console