Image SEO: How Do You Properly Use ALT and Title Attributes?

To ensure that your visitors still get information from your images when there are technical problems on your website, you should use alt and title attributes to describe them in the source code. In this article, we show you how you can make sure your images are properly optimized for search engines and users, and how to insert image descriptions.

What is the difference between an ALT and Title attribute?

ALT attributes refer to an alternative (ALT) text, which is inserted into the image files on a website to describe its content. If the image cannot be displayed for any reason, the text of the inserted ALT attribute will appear. Search engines use this attribute to recognize image contents, because image files can’t be read directly by search engines.

The ALT attribute appears in the source code as follows:

The title attribute (or universal attribute), shows the user information about the image after a short delay, when the cursor is brought over the image (mouse-over), not to be confused with the meta title, which describes the content of the entire page, and is relevant for the snippet. The title attribute is primarily for usability purposes, and is particularly important when no image signature is available. In this case, for example, the copyright can also be inserted into the title attribute.

This is how you insert the title attribute:

Alternative descriptions for images and graphics don’t just play a large role in on-page optimization, but also for accessibility within the world wide web. People with vision or hearing impairment use voice browsers or screen readers (read applications) to surf the internet instead of a text mode. The image descriptions for visual content such as graphics, animations, and videos are read aloud. If the ALT attribute is missing, some screen reader’s read part of the file name.

There can be many reasons why an image is not shown, for example if the user agent does not support images, or if there are server problems. The image also disappears if the file can no longer be reached on the server because an image folder or a root directory was accidentally removed. Moreover, some browsers and mobile uses do not show graphics.

Optimize and properly insert ALT attributes

There is no text length limit for an ALT attribute. However, you don’t usually need more than a few words to informatively describe the image and to give search engines important information.

So, check the quality of your alternative image texts with the following questions:

• Can the user better understand the image thanks to this description?

• Is the keyword used sensibly?

• Will this help search engines to understand the image content?

Let’s assume you’re setting up an external coffee blog and are promoting it on your website. If you show an image of a cup of coffee with milk and sugar and link it to your own coffee blog, ideally you would depict it in the browser as follows:

Figure 1: Correct display of the graphic in the browser.

If the site doesn’t load correctly, the user will see a placeholder as well as an image attribute. Instead of the image, the ALT attribute “cup of coffee with milk and sugar” will appear, as well as the title attribute “blog article on coffee specialties”. Fill the title attribute with a description that readers who click on the image or the empty space would expect. In our example, the user will be directed to your blog and can learn more about the world of coffee.

Figure 2: Placeholder for an image not displayed.

The next step is to enter the coffee blog’s URL in the site source text. The image tag begins with the image source, i.e. the corresponding file in your root directory (img src). Next to alt= is the ALT attribute in quotation marks: after this comes the information as to height and width. In this case, the image measures 400 x 266 pixels.

Other design elements also need an ALT attribute. Some graphics – so-called decorations or decorative images – don’t convey any content, for example background images, buttons, or lines. Don’t just leave the ALT attribute empty, instead fill it with a placeholder (alt=””), so that search engines and screen readers know to ignore these elements, because they are clearly not important for understanding the web page. Decorative images should not be embedded in the code, but should be defined as background images using CSS. An image without an ALT attribute will appear in the browser as an empty icon.

Considerations of Image SEO

Like the on-page optimization of a website, search engine optimization of images takes place on various levels: the visible level, the meta level, and the image level itself. The factors of quality, description, and size of your images can contribute decisively to the increase of visibility for your website.

Pay attention to the following factors in editing and saving your images:

1. High-quality images are professional and also support search engine optimization. Google confirms the importance of image quality:

“High-quality, sharp images are also better displayed in in our search results thumbnails. This increases the possibility that users will click on them.”

2. However, the loading speed of your website should not suffer because of the quality. Only upload images as large as necessary and compress them using a tool such as tiny png. Resize the pictures to the right size in an image-editing program and insert them one by one into the source code.

3. Consider which image format is best for you: JPG is usually ideal because it can be compressed effectively. PNG offers loss-free compression, but it requires more storage space. GIF only makes sense for animations. SVG format is good for vector graphics.

4. The file name should be informative, but not too long. Some terms are separated with hyphens, not with underlining. A good folder structure also ensures good categorization.

5. Give height and width for all images. When it knows the measurements, the web browser begins loading a site before all the images are downloaded. This will optimize your loading times.

6. Name your image source correctly: Author and copyright symbols in the image signature should be named; a hidden spot in the mouse-over is not sufficient.

Tip: Submit image sitemap

An additional support for search engines is the creation of an image sitemap, in which you can title up to 1,000 images. In its support forum, Google gives a clear statement about this:

“You can increase the likelihood that your images will appear in the results of the image search by observing the guidelines for webmasters and the best practices for the publishing of images. Moreover, you can use the Google image enhancements for sitemaps to give Google more information on the images available on your sites.”

By collecting all image URLs in an XML sitemap and uploading them into the Google Search Console, you can support the indexing of image files in a few steps.

An image sitemap is created as follows:

Figure 3: Example of an image sitemap (Google Support Forum).

Advantages and uses for SEO

Correctly integrating images offers a clear advantage for search engine optimization. With ALT and title attributes, excellent images improve the topic relevance of the website, thereby increasing the chances for better rankings.

With good image SEO you not only increase the visibility of your website, but also gain indirect traffic, because your graphics may be clicked on in a Google image search. For Google, the ALT attribute is an important parameter of on-page optimization. With the correct designation, you will increase your chances of being found in the Google image search using the main keyword. Even if your site is not easy to locate, by using a valuable image, you have a chance for a very good ranking using Universal Search: maybe your website won’t be found in the top ranking spots, but in the image search.

If you use qualitatively high-quality images and compress them appropriately, you will increase your site’s usability and page speed. Compression is especially important with regard to mobile optimization, because smartphones generally work over lesser bandwidths. Large image files will unnecessarily delay page loading.

Overview of the advantages of image SEO:

• Strengthening of visibility through good listing in organic searches

• Indirect traffic boost, thanks to good rankings in a Google image search

• Chance of a top ranking through a universal search

• Better ranking through tags that capture the general thematic context of the website

• Improvement of usability on mobile end devices through appropriate compression

Conclusion

To ensure barrier-free surfing on desktops and screen readers for your visitors, you should always include images with ALT and title attributes. For faster crawling and proper orientation of your graphics, the placement of sensible descriptions is worth its weight in gold. This will improve your loading time and thus your usability, which are important factors for surfing on mobile devices.