How To Write Perfect Image Alt Tags In WordPress

How To Write Perfect Image Alt Tags In WordPress

Optimizing image alt tags can do more than improve your WordPress site’s SEO … in fact, even more important, is the fact that it can, and will, make your content more accessible to every user who visits your site.

It’s often said that “an image is worth a thousand words.” But how do you describe those images in your alt tags? Do you need a thousand words? Do you even need to use image alt tags?

When we think about “alt tags” (you do think about them, right?), rarely do we venture beyond imagining alt attributes as something that benefits our site’s SEO. Well … there’s a lot more to these puppies than meets the seeing eye! Alternative text also plays an important role in web accessibility, as we shall soon see.

In this tutorial, we look at how to optimize alt tags for SEO and accessibility, and show you how to write perfect image alt tags in WordPress … every time!

And if you think a video is worth a thousand images, here’s one that summarizes this tutorial (watch out for the crazy eyed puppies) …

Picture This …

You’ve set up, configured, and optimized a WordPress site for your own use or for a client.

Your site needs content. A good content strategy is to ensure that all the elements on your page appeal to human readers and search engines.

Adding the right images to content can help to attract more readers, encourage them to stay longer on your page, and strengthen your message. We also want to make sure, however, that these images will help you rank higher in image search results and improve the accessibility of your website.

This is where image alt tags come in.

WordPress image editor: alternative text input field
Alt tags let you optimize images for SEO and web accessibility.

What are alt tags?

An “alt tag” or alt attribute is an alternative text used to describe an image or what the image represents if the image can’t be displayed for some reason (such as a slow connection or an error in the src attribute), or if users can’t view it because of visual impairment, surfing the web with images turned off, etc.

Screenshot of WordPress post with images turned off to display alternate text.
Alternative text displays when images don’t show on your site and helps visually impaired users.

This alternative text information is useful for humans using screen readers when browsing the web, as these will read out the alt tag image text and make your image accessible, and for improving image SEO, as alt tags help search engines figure out the context of images in the page content and get these properly indexed for search results when users search online for images.

Google images search results for keyphrase "puppy love".
Alternative text improves indexing of your images by search engines.

Alt Tags vs Title Tags

While both attributes use alternative text to improve how images are used in your content, an alt attribute should describe what the image represents to help users understand what the image is doing on the page (i.e. its purpose), while a title attribute is used to show a tooltip when you hover over the image.

Screenshot showing a tooltip created by inputting text into the Image Title Attribute field.
Use Title Tags to create tooltips for your images.

Here is what the complete syntax of an HTML image tag looks like:

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

You can add alternative text as soon as you upload images into WordPress via the Media Library …

Screenshot of WordPress Add Media screen highlighting Alt Text input field.
Add alternative text after uploading images to the Media Library.

And when editing images (you can also add a title tag to your image during the edit process) …

Image Details screen with Alternative Text and Image Title Attribute fields highlighted.
Check that alt attributes are filled in when editing images.

How To Write Perfect Image Alt Tags in WordPress

Now that we have covered the basics of alt tags, let’s look at the types of images we will normally add to content and the guidelines for using alternative text with different types of images.

To help put things in context, we’ll create an example post in WordPress and apply “best practice” guidelines for using alt tags with different types of images to try and achieve the best outcome for search results and accessibility.

So, here’s our initial post, with some text and the first post image …

Sample post with text and image.
Let’s optimize this puppy!

Before we decide what to do with the image on this post, let’s take a look at best practice guidelines for optimizing images using alt attributes.

Using Alt Tags For WordPress SEO

The basic guidelines for the alternative text attribute are as follows:

  • The text should describe the image if the image contains information.
  • The text should explain where the link goes if the image is inside an <a> element.
  • Use alt="" if the image is only for decoration.

Google’s image best practices say that when choosing alt text for your images, you should focus on creating useful, information-rich content that uses keywords appropriately in the context of your page content. It also warns against engaging in the dark art of ‘keyword stuffing’ by filling alt attributes with keywords, as this results in a negative user experience and may cause your site to be seen as spam.

In fact, here’s what the former head of the web spam team at Google, Matt Cutts, had to say about using Alt tags to improve your site’s search results …

According to Google, then, here’s the relationship between using alt tags and the image below …

Cute chihuahua in a cup.
Want more traffic to a pic of a pup in a cup? Add alt tags yo … what up, pup!

