5

Alt Text: What is It and How Does It Work?

 3 years ago
source link: https://www.semrush.com/blog/alt-text/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Alt Text: What Is It and How Does It Work?

Michelle Ofiwe

Mar 16, 20217 min read

You probably have heard of alt text for images before in terms of web accessibility. Alt text (also known as alt attributes or alt descriptions) is the text accompanying images that is read out loud by screen readers, helping visually impaired users navigate the web.

But alt text can do much more for your image SEO than you think, just like leaving an empty alt attribute can harm your rankings. In this guide, we’ll go over:

What Is Alt Text for Images? 

Alt text describes not only the content of the image, but also its context. Often mistaken with the alt tag, alt text is actually part of the HTML code, but it is only the description of the image contained in the alt tag and not the whole attribute. 

The meaning of alt text comes from alternative text, and you might have come across it before if you ever had images on a page not loading properly. Alt text is the written copy displayed in place of those images.

Adding alt text to images is one of the best practices used by SEO professionals to optimize images for the web. This is how an HTML image alt tag looks:

k6sAghGaYA6TGYCMxyOaqk8Noe3IWUxDWvF7r4FSA9pC40luFXj_02y_jeS7Pw52EZsAQlYqaWjNcxR3OmK9CKufpf-XB5IRbKUYaTLy3vU75EbuLA10y424_UQ2QlEKjtZxScw

As shown in the source code on the right, the alt text for a screenshot of our Site Audit Tool dashboard is:

<img alt="semrush site audit dashboard" />

Straightforward, isn’t it?

Why Is Alt Text Important for Image SEO?

Alt text for images is becoming more important as search engines improve their ability to read any image on a page, and user experience becomes richer with visual content.

If you’re creating any kind of content for the internet nowadays, it’s likely you’ll need visuals. From a user’s perspective, embedded images on the page are much more pleasant than clicking on a hyperlink, and Google SERPs are catching up on that.

In fact, often the highest-ranking result of a Google search is visual content. For example, if we search for “seo resume examples,” this is what the SERPs look like:

u3_Dwgb7UozjXphqM4cClP3ZPFeWhr5aDFR-1opyhJP3-iyPFWDTTJ97bRXHZbYYADx8vfsAVRnhFIK71wT7nPTMHAPMxKqfRtCh0j18v7Drr0ttrkdhGcCHnb4nc4A5tDM-1YE

This is mostly due to Google’s constant expansion towards visual research, and keeping up with the latest machine learning and AR rendering technology. 

Google discussed the importance of alt tags as early as 2007, and they’re an integral part of Google’s image publishing guidelines. The search engine’s intention to move towards a more comprehensive visual search is confirmed with every update. 

Hence, optimizing alt text for images might still be a novelty to some, but alt text best practices will soon be essential for anyone creating content out there on the internet.

How to Add Alt Text to Images on Your Page

Now that we understand why alt text is so important for image SEO, it’s necessary to learn where the alt attribute options are in your CMS, as most website platforms usually have the  appropriate features already set up. 

Check out our guide on Image SEO and alt tags to learn how to add alt text to images on WordPress, Shopify, Magento and Wix.

How to Write Alt Text that Works

Alt text offers us a chance to integrate the focus keywords in a relevant and meaningful way that actually enriches the content and offers a better user experience. 

Including the focus keyword in the alt text is not the only thing to keep in mind when optimizing images. When writing alt text for images on a page, remember to:

  • Describe the image as objectively as possible, ultimately alt text is displayed when an image isn’t loading, so it needs to be a coherent image description.
  • Provide context to the image, so that crawlers can accurately index it.
  • Keep it short and straightforward, for longer descriptions use the longdesc attribute (note: leave out “image of” or “picture of”, it is self-explanatory as alt text is per se the description of the image).
  • Use keywords but avoid keyword stuffing, all usual rules of good quality content apply also for alt text. Keyword stuffing doesn’t work for your content and won’t work for alt text.

Alt Text Best Practices for Image SEO

Some SEO-friendly advice is to avoid using images in place of words. Since search engines can't “read” as humans can, using an image instead of the actual text is confusing for crawlers and can hurt rankings.

As a general rule, make sure you add alt text to all images on a page. This includes images used as buttons. Alt text for buttons could be descriptions like “apply now” or “subscribe to newsletter,” etc.

Alt Text Examples: From Bad to Best

Let’s have a look at some alt text examples ordered from bad to best:

