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?

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!

• More Than Meets the Eye
• Picture This …
• What are alt tags?
  • Alt Tags vs Title Tags
• How To Write Perfect Image Alt Tags in WordPress
  • Using Alt Tags For WordPress SEO
  • Different Types Of Images You Can Use In WordPress
    • Informative Images
    • Decorative Images
    • Functional Images
    • Images of Text
    • Complex Images
    • Groups of Images
    • Image Maps
• Alt Tag Tips For Better SEO & Web Accessibility
• Check Your Alt Texts
• One last thing …

More Than Meets the Eye

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.

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.

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.

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.

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.

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

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

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

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 …

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 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 …

(image: pixabay.com)

• Bad (missing alt text):
• Bad (keyword stuffing):
• Better:
• Best:

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

Hence,

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 …

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
• Decorative images
• Functional images
• Images of text
• Complex images
• Groups of images
• Image maps

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.

0123 456 7890

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. ).

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 …

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:

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

• Informative:

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.

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”.

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.

0123 456 7890

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 …

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

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.

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

and