What Is Alt Text?

What Is Alt Text for Images?

Image alt text (short for alternative text) contains the title and alt description of an image. Also known as “alt attributes” and “alt tags” – though no tags are used – the text details what’s in the image or its purpose. You can find the code within your website’s HTML code.

An image’s alt text may look like this:

<img src=“image.jpg” alt=“image description” title=“image title”>

or this

<img src="image.gif" alt="Image">

Initially, alt text was created for the visually impaired to identify online images. Screen-reading software reads this text aloud to its users. Alt text also appears in place of images on browsers that block them. Too, the text shows up in place of its image when pages don’t load correctly (often due to low bandwidth).

In addition to making your site more accessible, alt text is read by search engine crawlers. When cataloguing and ranking websites, crawlers “view” your images using this portion of code. Next, it decides the value of the image in relation to its page and your site overall.

Why Is Alt Text Important?

Whether you Google “Bluetooth speaker” or “Benjamin Franklin,” images appear in the search results. For years, Google has increased the importance of visual media for several reasons:

1.  Images add to the accessibility and usability of your site.
2. Most people are visual learners. Moreover, all people grasp written information more effectively when it’s broken up by other types of media. Hosting high-quality and relevant images on your website encourages Google to view your site as reliable in its field and user-friendly.

Ultimately, good alt text should be descriptive – see Google’s own "Image Best Practices" article with the header “Use descriptive alt text.” In a few words, describe what’s in the image and include any related keywords. If you’re unsure whether or not your alt text makes sense: have it read to you with your eyes closed.

What Does Good Alt Text Look Like?

<img src="speaker.jpg"/>

<img src="speaker.gif" alt="">

These are examples of bad alt descriptions because they don’t include any actual alt text. If your image doesn’t need any alt text, consider adding it to your CSS.

<img src="speaker.gif" alt="speaker speakers small speaker home speaker wireless speaker Bluetooth speakers black speaker buy speaker">

This is an example of keyword stuffing in alt attributes. Keyword stuffing is widely regarded as a bad practice because most search engines evaluate it as spam.

<img src="speaker.jpeg" alt="black speaker">

This is a better example of alt text because it includes a one-word description of the speaker.

<img src="speaker.png" alt="small black wireless speaker sits on table">

This is an even better example of an alt attribute for the speaker image because it provides a brief illustration of the image. A few, wisely-chosen words can detail even simple pictures.

Tips for Writing Better Alt Text

Even if you don’t conduct SEO for your business’s website, writing better alt text can improve visitors’ access to your site – and their experience upon arrival. Use the tips below as guidance when writing alt titles and descriptions for your site’s images.

1. Write useful descriptions for effective images.
   Choosing relevant images is as important as writing informative alt descriptions. When looking at a page, Google’s algorithms attempt to weigh the value of the content. Sites that rank highly in search results are the ones Google believes are the most helpful to the user.
2. Use keywords but avoid stuffing titles and descriptions.
   Alt descriptions are an excellent space to enter keywords for your business. Likewise, changing the file name of an image to a related keyword could help boost its SEO performance. However, filling those spaces with as many keywords as you hope to rank for could end up hurting your website instead.
3. Keep descriptions short (or use longdesc=“”).
   Alt descriptions shouldn’t be longer than 125 characters to accommodate most screen readers. If you do need more space to describe the image, use the HTML code longdesc=“”.
4. Move appropriate images or graphics to CSS.
   Typically, images and graphics that are a part of your website’s design should be kept in your CSS instead of the HTML. There, site crawlers won’t “read” the image or analyze its alt attributions.
5. Add alt text to button images.
   If you’ve got buttons that direct visitors to “Learn More” or “Buy Now,” you have images that need alt attributes. These descriptions should include the function of the button, allowing screen readers to direct users to the appropriate calls-to-action. For example, using the  image to the right to buy men’s dress shirts, the alt text might read, “button to buy men’s dress shirts with ties”.

Are you ready to knock your SEO and user experience of the park with keyword-friendly alt text? Do you still have questions on optimizing the images in the backend of your website? Our SEO specialists can help.