ALT Attribute
Definition: The Alt Attribute or Alt Tag is an HTML attribute for an image, or other HTML or XHTML document, that provides an alternative text to be displayed if the image or document cannot be rendered. Search engines use Alt Attributes to identify image content, as image files generally can not be "read" by search engine crawlers. Alt Attributes are also valuable for users, specifically for visually impaired users who have websites read to them by reader programs.
How do Alt Attributes work?
Alt Attributes are placed directed in the image tag and should take the following format:
<img src="directory/image.jpg" Alt="This is a meaningful description">
Alt Attributes are triggered when images or graphics cannot be displayed properly. They are otherwise not visible on websites. In normal circumstances, one can only see Alt Attributes in the source code or by using the special tools.
Why use Alt Attributes?
There are a number of benefits to using Alt Attributes.
- UX: If an image cannot be displayed, a specific description of the image is available for users instead.
- SEO: The Googlebot cannot read image files. It requires additional information to identify image content, that's where Alt Attributes come in. Alt Attributes allow search engines to crawl and index images, ideally improving image SEO and page ranking.
- Accessibility: Alt Attributes enabling visually impaired Internet users to understand the content of an image, as the text of Alt Attributes is read to them by a reading program. The images will therefore become "visible" to people with poor eyesight.
Reasons an image may display incorrectly
There can be several reasons an image does not display properly.
- Old browser: Certain browsers cannot interpret certain image files.
- Tracking protection: Some browsers provide special tracking protection. When this is activated, some images will not be displayed correctly.
- Image display is disabled: Some Browsers give users the option to not display image files.. Users can enable this setting, for example, when surfing with a poor Internet connection to increase the loading speed of websites.
- 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.
The impact of ALT attributes for SEO
In search engine optimization, the ALT tag plays an important role for the user:inside in terms of user-friendliness on the one hand and as content for the Googlebot on the other. If the ALT attribute is displayed in the absence of browser support, this does not limit the usability of the web page. The user can recognize what should be displayed by the alternative text. For search engines, ALT tags provide important information about the image content as well as the overall context of the web page.
Optimizing Alt attributes for SEO
Alt Attributes should describe the image content accurately and with just a few words. If the image has text on it, that text should be incorporated in Alt Attribute. All other images should get an appropriate description that is illustrative for users and describes the content of the image for search engines.
Generally, it is recommended to use the main keyword of a page in the Alt Attribute, to improve keyword focus. The Alt Attribute should not, however, be used for keyword stuffing, because this would be classified as spam by Google and other search engines. Using keywords in the Alt Attribute does, however, improve rankings in the image search. The optimization of Alt Attributes is therefore an important part of image SEO and contributes to sustainable onpage optimization.
Example:
In our hypothetical example, we have a cat-lover who owns a blog about cats. They added an image of a young, dark cat with distinguished ears to their website. Here is how they may create an Alt Attribute for the URL: mycatwebsite.com/cats-with-big-ears.
The image would be integrated into the blog like this:
<img src="/cat-with-big-ears.jpg" Alt="Black kitten with large ears">
In this example, the keyword focus can be strengthened with both the text of the URL and the Alt Attribute. Both help improve the ranking chances of the page, encouraging more visitors to the blog and helping the image rank in image search.
The impact of ALT attributes for accessibility
Accessibility is about your website being usable by everyone, regardless of device, network connection, and location. Alt tags are an important element for accessibility. By accurately describing the image content in just a few words, they allow people with visual impairments to access the content, for example. People with handicaps can have the text of the ALT attribute read aloud by a reading program (screen reader). This makes images "visible" to visually impaired people in an acoustic way.