Displaying images on web pages is a common practice. However, there may be times when these images cannot be loaded, making it unclear what they represent.

This is where the HTML alt attribute, also known as the “alternative text” attribute, becomes crucial. Setting this attribute correctly is important both from a usability standpoint and for search engine optimization (SEO). In this article, we will explain the basic usage of the alt attribute.

What is the Alt Attribute?

The alt attribute stands for “alternative text.” Derived from “alternative,” it literally substitutes text for images, conveying the content of an image in words.

Consider the following image from our company’s website homepage. 

The alt tag located in the HTML where this image is displayed is described as follows: (the fluorescent part in the image).

If this image fails to load for any reason, the text within the alt tag will be displayed instead.

Why the Alt Attribute Matters

Search engines cannot fully understand images. They rely on the alt attribute to grasp the content of an image. Precisely setting the alt attribute increases the chances of your images and web pages appearing in search results when users perform an image search.

Furthermore, the alt attribute significantly impacts accessibility. It helps users who are unable to see images, such as those with visual impairments, understand what the images convey.

Thus, the alt attribute is vital for both search engine evaluation and enhancing accessibility, making it a key element in creating high-quality web pages.

Benefits of Setting the Alt Attribute

Setting the alt attribute can:

• Enhance usability
• Improve information and communication accessibility
• Inform search engines about the image and content
• Benefit image search

Let us now explain each point in detail.

Enhancing Usability

With an alt attribute, even if an image fails to display due to an error, its content can still be communicated to users via text. This prevents a drop in usability.

Common issues that prevent image display include poor connection quality or broken links.

Normally, the text set in the alt attribute remains invisible to users, appearing only when the image does not. This ensures users receive the intended information even without visual access to the image.

The alt attribute can be described as a tool that supports users in obtaining the necessary information under various conditions, ensuring accessibility to all users.

Improving Information and Communication Accessibility

Voiceover functions in browsers can’t interpret images but can read aloud text information. By describing images in text through the alt attribute, these functions can convey image content. By describing the content of an image in text, the text-to-speech functionality becomes able to discern and verbalize the content of the image.

For users with visual impairments or the elderly who may rely on auditory information, providing alt descriptions allows equitable access to information, regardless of user abilities. This approach to information and communication accessibility is also recommended by the Ministry of Internal Affairs and Communications.

Reference Page: Ministry of Internal Affairs and Communications

Informing Search Engines About Image Content

Search engines understand the information of images through the text described in the alt attribute. Google recommends optimizing images on websites for better usability, with the alt attribute being one of the recommended optimizations for images.

While the description in the alt attribute doesn’t directly affect SEO evaluation, it aids search engines in understanding the content of images better. Accurately providing the necessary information to users can lead to an increase in site traffic.

Beneficial for Image Searches

Conveying accurate image information to search engines through the alt attribute can lead to increased traffic from image searches.

According to Google reports, the percentage of image searches from smartphones increased by over 60% between 2016 and 2018. The growing importance of images in web content is evident.

Reference Page: Think with Google

Being accurately recognized by search engines can enhance the inflow rate to your content from image searches.

How to Write the Alt Attribute

The alt attribute is described as follows:

<img src=”image URL” alt=”image description”>> 

The key is to appropriately describe the “image description” part. The text described in the image description is seen by users if the image does not display, read by voiceover functions, and recognized by search engines.

Important points to consider when describing the alt attribute are:

• Write specifically and concisely.
• Ensure the image content is understandable to everyone.
• Include search keywords.

The alt attribute should be described concisely with the minimum necessary phrases including search keywords, yet specific enough for anyone to understand.

Write Specifically and Concisely

In the alt attribute, describe the content of the image succinctly.

For example, for the following image, describe it as alt=”A black cat lounging on the ground.” This alternative text allows users to imagine a black cat lying relaxed on the ground, even without seeing the image.

When the description is simply written as alt=”animal,” it is concise but lacks specificity. Similarly, alt=”cat” or alt=”black cat” are also insufficient for explaining the appearance of the cat in the image.

