View source for ALT Attributes

<seo title="Alt Attributes - Purpose + Requirements" metadescription="ALT attributes are part of the HTML standard. They can be used to specify alternative texts for images that are included in web pages. Learn more ..." />

== Definition ==

ALT attributes are part of the HTML standard. They can be used to specify alternative texts for images that are included in web pages. They play an important role in search engine optimization (SEO) and in barrier-free, handicapped accessible websites.

== Purpose of the alternative text ==
[[File:ALT_Attribute.png|thumb|450px|right|alt=ALT attribute|'''Figure:''' ALT Attribute - Author: Seobility - License: [[Creative Commons License BY-SA 4.0|CC BY-SA 4.0]]|link=https://www.seobility.net/en/wiki/images/4/44/ALT_Attribute.png]]

Images and graphics are important elements in web design. They often convey complex interrelations better than written descriptions, summarise what is written vividly, and make a page look more appealing. Background images, logos, and banners, as well as frames and other decorative graphics, are indispensable for aesthetics. In addition, many images are stand-alone content in which website visitors are directly interested - for example, photos on Instagram or in an online gallery.

However, not all internet users are capable of seeing images, and also search engines only understand graphic content to a limited extent. ALT attributes solve this problem by providing a textual alternative to an image. Web browsers and other programs use this text if the corresponding image cannot be displayed, seen, or understood. Even with defective or otherwise not displayable images, no information is lost and visitors still know what the graphic is about. Thus, ALT texts improve the [[Usability|usability]] of a page and make it more user-friendly.

In detail, ALT attributes are used in the following cases:

* Screen reading programs for the visually impaired read the alternative text aloud.
* Search engines such as Google analyze ALT texts to find out what is visible on an image.
* In the case of broken image links or unsupported file formats, web browsers display the ALT attribute.
* Some internet users turn off the display of images in their browser to speed up page loading or save data volume. In these cases, web browsers also display the alternative text as can be seen in the following screenshot:

[[File:ALT attribute.png|link=|border|700px|alt=Example for the display of an ALT attribute on a website|Example for the display of an ALT attribute on telegraph.co.uk]]

Screenshot of an ALT attribute on [https://www.telegraph.co.uk/science/2019/03/12/air-pollution-killing-nearly-many-people-smoking-britain/ telegraph.co.uk]

Search engines attach great importance to the quality of ALT texts, as they help them to understand an image and the overall page. This enables them to correctly categorize image and page content. In addition, they rank barrier-free and generally accessible websites higher. Therefore, the attribute is very important from an SEO point of view.

In addition, good alternative texts improve the ranking of images in Google’s image search. Especially graphics that have a strong relation to the page content generate more [[Website Traffic|traffic]] because they draw additional users from image search to the actual website. If images are particularly relevant for a certain [[Search Term|search term]], they may even be displayed in [[Organic Search|organic search]] results and thus bring more traffic to a website. With regard to SEO, ALT attributes are therefore indispensable.

== Specification of ALT attributes in HTML code ==

ALT is a mandatory attribute in HTML. Although most browsers ignore missing ALT attributes, they are mandatory for all <img> and <area> tags of a standards-compliant webpage. Therefore, the HTML code for images should at least look like this:

<pre><img src="imagefile.jpg" alt="alternative text"></pre>

The attribute should also be used for purely decorative images such as decorative graphics, background images, lines, or frames. However, the alternative text should remain empty in this case, since such an image has no meaning in terms of content:

<pre><img src="background.jpg" alt=""></pre>

Voice output systems and other handicapped-accessible assistance software ignore such <img> tags with an empty ALT attribute.

== Requirements for ALT attributes ==

The HTML standard stipulates that alternative texts should be an appropriate and complete substitute for the graphic content of images. Ideally, ALT attributes should, therefore, contain neither additional content such as further explanations nor titles or captions. They are only intended to provide a textual description of the image content so that a page can be understood even without its images and still has the same information content.

These requirements do not contradict the requirements for ALT attributes with regard to search engine optimization (SEO). In some ways, search engines are also blind to graphical content, so they benefit from similar ALT texts as visually impaired people. A good alternative text is thus equally useful for blind people, search engines, and users who have turned off the display of images.

However, even a perfectly optimized ALT attribute can't hide deficient [[Content is King|content]] on a web page. Misuse of the alternative text, therefore, does not help SEO and can - in the case of [[Keyword Stuffing|keyword stuffing]] - even be counterproductive, as Google and other search engines punish such SEO practices.

== Suitable alternative texts for different image types ==

The optimal content of a high-quality ALT text depends largely on the purpose and content of an image. A good starting point is the question of which text would replace the image if it did not exist in the first place. In addition, differentiation into the following image types can help to formulate the right ALT attribute for SEO:

* '''Independent images:''' graphical content that stands for itself. For example, photos in galleries and albums, demonstrative screenshots of applications, "fun pictures", pictures to download or buy and the like. The alternative text provides a short but meaningful description of the image including the most important keyword for image search SEO.
* '''Inline images:''' These graphics replace single or a few words for aesthetic or space-saving reasons. This includes smileys and emoticons, symbols and icons as well as simple pictograms. The corresponding ALT attribute contains the text that the image replaces - for example, "grinning emoji" or simply "grinning".
* '''Explanatory image:''' graphs, statistics, explanatory screenshots. If a graphic only summarizes the surrounding text without providing new information, the ALT text remains empty. Otherwise, it contains a short version of the image content. For longer explanations, the normal continuous text is more suitable because it is useful for all visitors.
* '''Decorative graphics without informational value:''' background images, frames, lines and the like. Since these images are used exclusively for visual aesthetics, they are provided with empty ALT attributes.

== Difference to TITLE attribute ==

While ALT can only be applied to <img> tags, TITLE is a universal attribute that’s supported by most HTML elements. Its purpose is to add comments, short explanations, or additional information. Web browsers display the TITLE as a tooltip when the mouse pointer is on it. Due to their importance for accessibility and usability, alternative texts are more important for SEO than image titles. Therefore ALT is a mandatory specification, whereas TITLE is only used sparingly and prudently.

== Related links ==

* https://www.directom.com/image-seo-using-alt-text/
* https://blog.hubspot.com/marketing/image-alt-text

== Similar articles ==

* [[Image SEO]]
* [[Visual Search]]

[[Category:Web Development]]
[[Category:Search Engine Optimization]]

<html><script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "ImageObject",
      "contentUrl": "https://www.seobility.net/en/wiki/images/4/44/ALT_Attribute.png",
      "license": "https://creativecommons.org/licenses/by-sa/4.0/",
      "acquireLicensePage": "https://www.seobility.net/en/wiki/Creative_Commons_License_BY-SA_4.0"
    }
    </script></html>