Advanced SEO IMG Element Handling For WordPress (Part I)

(Reading time: 4 – 7 minutes)

You will get better search engine results when images on your blog are properly described using metadata embedded in the img element’s alt, title and other attributes.

Here’s more from Jan Geronimo:

Using alt tags on images – that’s a problem, too. I’ve been using them but I’m not sure if I’m doing it right. alt tag is a description, right?

The short answer: yes, the alt attribute provides a metadata description of the image, usually limited to about 1k (1024 characters) in length, but hardly given in more than 60-70 characters.

The alt attribute long answer

Adding metadata to your images on your WordPress blog isn’t difficult, and it’s much easier if you start when your blog is new. But even when you’re well-established, providing alt attribute metadata for existing images may provide yet another way to capture traffic coming in from image searches.

There’s two aspects of image handling you need to understand:

1. How images are defined by the img element in HTML.
2. How the img element and it’s attributes are handled in WordPress.

WARNING: Fasten your seat belt, because this one’s going to be pretty long. Close to 2000 words, I suspect, by the time I finish it.

Required and optional attributes of <img>

For SEO purposes, we need to handle the following attributes for each image:

• src (required) You need to provide a link so that the image can be loaded.
• alt (required) The text in the alt attribute is used for accessibility; from W3C, “For user agents that cannot display images, forms, or applets, this attribute specifies alternate text.” This is not optional. The alt text is a replacement for the image, when the image cannot or will not be shown.

  Your article will not validate if the alt attribute is missing. WordPress almost surely provides an empty attribute if you do not provide anything, but I haven’t checked. You can do that, let me know in the comments.

• title (optional) the title attribute is used by WordPress to display a tooltip for the image, and for describing the image in the Media Library. It may – or may not – be used by search engines as a source of keywords for the image.

An illustrative example

Let’s motivate the discussion by examining the procedure and result for embedding an image into a WordPress post.

WordPress will help you add metadata to your images

We’ll use an image from iStockphoto of a woman at a manual typewriter. I’ve used this image before, so it’s already in my blog’s media library. Since I have 13 pages of images already in the library I had to search for this image, as you can see in the top red box. The search returned the image I was looking for as the second result.

Since I’ve used this image before (link below), I checked the Title, Caption and Description fields for correctness.

The old-fashioned way to publish

• The “Title” field is used in the WordPress media library, and for the tooltip.
• The “Caption” field is used by the alt attribute for the image as well as the caption.

Now let’s take a look at the result. As you can see, the caption is “The old-fashioned way to publish,” and moving your pointer over the image should result in a tooltip popping up with “Woman editor with typewriter.”

Works for me!

As it turns out, WordPress won’t display the entire post. Not sure what the problem is, but it’s both known and obscure, most likely an issue related to the “shortcode” implementation. It’s bitten me before on an article I wrote about Google Analytics.

Very annoying.

I have several options here: 1. Attempt to find out what the problem is and fix it, 2. File a bug report at WordPress, or 3. Do Something Else.

Of these options, #3 is the most time effective. The rest (or at least the next part) of the article is in a new post, and our discussion will continue there.

Now, I should have enough filler text to get around the bottom of the embedded image, and I can close this article out.

Here’s the next part of this series: Advanced SEO IMG Element Handling For WordPress (Part II). We’ll pick up our discussion with a review of this article, then continue with some definitions you need to know, some idiosyncrasies of the WordPress Media Library interface and more.

More resources for img element

Here’s a couple of great links to articles written by Antti Kokonnen:

• How to optimize images for web. Here’s how to optimize images for web, with quick and easy-to-use, free tools. Hint: Optimizing images for your blog is very simple, it can even be automatic.
• Top 7 image optimization tips for SEO and site speed. With these image optimization tips, you will ensure the maximum search engine optimization for images and ensure the images load fast without losing the quality.