Ensure the Image Content is Understandable to Everyone

Write the alt attribute in a way that is easy for everyone to understand. For the following image, it would be alt=”A black cat relaxing inside an open drum washing machine.”

Let’s also mention examples of inappropriate descriptions.

For instance, writing alt=”A black cat in the afternoon light” does not provide a clear understanding of what the image depicts, based solely on the alternative text.

Similarly, including personal remarks such as alt=”Wonder if it got washed – black cat – cute – it’s gotten big” also fails to fulfill the role of alternative text and is considered inappropriate.

Include Search Keywords

Including search keywords in the alt attribute’s text is crucial for correctly conveying your website’s information to search engines.

For instance, if the keywords are “cat” and “toy” for an article, the alt attribute for the following image could be alt=”A black cat tired of playing with a meat-shaped toy.”

Simply listing keywords as alt=”cat toy” is insufficient from the perspective of conveying the image’s meaning through alternative text.

Writing the Alt Attribute for Different Types of Image

Here, we will discuss the key points of writing the alt attribute, tailored to different types of images.

Text Images

Text images are images that are centered around text. For example:

Search engines do not always correctly read the text in images. Therefore, it’s necessary to describe text images using the alt attribute, writing down the text content directly. For the above text image, you would write “ABOUT ME”.

Photographs

For photographs like landscapes or portraits, it’s recommended to describe what the image depicts in concise text.

For instance, for a landscape photograph like the following, you could describe it as “A photo of a landscape with blue skies and green meadows.”

For portraits, descriptions like “Photo of a smiling woman” or “Photo of a man playing tennis” are appropriate.

However, if the image is purely decorative, leaving the alt attribute empty is acceptable.

Graph Images

For graph images, appropriate descriptions in the alt attribute might include:

• The title of the graph or a brief summary.
• Explanation of the key results or trends.

For example, consider the following graph:

In this case, a concise explanation like “Annual sales performance by store for a new year” is appropriate. If a table is also presented alongside the graph, you might describe it as “Annual sales performance by store. See table for details.”

Describing the main results might involve writing something like “Sales increased from April to June, followed by a plateau.”

Logos

For images that are logos, the alt attribute should directly describe the brand, company, or product name represented by the logo. For example, consider the following logo:

In this case, the alt attribute would be “Motomachi Youth Clinic.”

Cases Where Alt Attribute is Necessary

Always set the alt attribute when conveying the content of images to search engines and users. Images requiring an alt attribute include:

• Photographs
• Icon images
• Graphs
• Images used as links

Cases Where Alt Attribute is Not Required

Although the alt attribute is indispensable for website images, it is not necessary for images primarily intended for decoration. Decorative images are not directly related to content.

Cases where the alt attribute is not needed include:

• Eye-catching images
• Images that are not essential
• Images inserted as a break in the text
• Background images

For these cases, the content is understandable without knowing the image content, so the alt attribute is not set.

However, it’s important to note that while you should not write text for these images, the HTML source code for the alt attribute still needs to be included. The specific way to write it is as follows:

alt=””

Leave the text part blank and only include the HTML source code. Including an empty alt attribute in the HTML code signifies that it is not a critical element.

Points to Note When Writing Alt Attribute

When writing alt attributes, it’s important to:

• Not describe content unrelated to the image
• Not list keywords
• Avoid excessively long descriptions
• If using the image as a link
• Ensure settings are applied on mobile sites as well
• Set it to blank
• Avoid duplicating the content of the title attribute

The information in the alt attribute is essential for SEO, but unnatural descriptions could be recognized as spam by search engines.

Do not describe content unrelated to the image 

The text in the alt attribute should not include irrelevant phrases or keywords to the image. Doing so misleads users and search engines.

For images that are not directly related to the content, set the alt attribute to be empty.

Do not list keywords 

While keywords are included in the alt attribute, listing them unnaturally or including unrelated keywords is discouraged. Google explicitly advises against the listing of search keywords. Refrain from stuffing keywords in hopes of enhancing SEO effects.

Avoid excessively long descriptions 

