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
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.
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,
Pic Monkey is also great.
If you are after something more robust download GIMP for free.
Don't use the file name your camera has given your photo. Re-name it so it encompasses the follow :
- The content of the photo
- The content of your blog post
- 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)
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.
<img border="0" height="320" src="http://3.bp.blogspot.com/-_lBtkHUaGZQ/TxhQ30_6TJI/AAAAAAAAA78/YYvdehrboig/s320/rope_pencil_pots.jpg" width="320" />
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.