(image: pixabay.com)

  • Bad (missing alt text): <img src="puppy.jpg"/>
  • Bad (keyword stuffing): <img src="puppy.jpg" alt="puppy dog pup pups puppies doggies pups litter puppies dog chihuahua puppies dog training puppy training cute puppy"/>
  • Better: <img src="puppy.jpg" alt="puppy"/>
  • Best: <img src="puppy.jpg" alt="chihuahua dog puppy in backyard"/>

If the image is purely decorative, however, no alt tags should be used.

Hence,

<img src="puppy.jpg" alt=""/>

While the above seems fairly straight forward, when you take into account questions of accessibility, things can start to become a little bit more confusing.

Which brings us to the different types of images that we can use in our content.

Different Types Of Images You Can Use In WordPress

If figuring out what alternative text you should use with which type of image starts driving you barking mad, just download the PDF Cheatsheet we’ve put together below and use it as a ruff guide when optimizing your images …

Click banner to download the Alt Tag Decision Tree PDF Cheatsheet
Yo … click on the banner to download the Alt Tag Decision Tree PDF Cheatsheet … it’s FREE!

WordPress lets you add all kinds of images to posts, pages, and custom post types. According to the World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG),  images fall into the following categories for accessibility purposes:

Informative Images

These are images used for representing concepts and information graphically, like pictures, photos, and illustrations.

Informative images can be used to:

  • Label other information (e.g. a picture, image, or icon of a telephone or email for contact details)
  • Supplement other information (e.g. explain something contained in the image)
  • Convey succing information (e.g. provide instructions depicted in the image)
  • Convey an impression, expression, or emotion (e.g. a picture of a happy family accompanying content or information about a family-friendly product)
  • Convey file format (e.g. PDF or ZIP file icons)

The suggested approach to using alt tags with informative images is to include at least a short description conveying the essential information presented by the image, as shown below.

Telephone:
A black and white example of an informative image.

<p> <img src="mobile-phone.png" alt="Telephone:"> 0123 456 7890 </p>

Decorative Images

Examples of decorative images include images that:

  • Are used as part of the page design (e.g. borders, section dividers, etc.)
  • Are used as part of a text link (e.g. to draw the user’s attention to a clickable link or enlarge the clickable area).
  • Have an adjacent text alternative (i.e. text displayed next to the picture is sufficient to explain why the image is there).
  • Are used to purely to create ambiance or improve the look of the page (i.e. “eye candy”).

The consensus seems to be that when an image serves no purpose, or when its only purpose is to add visual decoration to the page instead of conveying important information that would help readers to understand the page, then its best to provide a null text alternative (i.e. <img src="image.jpg" alt="">).

Cute cat cartoon depicting use of a decorative image.
A purrfect example of a decorative image that serves absolutely no purrpose!

An image with an empty alt attribute will be skipped over by assistive technologies like screen readers.

Many image SEO guides suggest that if an image serves no purpose and is purely included in your design for decorative purposes (e.g. a background image), then you should create the image using CSS, not HTML. If you really can’t change these images, then give them an empty alt attribute (alt="").

Note, however, that an image could be interpreted as being informative, decorative, or something else depending on the context it is used. The decision is up to the author’s judgment and their reason for including the image on the page.

For example, take the image of Dr. Sigmund Freud in our example below …

Sample post with a picture of a puppy and a photograph of Dr. Sigmund Freud.
Thanks to Freud, everything WordPress stores has an Id.

Dr. Freud is mentioned in the content as someone who ‘did not underestimate the power of early love.’ While Dr. Freud’s sombre stare into the camera lends the article an air of credibility and authority, is his photograph informative or purely decorative?

How would we consciously (or subconsciously) optimize this image with accessibility in mind? Do we leave readers guessing what Freud’s motive is for being in our post? Do we let things slip?

If we decide that the image is decorative, the guidelines suggest leaving the alt tag empty. Screen readers would then skip the image and visually impaired readers may not be made aware of Sigmund’s significant contribution.

  • Decorative: <img src="sigmund-freud.jpg" alt=""/>

If we decide the image is informative, then we must say something in the alt tags to explain the image.

  • Informative: <img src="sigmund-freud.jpg" alt="Dr Sigmund Freud recognized the significance of early love."/>

Alternatively, we might decide that the image is decorative, but we will make Dr. Freud’s recognition of the validity of “the proverbial durability of first loves” salient to all users, including visually impaired readers, by combining text in image attributes such as the img alt tag and img caption field.

Screenshot of Image Details screen with alternative text describing a photograph of Dr. Sigmund Freud.
Adding alt tags to images is hard work. But one day, in retrospect, the years of struggle will strike you as the most beautiful.

Functional Images

Functional images don’t convey information … they are used to initiate actions.

Examples of functional images include clickable buttons, links, and other interactive elements, such as a printer icon to represent the print function or a button to submit a form.