Google discourages the practice of using unnaturally long texts or copying & pasting entire texts. There is no specific rule on how many characters you can write, but it’s important to be concise, using only as many words as necessary to convey the meaning.

When using images as links 

If an image is used as a link, describe the destination page in the alt text to make it easier for Google to understand the link’s purpose.

Always set for mobile sites 

The alt attribute must also be set for mobile sites. The importance of sites optimized for smartphones is only increasing.

Moreover, the alt attribute is the sole method to increase access from image searches. Websites without alt image settings may see a decrease in traffic.

Setting it to be empty

For images that do not carry meaning for the content, write alt=””.

Leaving the HTML source code unwritten because the image carries no meaning, or writing unrelated phrases, is incorrect.

Writing alt attributes in WordPress

In WordPress, when uploading an image, an “Alternative Text” field appears. Write a specific description of the image content in this field.

Checking the content of written alt attributes 

There are two ways to check the settings of already written alt attributes:

• Google’s verification function
• Google extension

Google’s verification function

Google’s verification function allows you to check the alt attribute content without installing any tools.

Right-click anywhere on the relevant web page, select “Inspect” to display the page’s source code, and verify the presence and content of alt attributes related to images.

Google’s extension 

The Alt & Meta viewer, a free tool in Google’s extension, allows you to easily check the content of alt attributes with a click. Downloading the extension is required, but it offers high convenience.

Reference Page: Alt & Meta viewer

Click the icon for Alt & Meta viewer on the target website’s screen, then “Show Image ALTs” in sequence. The site’s image-related alt attribute settings will be displayed, allowing you to check their presence and content.

Common Questions About Alt Attributes 

Here, we address some common questions about alt attributes:

Q: How does the alt attribute affect SEO? 

A: By writing appropriate text in the alt attribute, search engines can correctly understand the content of the image. This helps the page’s theme be more deeply understood, impacting rankings. However, stuffing keywords into the alt attribute or similar actions can violate guidelines, so be cautious.

Q: What are the points to consider when writing the alt attribute? 

A: Ensure the alt attribute contains concise and accurate information. Writing excessively long descriptions or text unrelated to the image is inappropriate. However, it’s acceptable to leave the image attribute blank for decorative images.

Q: How should image file names be described? 

A: Describe what the image depicts in the file name. Use alphanumeric characters and avoid spaces, Japanese characters, or slashes. For example, a landscape photo could be named “mountain_view.jpg”.

Q: Can the alt attribute be left blank? 

A: It’s possible to leave the alt attribute blank. However, if the image cannot load or if screen readers are in use, no information will be provided, so it’s best to write descriptions wherever possible. Screen readers convert web information into voice or Braille for people with visual impairments.

Summary 

The alt attribute is an HTML tag that conveys image information to users and search engines on a website. Communicating image information to search engines is beneficial for appearing in image search results, which can increase site traffic. It’s one of the image optimization methods recommended by Google. Enhancing usability and accessibility and transmitting image information to search engines can be expected to optimize search engines. However, there are several rules to follow to use the alt attribute effectively. Aiming for SEO effects by listing keywords or setting phrases or sentences unrelated to the image can decrease usability and might be misinterpreted as spam by search engines. Even if you do not write text for an image, do not forget to include the HTML source code. Appropriately setting the alt attribute can increase search entries from images and enhance content evaluation. By setting alt attributes that are understandable to both users and search engines, you can significantly grow your website.

Author Profile

Mr. Takeshi Amano, CEO of Admano Co., Ltd.

Mr. Takeshi Amano is a graduate of the Faculty of Law at Nihon University. With 12 years of experience working in the advertising agency industry, he discovered SEO and began his research during the early days of SEO. He self-taught and conducted experiments and verifications on over 100 websites. Using this expertise, he founded Admano Co., Ltd., which is currently in its 11th year of operation. Mr. Amano handles sales, SEO consulting, web analytics (holding the Google Analytics Individual Qualification certification), coding, and website development. The company has successfully managed SEO strategies for over 2000 websites to date.

Return to the top of Japan SEO