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 is 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 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 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”>
Best practices for alt text
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. Keep them 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 Shutterstock for the image above? “Freelancer working at home with cat.” Pretty darn specific!
There you have it: the beginner’s guide to alt text!
What questions, tips, or advice do you have about alt text for 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.