The text alternative for functional images, then, should convey the desired action you want to elicit from your reader (i.e. the purpose of the image), instead of providing just an image description.

For example, for the button image shown below, the text alternative should be something like “click button to find love” instead of “image of clickable button”.

Example of a functional image depicting a clickable button.
An image of a functional image depicting a clickable button for dysfunctional people who haven’t clicked with anyone yet!

Because functional images are essential to the functionality of the content, missing or empty alt values create problems for screen reader users. Assistive technologies like screen readers normally announce the image file name, the image URL, or the URL for the link destination, so if the alt tag is missing, users will have difficulty understanding the action that will be initiated by the image.

Images of Text

Images can often display text that is meant to be read.  In this case, the alt tag should include the words used in the image.

For professional counseling to discuss relationship issues, call 0123 456 7890:
This image contains white text meant to be read.

<p> <img src="relationship-banner.png" alt="For professional counseling to discuss relationship issues, call 0123 456 7890:"> 0123 456 7890 </p>

Accessibility guidelines suggest avoiding the inclusion of readable text in images unless the image is a logo. Instead, you can style text with CSS3 and use embedded fonts rather than depicting text as an image.

If you have to depict numerical expressions using images because of the difficulty of presenting equations and special mathematical symbols with HTML, then make sure the alt tag provides sufficient information for readers to be able to do the math.

For example, the screenshot below displays an image that uses recurring decimal numbers …

Example of post containing an image depicting a recurring number.
Wait … is that last digit meant to be a six or a nine?

Here is how you could write the alternative text for this image:

<img src="0dot6666recurring.png" alt="0.6666 recurring. (The recurrence is indicated by a line over the '6' in the fourth decimal place)">

Complex Images

Complex images such as graphs, charts, maps, diagrams, and illustrations often contain more information than can be conveyed in a short phrase or sentence and may require long and detailed text descriptions.

Sample post containing example of a complex image.
Complex images used to be simple before SEO and web accessibility were put on the map.

Accessibility guidelines provide various approaches for making long description information in complex images available to programs like web browsers and search engines (e.g. using HTML5 elements like <figure> and <figcaption> and assistive attributes such as longdesc and aria-describedby).

One approach you can use when adding a complex image to your content is to include the long description on the same web page as the image and refer to its location in the alt attribute.

Here is the alternative text that we could use for our example graph using this approach:

<img src="love-hiatus.png" alt="Line chart showing rates of young couples taking relationship breaks since 1988. Described under the heading Does First Love Last?">

When using alt attributes for complex images, make sure to provide clear and accurate location information in the alternative text field to help users find the content more easily.

Groups of Images

When multiple images are used to represent one piece of information, only one of those images needs an alt tag to describe the entire group. The other images should have a null (empty) alt attribute so that they will be ignored by assistive technology.

An example of this is using a group of star icons to represent a rating …

Sample post of star ratings to depict example of a group of images
I know what you’re all thinking … how did this cute little puppy get such a paw star rating?

Here’s how the alt tags for the star icons used in the example above would look like:

