Need a WordPress website this weekend? Start here...

Fast Process For Fixing Image SEO In WordPress

October 3, 2009 By

(Reading time: 3 – 4 minutes)

Nightmare! You have just learned that you’re doing your blog post images all wrong!


You’re not getting any SEO goodness from your images, and missing out on potential traffic.

Bummer!

If you just dropped into this ongoing series of articles on SEO and WordPress images, check out both “Advanced SEO IMG Element Handling For WordPress (Part I)” and “Advanced SEO IMG Element Handling For WordPress (Part II).” These articles give the knowledge for why you need to deal with image SEO on your WordPress blog, and a pretty good peek “under the carpet” for what it all means.

But if you don’t care about all that and just want to get straight to the good stuff, follow these directions carefully to help you get better search engine results from having embedded images.

Reaping SEO benefits from images

When you’re adding new images to an article, just make sure to add in all the metadata correctly before inserting the image into the article as shown in “Advanced SEO IMG Element Handling For WordPress (Part I)“.

It’s harder if you have already published the image. You have to make a decision:

  1. Fix only the <img> alt and title attributes in your article. This is probably the fastest way to proceed, but you won’t have the metadata in your Media Lirbary if you want to use the image in a future article.
  2. Fix the img attributes in your blog’s Media Library and reinsert each fixed image. This is the most accurate way, but it’s also the most time consuming.
  3. Use copy-paste to add the same text to both the img attributes in the web page source and in the media library. This splits the difference between the first two methods. You will have to have a couple of windows open, but it’s reasonably fast and reasonably accurate.

For images, you want to break this down into repeatable tasks so you don’t have to do it all at once.

I use Juicy Studio Img Analyzer to examine all the images on the page. The first time you run this tool, it can be overwhelming to see all the warnings and errors. But it’s worth spending a couple of hours analyzing your blog to see where potential problems could be.

Here’s a few suggestions for getting started:

  1. Knock out the front page first.
  2. Fix the <img> element in the top post first.
  3. Check search results for hot posts.
  4. Choose a random post that you like, with a fun image, fix that one.
  5. Wash, rinse, repeat over time as hot search terms evolve.
  6. Make sure to handle images correctly going forward.
  7. Keep track of posts with images that have been fixed.

If you’ve been blogging a while, and have loads of images without metadata, you’re not going to be able to fix them all at once. Just take your time and fix the most important, and make sure you get those alt and title attributes written correctly going forward.

Filed Under: Building Traffic Tagged With: , , , , ,

Advanced SEO IMG Element Handling For WordPress (Part II)

October 1, 2009 By

(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:

Table headings for the WP Media Library aren't quite congruent with metadata

Table headings for the WP Media Library aren't quite congruent with metadata


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

Filed Under: Building Traffic Tagged With: , , , ,
« Older Posts
Newer Posts »