Advanced SEO IMG Element Handling For WordPress (Part II)

(Reading time: 7 – 12 minutes)

Never lose any more sleep over image SEO in WordPress, here’s more of what you need to know to master the whole process.

In the first article, “Advanced SEO IMG Element Handling For WordPress (Part I),” you learned about the “alt” and “title” attributes. The alt attribute is required by the HTML specification and is used by WordPress for captions when using the Media Library to emplace images. The title attribute is displayed by the Media Library and used for tooltips when the Media Library is used to emplace images in your blog post.

This article covers a hodge-podge of background material which is critically important if you intend on fully understanding how images are used in WordPress and for SEO.

There will be one more article following with a process for updating your existing images, those thousands of images already embedded into your blog, all without a shred of supporting SEO metadata!

More about this “tag” thing

The tag is what defines what the HTML element is called. For example, <title> is an opening tag and </title> is a closing tag. <img /> is an empty element, which means the tag is closed with a “/” and all the information for the <img /> element is carried by it’s attributes.

But it turns out “tag” is used indiscriminately, outside it’s strict definition. Currently, “tag” is used to refer to the <img /> element as a whole, the data in the <img /> element, and the attributes associated with the <img /> element. There’s nothing either of us can do about this unfortunate situation except steep ourselves in the context of HTML images, and not worry so much about the precise definition of words.

As a result, I may use “img attribute” and “img tag” and “img element” more or less interchangeably.

With this in mind, let’s the review the definitions again:

• HTML element: From Wikipedia “…tags, as well as text, which act as indicators to a web browser as to how the document is to be interpreted by the browser and ultimately presented on the user’s computer screen.”
• HTML attribute: From Wikpedia “…name-value pairs, separated by “=”, and written within the start tag of an element, after the element’s name.”
• HTML tag: From Wikipedia, “part of an Hypertext Markup Language document.” That’s not very useful. The tag is the stuff between “<” and “>” for example “<stuff>.”

These definitions came from less formal Wikipedia instead of the HTML spec, which can be unreadably pedantic at times.

By definition, you can see that “alt” and “title” aren’t “tags.” They’re attributes of the img element.

Check your sources carefully

There is a lot of confusion out there concerning when to use alt and title attributes.
Part of the confusion results from “title” being overloaded in HTML. That is, what “title” means depends on where and how it’s used in a web page. There’s no easy way to understand this, short of memorizing the context.

For example, the title element can only appear once, and in the head element. But the title attribute can be used by many other HTML elements including img.

Compounding the confusion is well-intentioned but occasionally not-completely-accurate advice. Check out the explanation here on using an <img> element with a title attribute:

Luckily, the rule is pretty simple – always add the ALT attribute to your images but include the TITLE attribute only if the image is a link.

This need not be true. According to the HTML standard, the title attribute can be used at will, for any reason, not just if a link is involved. How Google chooses to use the title element for “SEO” purposes may change at will. You’re much better off in the long run following the HTML standard rather than worrying about the current state of Google’s algorithms. In this case, what the author recommends won’t hurt, but neither will it help for those images that aren’t linked.

Media Library interface incongruent

Here’s an interesting bit of User Interface design, which is likely to get fixed in the future. Currently for the Media Library interface (the situation with respect to version 2.8.4 of WordPress): the fields in the table listing out members of the media library collection do not correspond to the metadata provided for the images. This isn’t the greatest design, but various bits of WordPress proceed at different rates, and these kinds of issues usually get handled at some point.

Here’s what it looks like in WordPress 2.8.4:

There’s some room for improvement, which would make image handling less confusing:

• “File” really should be “Title” because that’s what it’s displaying.
• There’s room for the Description field to be displayed. If it were displayed, perhaps more people would be inclined to write careful descriptions.
• I would add the actual file name and the URL to the file to this interface as well. The URL especially would help me use images more effectively.

Note: this is not criticism of WordPress or the programmer and designers. Writing large software applications is hard. I’m confident that the future will bring substantial improvements in the Media Library interface.

Resources for understanding HTML <img> element and SEO

There’s a lot of material out there, some of which is really good, some could be better. Check these out to get the fundamentals mastered:

1. Leveraging Images In WordPress For Better SEO deals with the fundamentals of adding SEO-significant metadata to your img elements. This is a must-read, must understand before proceeding here. Some of the material in these two articles overlaps; reading both gives you two perspectives.
2. Holly Jahangiri writes an detailed summary of her experience with Do-It-Yourself SEO Using Microsoft’s Bing Toolkit. You will need to put in a similar amount of effort. I recommend a Friday evening!
3. Understanding What the Heck is HTML TITLE element and why do I need one? is important as well. There’s more you will need to know specifically about implementing title element in a WordPress blog, which is the subject of an article currently being written (look for a link in the future.).
4. Joe Clark’s <img> element explanation is the best I’ve seen on the web, ever. WARNING: the article itself is G-rated. At least one link is NSFW. You’ve been warned here, he will warn you there, and you’ll click on it anyway.
5. W3C HTML Standard is the canonical source for exactly what constitutes an <img> element and all it’s attributes. Your ability to read and understand the HTML spec will separate you from almost every other blogger. It’s literally the last word on the subject!

These articles are pretty rich, but you’ll have everything you need to know about images for WordPress after you get through them.

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.

Did you make it all the way down here?

Folks, currently, and since I’ve started writing on Website In A Weekend, I’ve solicited ideas for articles. The resulting articles are some of the best on this website. I’ll list them out one day, along with dofollow links to the people that suggested them. If you have an idea for an article, or would an existing article updated or rewritten for clarity, you need to act now and contact me. Or leave a comment with a request or a question. For example, Jan Geronimo recently mentioned having a little confusion about “img tags,” which has resulted in a series of posts about titles, images and SEO (couple more coming, check back next week). If you don’t ask, it won’t happen. Surf season is about to kick off, and I won’t have the time or inclination to write nearly as much.

So send those ideas on!

And here’s an offer: for any article lacking a supporting image, make a suggestion I like – and can use – and I’ll add that image and credit you by name and a dofollow link. Something inexpensive from iStockphoto, or Creative Commons licensed, or a screenshot, whatever. I’m flexible. (Offer expires one month after posting date.)

---

Would you like more? Send me a letter...

Tagged as: Geronimo, Graphics, Image SEO, Offer, SEO