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:
screenshot of Flickr code for alt code

The code from photobucket looks quite similar:
screenshot of Photobucket code for alt text

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.
alt text for social media icons for accesability
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.

code showing alt text for bout of books readathon bookpile SEO

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


Matthew Brady Wounded soldiers in hospital civil war
Wounded soldiers in hospital - Photograph from The U.S. National Archives

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!

10 Responses

    • That is great! And google analytics is quite awesome, also fun to see what search words some people used to reach my blog. For my food blog there were two: Drie in de pan (Dutch pancakes: three in the pan) and miso soup. I only had one miso soup post! So I elaborated with varieties and started adding more traditional Dutch recipes (which was actually why I started the blog in the first place, good reminder πŸ˜‰ )

      I was very happy to stumble upon that tool, it’s really useful πŸ˜€

      Btw, I noticed you don’t have a Gravatar? It’s real easy to set one up (and lots of sites use it). There even was a mini-challenge on it! -digs- There! What the heck are favicons and gravatars and why you should have them. And you only need the e-mail address you use for commenting, nothing more πŸ™‚

      Thanks for dropping by and good luck and much fun this weekend!

  1. Thanks so much for hosting this mini-Challenge and the really clear explanation of alt attributes. I knew they were good for SEO, but I didn’t know why until I read your post. My sidebar images on my WP.com professional blog now all have alt attributes. On my personal blog, I gave Pedro (our Bloggiesta mascot image) alt attributes and a title.

    Thanks again!

    • Aww, thank you for letting me know! Always nice to have positive feedback πŸ™‚
      I just looked at your blogger and looks good! (I giggled a bit at your Pedra-alt πŸ˜› )
      Smart use of the title attribute! You could still add one to your (beautiful) header image! (Petite Bourgogne)
      I’ll be checking out the rest of your blog later, looks interesting!

  2. Samantha
    While I am not formally doing the Bloggiesta I have been following and learning about SEO, as part of this I put my blog into the SEO tool above and found my blog had too many outgoing links for the page – 257! I thought I wasn’t linking out that much, maybe once or twice in a post, sometimes more. Do you know anything about how linking out affects a blog? In the tool it said Google could see this as spamming! Now I am worried! Any idea where I can look for guidance?
    Thanks
    Kathryn

    • Hi! I just checked out your blog. I saw you had a total of 64 posts, so that averages to 4 links per post, though there’s also quite a few in the sidebar so that lowers it a bit. I wouldn’t worry too much, just make sure you’re not using too much unnecessary outgoing links. (Just look how many there are in my bloggiesta starting line post! πŸ˜† )
      To learn more on Google and outgoing links you can watch this video on 100 links per page or fewer by Matt Cutts, Google’s SEO-issues guy.

  3. Samantha
    Forget about the links if you like. I use blogger and we get two options title text and alt text. So if I wrote as title text the name of the book, in this case, Somewhere Between Luck and Trust and then in the alt text something like: two women sitting by log cabin outlooking on mountainside. Is that what is required? I am thinking of visually impaired.

    • The title text doesn’t get picked up by the software or in SEO, but I assume the title is in the post/post title? πŸ™‚ You could add the word “cover” or “book cover” so there’s context. Does that help? And I was going to double check with befriended nerds about the links, that still relevant? πŸ™‚

Leave a Reply

Your email address will not be published. Required fields are marked *

Post comment