Trade School session #4- search engine friendly photographs

Welcome back lovers of learning! It’s time for another Trade School lesson and we have a GREAT one today.
When you start talking html do your eyes begin to cross?

 Well, it’s a good thing our teacher is fluent in this foreign (to me) language. Zoe from Creative in Chicago is fellow Chicago blogger (obviously…) and has a lovely blog. Please go see her after you stop being amazed by her lesson today.

Hello Adventure of our Fami-Ly readers, this is Zoe (aka Creative in Chicago)  By day I am a web and graphic designer but by night, if I have any creativity left (which is quite often not the case!), I mess around  transforming my 1970′s brown house into a light and airy home and sharing my journey at Creative in Chicago

Today I am wearing my professional “web designers” hat and I am going to share with you a few tips on how to make your blog photographs more friendly to both the search engines and your site visitors.

Before you upload


Optimize

  • Scale
    Don’t rely on your blog to re-size your  photos, save your image at the actual dimensions you wish to use them.They will download much faster if they are scaled this way
  • File size vs quality
    Ideally your photographs need to be small in file size but in great quality, large files can take a long time to download frustrating your readers and driving them away.
  • How?
    Most image editing software will allow you to easily optimize you images to be web ready, however if you don’t have access to anything suitable try this handy little tool,
    http://www.imageoptimizer.net/Pages/Home.aspx
    Pic Monkey is also great.
    If you are after something more robust download GIMP for free.

Rename

Don’t use the file name your camera has given your photo. Re-name it so it encompasses the follow :

  1. The content of the photo
  2. The content of your blog post
  3. A phrase that someone may search

For example the image below is named rope_pencil_pots.jpg, which reflects the composition of the photo, the content of the blog post and could feasibly be a phase that someone would use as a search query. I separate each word with an under score _, but is perfectly OK to separate with a hyphen instead (rope-pencil-pots.jpg)

 rope Pencil Pots

Why?
When search engines trawl you site they are unable to “see” a beautiful photo of a rope pencil pot, all they understand is the code powering the site which in this case looks like …don’t be scared…this.

By giving the photo a meaningful file name it essentially helps the search engines ” see” the photo.

You have uploaded your photo now what?

Add an ALT tag to your photo

What is an Alt Tag?
Alt stands for “Alternative text”  and adding an alt tag to an image further enhances the ability of the search engine to understand the content of the photo.
In the case of my rope pots my alt tag would be

alt=”rope pencil pots”

As you can see the phase I am using is the same as the name I gave the image file.

How To Add an ALT Tag
The ease in which an alt tag can be added to a photo depends on which blogging platform you are using, WordPress is much easier than Blogger.

And because this is difficult to explain in words I have made a video which covers adding an Alt tag to your images in both Blogger and WordPress (and just in case you are wondering the accent is English!)

Is it worth the effort?
And here is a little test to show you this effort does pay off. Click the link below, it is the Google image search for Rope Pencil Pots …now look at what they have listed as the first image!

Google Search for Rope Pencil Pots 

Thanks Sarah for letting me be today’s substitute teacher!

Is it just me, or do you feel like you should have paid for the information you just learned? Wow, I know I do. I had no idea about the ALT tagging thing…no idea! I think that I might try and go back and add the tag to one post and see what happens.

What about you? Will you receive your gold star this week for doing the homework? Just take a screen shot of where you added the added the ALT tag in your html or explain how you optimized a photo.

Happy blogging!

Comments

  1. Zoe,
    Thanks so much for the lesson!
    I just began to rename my pics about 6 months ago.

    (Actually, if you search Google images for CHICKEN PESTO CAVATAPPI – the 1st and 4th images are my Corner Bakery Taste-alike recipe. One has a boring imgXXX name and one has a much better description.)

    The same search in Google Search you find the recipe as hit #3. So, I’m doing okay…but it could be better.

    Other than in blog button coding, I haven’t been using alt tags. Thank you so much for the video – makes it so easy.

    Looks like I’ll be “alt-ing” this week!
    ~ Dana
    Cooking at Cafe D

  2. Such great advice. I have nominated you for the Versatile Blogger Award so if you could just hop on over to my blog to check out the rules that would be great. Thanks and congrats!

  3. Great tutorial Zoe. Trying this with rock_and_roll_dresser. Where is the how to take a screen shot tutorial?

    ~Bliss~

  4. Just in case the video is not loading…here is the link to it on You Tube http://www.youtube.com/watch?v=py3dww3cc_w&context=C4e69f12ADvjVQa1PpcFNOfuEh2VjCbqV-urBUAFZaCRDENyoWSdc=

  5. This is very useful information and I want to do it. I would give a million bucks for a “non-video” tutorial….it’s pretty small and hard to see on that video. I also would love to know how to a take a screen shot. I have a Print Screen button on my laptop…but am not hooked up to a printer and it doesn’t do anything when I push it. I’m struggling with my homework today.

  6. Can’t manage the homework, I have a sick kid on the couch next to me, but I never even knew about the alt-tag! Brilliant. Going to start doing it form now on (and naming photos!)

    Jessica
    stayathomeista.com

  7. This is so amazing! So many great ideas. And I thought I was doing a good job with labeling my pics …

    :)

    Linda

  8. Thanks so much for this post. I had no idea and am already putting it to use. The new blogger interface also has a “properties” menu when photos are inserted into a draft, and you can put your alt tags there rather than having to edit HTML. Easy peasy. But I would’ve never known to look for that if not for this post!

Speak Your Mind

*