Rating:
<img src="star-full.png" alt="3.5 out of 5 stars">
<img src="star-full.png" alt="">
<img src="star-full.png" alt="">
<img src="star-half.png" alt="">
<img src="star-empty.png" alt="">`

Of course, you can just use a plugin to add star rating images in WordPress, but you get the picture!

If a group of images is used to represent a collection or thematically related images, then you should add a text alternative describing each image and its relationship to the group.

Huh … what?

Here let me break it down into simple steps.

Here we have a group of images being used to represent a collection of thematically related images …

Sample post of an image gallery.
It’s an image gallery of dog pics, for pup’s sake!

Note that if you insert images into WordPress posts or pages using an image gallery, you will not be able to view the alt tags of your images in the content editor screen  …

Highlighted gallery link shortcode
Freud was right about Jung love … even collective images have Ids!

However, if you view the source code of your published post or page, (right-click on post and select Ctrl + U if using Windows & Google Chrome web browser, or Option + Cmd + U with iOS & Safari) …

screenshot of view page source selected by right-clicking on screen
All shall soon be revealed …

You will see that WordPress includes all attributes in the content’s HTML using the correct markup structures …

Source code of WordPress post with samples of alternative text highlighted.
And there’s our text alternative describing each image and its relationship to the group!

Image Maps

If images with multiple clickable areas (hotspots) are used, you should provide an overall context for the set of links and alternative text for each individual clickable area of the image describing the purpose or destination of the link.

animated gif with example of clickable image sections
This is an alt chart of baloney information … clicking anywhere on this image map will only lead to heartache and disappointment.

Typical uses for image maps include organizational charts linking to pages with individual profile information and interactive images with hotspot areas, highlight sections, descriptions, links,etc.

There are various plugins you can use to create image maps in WordPress. Just search for “interactive image” in the ‘Add Plugins’ screen of your admin area (Go to ‘Plugins’ > ‘Add New’). Or, check out our tutorial on how to build a CSS image map.

Alt Tag Tips For Better SEO & Web Accessibility

Images can improve your search results, help make content easier to understand for people with cognitive and learning disabilities, and provide cues to visually impaired users, but they can also create barriers if they’re not optimized for accessibility.

In addition to making your content more indexable for search engines, accessible images benefit people using screen readers and speech-enabled websites (text alternative can be read aloud or rendered as Braille), people using speech input software, and mobile web users browsing sites with images turned off (especially for data-roaming).

Here are some useful tips that will improve your SEO and make your content more accessible when adding alt tags to images:

  • If you’re not sure about the type of image you’re adding to your content, refer to this alt decision tree.
  • If your image has no purpose, leave the alt tag blank.
  • Keep your alternative text as concise as possible and put the most important information at the beginning.
  • Use punctuation in the text alternative to make the information easier to understand.
  • Add space characters in the alt text when there’s no space character between the image and adjacent text to avoid words running together when read by a screen reader (e.g. alt="Board of directors and related staff: ").
  • If you use a null (empty) text alternative (alt="") to hide decorative images, remove any space characters inside the quotes, as some assistive technologies will announce the presence of an image if space characters are detected between the quotes marks.
  • You don’t need to include words like “image”, “icon”, or “picture” in the alt text, as those who can see will know this and screen readers will announce the presence of an image. Unless it’s important to distinguish between paintings, photographs, illustrations, etc., best practices recommend avoiding the more generic use of the terms in alternative text.
  • Go through each image on your web page to determine if the alternative text is appropriate. As you do this, imagine reading the web page aloud to someone who is visually impaired and needs to understand your content. This will help you judge the alt text information in context and decide what (if any) function or purpose the images serve.
sample post image with fake text and picture of sleeping pup.
Getting everything right on this page is so doggone tiring!

Check Your Alt Texts

After you’re done adding content to your posts or pages, there are checks you can make to assess the accessibility of your web pages.

There are also tools you can use to perform automated tests to check if any alt text is missing on a page.

For example, you can use the WAVE web accessibility evaluation tool to check alt text with any browser …

Home screen of Wave web accessibility evaluation tool.
Wave … hello!

Just type the website address in the field, click the button and your web page will display in the browser with icons and tags and a summary report section …

Results screen after running website URL through Wave evaluation tool.
Wave fetches your post, sniffs it out for accessibility, and displays results in a page that looks like a dog’s breakfast.

If an alt tag is detected, a green icon will display for that image. Click on icons to view more information …

Wave results page showing green icon when image alt tag is detected.
A green icon means that an image alt tag has been detected. Who’s a good boy?

If an alt tag is missing for an image on your page (not null or empty … missing!), you will see a red icon …

Wave results page showing red icon when image alt tag is missing.
A red icon means that an image alt tag is missing. Where’s the ball gone?

Go through the report section and click on icons on the page to view the alt attribute information …

Wave results screen with detailed report section.
Keep going until you’ve cleaned all the mess up!

Fix any issues on your page, then republish and refresh the tool to make sure everything is ok. Rinse and repeat until every issue on the page has been fixed.

Sample post with text and image of puppy.
Congratulations! Your article is now pawfect!

One last thing …

Optimizing your images for SEO and web accessibility takes dogged determination. Take the time to craft a proper alt text for every image you add to a post or a page on your site. Site users, sight-challenged users, and search engines will thank you for it!

Sample post image with text and picture of a puppy litter.
Share the love with all users by making your website inclusive and accessible to everyone!

If you’re wondering what the best WordPress image optimizer is, look no further than our very own Smush Pro. Combine it with Hummingbird and SmartCrawl SEO, all three can dramatically improve the performance of your images. You can try all three on your site with a free 30-day trial.

images: pixabay.com

Tags:
Martin Aranovitch
Martin Aranovitch Martin believes in a WordPress-centered digital universe and spends a lot of time living in it. Before joining WPMU DEV, Martin authored many WordPress guides and courses for beginners.
Phew! So there you go, that's all we can think of when it comes to reaching al tag Nirvana! Did we miss anything? Do you have any handy tips or tricks when it comes to image tags? Any questions? Let us know in the comments :)