The Beginner’s Guide to Alt Text

*Updated: September 6, 2022

Every blog post requires dozens of details, big and small. When crafting content, editing photos, linking, drafting social shares… it’s easy to skip over some of the seemingly small steps. Alt text is one example of a little detail that’s often overlooked but oh-so-important!

If you’re unfamiliar with alt text or have been guilty of skipping this step, let’s review the basics and why it’s so important with this beginner’s guide to alt text. Hopefully, you’re already using descriptive file names when saving your images (e.g. DIY-dog-ice-cream.jpg instead of IMG_20150717_080105.jpg). Alt text is the next step.

So, What is Alt Text?

Alt text is an HTML attribute (that little piece of code you add to your text editor) that tells readers or bots what an image on your site is. At its simplest, alt text–short for alternative text and sometimes called an alt tag–is the text alternative to an image.

Let’s say you link to an image that, for whatever reason, gets broken. Since the image isn’t there any longer, in the box where the image would have been your readers can see the alt text you entered to represent that image (e.g. Emmett eating DIY dog ice cream).

Why Use Alt Text?

For one thing, crawlers can’t “see” images, so the alt text gives those search engine spiders text they can understand and categorize.

Alt tags also can be read by screen readers and devices used by people who are visually impaired. The alternative text that you’ve entered is what the device reads to the user.

Finally, alt text provides a valuable opportunity to improve your on-page SEO and your social shares. As Carol Bryant, Marketing & Social Media Manager for BlogPaws, said, “There is a very “pinteresting” reason to use alt text properly, as well. In addition to giving your image the opportunity to rank in search engines for keywords and phrases, you also want the right Pinterest description as well. What you type in the alt text is the text that Pinterest will pull in for the description.” Make sure you’re using the right relevant, evocative keywords for that pin description!

How Do You Use Alt Text?

In both WordPress and Blogger, you don’t have to worry about the HTML alt text code at all. Both platforms provide you with a simple field when you’re uploading the image. In Blogger it’s under Image Properties. In WordPress, after you add a file to your media library, alt text is a field under the Attachment Properties box that automatically opens.

If you do want to tweak the code, simply add: alt=”YOUR ALT TEXT DESCRIPTION” to your image code before the closing tag.

So, it would look like this:

<img src=”filename.jpg” alt=”description”>

For the example I used above, the final tag would look like:

<img src=”DIY-dog-ice-cream.jpg” alt=”Emmett enjoying DIY dog ice cream”>

How to Check if an Image Has Alt Text

If you’re unsure whether you have added alt text to your images, you will need to go back and check. One way to do this is to log in to edit your page and check if the field has been filled out. But you may not want to take the time to log in just to check a single page.

Chrome

For Chrome users, right-click on the image in question and select “Inspect” from the menu that pops up. If you prefer using keyboard shortcuts, use Ctrl-Shift-I. A pane will open to the right of the website with the full-page HTML code and the code associated with the image will be highlighted. If you entered alt text, it will show there.

Firefox

Like with Chrome, right-click on the image that you are questioning. In Firefox, you will choose “Inspect Element” from the quick menu. The pane with the HTML code will open at the bottom of the screen allowing you to see if there is alt text in the highlighted portion of the code.

Alt Text Best Practices

Don’t Keyword Stuff!

Yes, you should use keywords in the description, but don’t overdo it. In the example I’ve been using, the keyword phrase is clearly “DIY dog ice cream.” That’s sufficient and effective. In fact, in their image publishing guidelines, Google clearly explains the dos and don’ts of keywords in alternative text. (Incidentally, most of their examples are puppies and kittens! Our furballs make the internet run!)

Don’t Write Long Descriptions

Stick to short, to the point, and relevant keywords. Imagine you were using a device to aid a visual impairment. What info would you want or need to know to “get” what’s in the picture?

Leave Out Image Specs

It’s tempting for file management purposes to put the file size or codes (like the date) for your own archiving system. Use that data in the title attributes, if necessary, but definitely keep it out of the alternative text.

Finally, Be Specific.

If you took a glance at Google’s recommendations from the link above, you’ll see how important that is. Remember, if you’re searching for an image, you want to find the exact right image. The alternative text that other bloggers and publishers use enables you to find the right thing, and it enables YOUR images to come up closer to the top in Google searches.

By the way, the alt text provided by Canva for the image above is “young woman with cat using laptop.” Pretty darn specific!

There you have it: the beginner’s guide to alt text!

What questions, tips, or advice do you have about adding alt text to images on your site? Have you hit on any best practices or tricks that drive traffic for you? Please share in the comments!

 

Maggie Marton serves as the BlogPaws senior editor. When not hiking with her two pit mixes, Emmett and Cooper, or playing with Newt the Cat, Maggie writes about them (and the pet industry) at ohmydogblog.com and maggiemarton.com.