What is the ALT Attribute?
The ALT-attribute or ALT-tag is an HTML attribute for a text that describes an image. The ALT attribute is placed directly in the image tag. If an image cannot be displayed for some reason, the ALT attribute provides alternative text to display instead of the image.
What is the ALT Attribute good for?
Search engines use this attribute to identify image content, since the image files generally can not be read by search engine crawlers. It is also useful to provide an alternative text for users and specifically for visually impaired users who have websites read to them by reader programs.
What does the ALT Attribute look like?
The ALT attribute looks like this:
<Img src ="directory/image.jpg" alt=“This is a meaningful image description”>
How does the ALT Attribute work?
ALT attributes appear on the screen instead of images and graphics that cannot be displayed. With conventional use of a website, the attributes are not visible. One can only see Alt-attributes when accessing the source code of a website or with appropriate tools. If the attribute is correctly integrated, it describes the image content accurately and with few words. If it is graphics with text, that specific text should also be incorporated into the ALT attribute. All other images should get an appropriate description that is useful for Internet users and indicates the content of the image to the search engines.
For the user, this has the advantage that If an image cannot be displayed, a specific description of the image available instead. This is also similar from the perspective of search engines. The Googlebot cannot yet read image files. It requires additional information to identify image content. ALT attributes are useful under the heading of web accessibility as well, by enabling visually impaired Internet users to have the text of ALT attribute read to them by a reading program. The images will therefore become "visible" to people with poor eyesight.
Reasons for incorrectly displayed images
There can be several reasons for images not getting displayed.
- Due to an old browser: certain types of browsers cannot interpret certain image files.
- Tracking protection: Some browsers such as internet explore provide a special tracking protection - when this is activated, some images will not be displayed correctly.
- Image display is disabled: Browsers such as Mozilla Firefox provide give the users the option to not display image files.
- Defect link to the image file: If a picture cannot be displayed by the browser, this could be because of a defect URL to the image source. Such errors can occur for example if the image index on the server was moved or renamed.
Internet Explorer 7 showed the ALT attribute as a tool tip. It was therefore often wrongly used in other browsers as a tool tip as well. However, that function belongs to the title tag, assuming valid HTML is intended to be used.
Importance for SEO
For search engine optimization, the ALT-tag plays an important role both for the user and the search machine as content for the Googlebot. If the ALT-attribute is displayed with lacking browser support, the usability of the website won't be affected. Through the alternative text, the user can see was should be portrayed. For search engines, the ALT-tags provide important indications regarding the content of the image and regarding the entire context of a website.
Optimizing ALT Tags
Generally, it is recommended to use the main keyword of a website for the ALT-attribute, to improve keyword focus. At the same time, the text should be a precise description of the image content. The ALT-attribute should not, however, be used for keyword stuffing, because this was be classed as spam by Google and other search machines. The use of keywords in the ALT-tag is about in order to improve rankings in the image search. The optimization of ALT-attributes is therefore an important part of image SEO and contributes to the sustainable onpage optimization of websites.
The operator of an info blog about cats integrates an image of a particularly special cat. The URL of the site is: mycatwebsite.com/cats-with-big-ears.
The image is then integrates into the blog like this:
<img src="/cats-with-big-ears.jpg" alt="Young brown Savannah house cat with very big ears and brown green eyes">
The keyword focus can be strengthened with the content of the URL. In SEO image scope, the file data shouldn't be underestimated. This also plays a role in the loading time and thus the performance of the website.
Moreover, the ALT attribute can be utilized to rank as good as possible in the image search and get more visitors to your website.