Bloggiesta mini-challenge: alt motives

A lot of you mentioned that you want to learn more “code” and about SEO (search engine optimization). Now, there is a lot to learn about SEO and programming, but I like little effort/big result. We’re all busy enough!
Pam at Bookalicio.us has already made a great introduction to HTML in a challenge last year so be sure to check that out, even to just freshen up!
I will not have ten lessons. I will have one that will aid/increase/??your SEO-score but more importantly be more accessible for readers, in particular the visually impaired. So yes, just one thing, but with a possibility of a lot of work and good results!

I will teach you how to use alt codes, or “alt attributes” (I think of them as little hidden superhero outfits for my images). These are also called “alt texts” or “alt tags”, the latter will put you at risk for being called a n00b 😉
Alt is an attribute to the “img” tag that allows persnickety browsers to display a text instead of images. These alt texts are also picked up by read-out-loud-software for the visually impaired ánd picked up by search engines when people perform a search.

Where do I find the alt code then?

You’ve probably noticed it when copying embedding codes from image hosting sites. The one from Flickr looks like this:

The code from photobucket looks quite similar:

Notice that they provide a text, in the Flickr embed you can clearly see it’s a copy of the title attribute, in the photobucket it’s not that obvious.
Title attributes do not attribute (heh) to your SEO-score. They will show a text when the cursor hovers over the image/link. You can use it to say where your link leads to or use it to tell a story. Your alt text does matter, but the title text often won’t help you or your readers.

What do?

How you do use the alt attribute will depend on the use of your image. In the top right of my blog I have a whole bunch of social media icons.

These images serve multiple purposes, the main goal is to link people to my social media profiles.

Images are easier to process and attract more attention but I chose these for their looks. It makes your blog look more interesting, but it’s a filler. When you can’t see them, regardless of reason, how they look isn’t relevant for the reader’s experience.

Their alt text will be a description of function, in this case it will just say alt=”facebook icon”, alt=”twitter icon”, alt=”google plus icon” etc. Same goes for buttons and badges.
If the image is a link somewhere, tell your reader where the link goes. Often it’s the same text that’s already on there, use that! Easy-peasy.

If an image doesn’t add anything to your post other than looking attractive (also think of buttons, logos or fancy list bullets), the alt attribute should be alt=””, an empty string. Same goes for things like a map with directions.

If it’s to add a feeling to your post you can describe the image, that’s up to you. I do this for my food blogs, I describe what the food looks like. This works in some cases but describing a book cover can be considered useless, as they won’t see it anyway. If you’ve written about the book cover’s awesome-/rubishness in your review you can describe it in the alt attribute, describing what is on there. Otherwise use author+title+cover(+edition).
Another example is writing out your book pile for readathons, if you didn’t write it out in your post.

Which leads me to..up your SEO!

As I’ve mentioned before, search engines like google pick up alt texts. Using your alt attributes smart can make you easier to find! Google even made a video about that.

Think of what you look for when you search for an image, this can help you pick the words. A friend of mine ones gave a great pointer when I was looking for a hard-to-find recipe ingredient: “Don’t google the product + store, instead search “finally found!+product”.

You could describe this image as “wounded soldiers in hospital”, which in this case is also the caption written on the image by the photogapher, Matthew Brady.
But if you google that you’ll get a whole bunch of images but only one or two this exact one, despite it being from a well known civil war photographer. So a description like that can prevent you from getting shocked by a pen but it won’t get you hits. Instead, try something like “Matthew Brady Wounded soldiers in hospital civil war”.

You can see I used 8 words here in the alt tag. Using 15 or more words can be considered “stuffing”, spam, by search engines and trigger them to ignore your blog. Don’t use on or two and try to stay under the 15 words. Think and rethink the purpose of your alt text and what’s your priority. Your longer descriptions can enhance visually impaired reader’s experience (and possible attract more readers that way) but can make it be ignored by google. I care more about my readers than high results.

If you want to learn more about SEO you can check out Amanda from Amanda On a Book Bender’s mini-challenge “Easy SEO Tweaks!”.

Challenges:

How you doin’?

Check how well you’re doing using the feedthebot SEO tool.

This dish needs some alt

Add alt attributes to your sidebar/menu images.

WordPress users have it better

Install the WordPress SEO plugin by Yoast, making SEO a doozy on all aspects. It does a LOT and all in your post-page, so read the description if you’re interested.

Alted bonus

Add an alt attribute to your (bloggiesta) blogposts’ images! How would you describe Pedro? Would you at all? Share here how you’d describe him or any of the pictures you used. Let’s see how creative we all are!

Leave a comment after you’ve done one or more of the challenges and I’ll come and check your blog, sans images 😉

Unfortunaly I have nothing to give away but tips and advice! Want to learn more code? Check out codecademy for a summer of code or join me for PHP. Those starting on WordPress can learn a lot from WPBeginner.

If you have any questions leave them in the comments below or ask me on twitter, I’ll reply as soon as I can! These don’t have even have to be about the alt attribute!

Good luck and DFTBA!