_TzsQvI5z0jcex9fXSagePpxbfjujEyZUE568H_SG7zr-cVWAlPGL-NGXTwNHriAbVRXGX21J2R-ooy35RucrdM-dCP9vnXJwkhg1_99gOYGIPqvvyrkAhBodT5QAg

How to Write Alt Text for Ecommerce Sites

Once again, alt text needs to be as descriptive as possible. It’s important to avoid alt text like: “big clearance converse shoes buy yours now.” This could trigger a spam alert.

Pixabay free commercial use

Pixabay free commercial use

A good alt text when optimizing images for ecommerce websites could be: 

<img ="converse_shoes.png" alt=" converse all star sneakers for men black">

Uncovering Issues with Image Alt Text

Even when we do our very best to write alt text that works well, sometimes we miss something.

When you want to optimize images for the web, our Site Audit Tool can help you highlight issues with images on your page. 

Broken Images

Broken images provide a poor user experience because they cannot be displayed properly, giving the overall impression that your page is low quality. Once search engines pick up on this, broken images can hurt site rankings.

aBbperBrrmz98rQxK2grppvITiXJ58KRB2DVZByacwQcQBEy2oHa8MothrTZnUvTQLJSPrvcHafG-Zdec3evRaTk-3tr17dN2rtEWupqHNrF_LSC0cUpRUeTy9plwZC-gEYDJWY

The Site Audit tool will highlight the cause of the broken image. Then, you’ll likely need to fix:

  • A misspelled URL or an invalid file path: correct a typo in the URL; if the image file was moved, correct the URL to point towards the current location.
  • The image no longer exists: if an image file was deleted or damaged, change it to a new one; or if the image is not needed anymore, remove it also from the page’s HTML code.

The only thing to keep in mind here is the difference between broken internal images and broken external images. As you don’t have control over the external images, the best approach is to replace them altogether.

Images Without Alt Attributes 

As previously mentioned, an empty alt attribute is a missed opportunity for better image search rankings. Moreover, it doesn’t deliver a good user experience to visually impaired users. 

5xMAOcaiMLu8LPMDLkVuOdoPx16OtD-INRX49eR3di25yqA0zg30R3pb0pQor7KOLTMIA7Cv81x1HpcSOuVCbKpxod7eet-qDPxU3f4OEYcWbSqTNc4oci682jDL5AUdniYogs0

You can use the Site Audit Tool to review all images without alt attributes, making it easier for you to step in and fill out the alternative attribute with the appropriate text. 

Note the empty alt attribute here:

  • <img src="magename.png" alt=" ">

Change this to:

  • <img src="imagename.png" alt="well written alt text with keyword">

Alt Text FAQ

Here are a few questions we hear often when working with alt tags: 

How Do I Find the Alt Tag on a Page?

Point somewhere on the page with your mouse, right-click and choose “Inspect” from the menu. The source code of the page will appear on the right side of the screen.

Click on the first icon on the left of the HTML code panel, then find the image on the page whose alt tag you wish to see and click on that too. The HTML code for that element will be highlighted with all the attributes for the image.

How Do I Read the Alt Text in the HTML Code?

Once you have clicked on “Inspect,”  you need to look for the relevant HTML tag in the panel displaying the source code of the page. The alt text is preceded by a tag that reads "alt=", and what follows is the alt text description.

How Do I Know if an Image Has Alt Text?

When inspecting an image in the source code of a page, if the alt tag after "alt=" only shows two quotation marks with no content in between, then the alt attribute is empty i.e., there’s no alt text. 

How Do I Add Alt Text to a JPG file?

In Microsoft Word, you can right-click on the image and select “Edit alt text” from the menu. Fill in the description of the image in the input box and click “OK”. Remember to double-check your text for spelling and grammar, as input boxes don’t have spell-check. 

Can You Use Commas and Periods in Alt Text?

Yes, and you should. Including proper punctuation in alt text allows screen readers to deliver a better user experience. 

Moreover, alt text is displayed when an image doesn’t load properly. High quality text ensures a better user experience. 

How Long Should Alt Tags Be?

The recommended maximum alt text length to accommodate most screen readers is 125 characters.

Importance of Alt Text for Images

Alt text is an important part of image SEO and user accessibility, so try to keep both in mind as you optimize your alt tags. Users and search engines use your alt text to better understand the images on your page. By following the steps above, you’ll be well on your way to crafting pages that are user friendly and easier to crawl.


Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK