I noticed something strange this week when I was looking at my blog stats: I was getting traffic through direct referral from BuzzFeed.

How odd, I thought. What on Novice No Longer could possibly be relevant to BuzzFeed?

It wasn’t my homepage that was linked, but a specific article: Getting a busy and being social for the socially awkward.

The link was from an article titled 28 Problems Every Type-A Person Will Understand. It wasn’t until I viewed the article and got to number 18 that I realized the relevance — they weren’t linking to my article exactly, but to an image that I used in the article. They just wanted a picture of a busy calendar, which I included in my post.

I headed over to Google (using incognito) and did an image search for the words “busy calendar.” The picture from my blog that BuzzFeed used in its post was the first result.

So how did I get a picture for my blog to be the top image search result for a fairly common phrase (which ultimately resulted in a link from BuzzFeed)?

The answer is simple: alt attributes.

The alt attribute

The alt attribute is part of an img tag that allows you to tell a search engine the exact contents of your image. It’s also important for users who use accessibility features to browse the internet, and is thus required in proper HTML5. Despite these requirements, however, img tags still work perfectly fine without an alt attribute and a vast majority of online publishers don’t bother writing an alt description.

This is fantastic news for us. Their bad practices mean fantastic opportunities for everyone else.

It may be hard to get on the first page of a traditional Google search, but it’s still fairly easy to rank high for image searches. Just make sure every image you post has both a brief descriptive file name and a proper alt attribute.

Using the alt attribute

In order to insert an image into a webpage, you need to use the img tag. The img tag works perfectly fine without an alt attribute, and looks something like this:

<img src="/busy-calendar.jpg" />

Assuming you have a jpg file titled busy-calendar at the appropriate directory, this image will display just fine. You’ll also notice that the file is titled “busy-calendar,” which briefly describes exactly what the image is. This is key.

But the alt attribute lets us take this a step further. Let’s look at the same img tag with an appropriate alt attribute:

<img src="/busy-calendar.jpg" alt="Dann's busy Google calendar" />

The file name is short and sweet, but the alt attribute allows us to go into a little bit more detail. We’re able to include who’s calendar we’re looking at (mine) as well as what calendar application is displayed (Google Calendar).

It would be unnecessary and bad practice to make the file dann-busy-google-calendar.jpg, even though all the information is relevant. You should keep the file name as short as possible, and then use the alt attribute to flesh out the description a bit.

It seems simple, but so many people omit the alt attribute that it can prove extremely valuable when used correctly. You’ll be surprised how much traffic you’ll get from Google’s image search, and you never know when you’ll get a valuable link from a high authority domain simply for posting a great image.