Search Engine Optimization tips for Blogger Templates (Part 3)

One of the great things about Blogger is that we have access to the complete template. With a few simple tweaks Blogger users can easily optimize their blog template to achieve better rankings in search engines, which in the long run can attract far more visitors to our blogs.

This is the third and final installment of the SEO Tips for Blogger Templates series. In Part 1, I explained how the header section, meta tags and titles could be adapted for search engine spiders, while Part 2 dealt with optimizing all of the links contained within the template.

In this article, I will offer some tips to help you optimize all of the images in your Blogger blog, including those contained within widgets and inside your blog posts.

How Search Engines See Images in Your Site

Search engine spiders can only see the textual elements of your site; images are virtually invisible to them, unless you use ALT and TITLE tags to add unseen detail which can be read (and understood) by search engines.

ALT tags are of particular importance in optimizing images in your blog, as these specify “alternative text”: a description of the image which would appear if images are disabled in the readers browser and provide accessibility information for disabled readers. Many search engines view alternative text for images as an important aspect of the mark-up in web pages, and the strength of your site may be penalized if many images do not have ALT tags in place!

Alternative text appears within the image tags, like this:

<img src=”images/example.jpg” alt=”An Example of an Image” />

TITLE tags give the image a title, providing information of what the image is about which will be displayed if you hover your cursor over the image.

Title tags also appear within image tags, and are constructed as follows:

<img src=”images/example.jpg” alt=”An Example of an Image” title=”Title of Image” />

Both of these tags are considered essential elements in the <img> tags of websites, so it is important that you optimize your Blogger powered blog to reflect this.

Optimizing Images in your Blogger Template

The most important (and often overlooked) image in your blog template is the header image or logo.

If you use a header image in place of the title and description for your Blogger blog, the default template tags provide the title of your blog as the “alternative text” like this:

<img expr:alt='data:title' expr:height='data:height'
expr:id='data:widget.instanceId + "_headerimg"'
expr:src='data:sourceUrl' expr:width='data:width'
style='display: block'/>

You can find this section of code by checking the “expand widget templates” box as this is contained within the widget which displays your blog header.

Unfortunately, Blogger does not automatically provide a title for the header image. Luckily, it is very easy to add a title to the image tags, simply by adding the required code:

<img expr:alt='data:title' expr:height='data:height'
expr:id='data:widget.instanceId + "_headerimg"'
expr:src='data:sourceUrl' expr:width='data:width'
style='display: block' title='The Title of your Image'/>

If you have manually added any other images to your Blogger template, you should also add title and alternative text for these images. You can find image tags in your template easily by using your browser’s search function and searching for img.

Adding ALT and TITLE Tags to Images Contained in Widgets

Many Bloggers choose to add images to their sidebar using a “Picture” widget. Again Blogger adds “alternative text” to your image which is generated by the title of the widget itself.

It is possible to add a title to the image, and also change the alternative text (if you prefer).

The following section of code is an example of how a picture widget would appear in your Blogger template:

<b:widget id='Image1' locked='false' title='My Picture' type='Image'>
<b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <img expr:alt='data:title'
	  expr:height='data:height'
	  expr:id='data:widget.instanceId + "_img"'
	  expr:src='data:sourceUrl'
	  expr:width='data:width' title='Your Image Title'/>
      <br/>
      <b:if cond='data:caption != ""'>
        <span class='caption'><data:caption/></span>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>

I have added a title to the image, which is highlighted in red.

Changing the alternative text for the image is a little different. You will need to change the following section in the widget code:

img expr:alt=’data:title’

to say something like this instead:

img alt=’Alternative Text of your Image’

This replaces the default alternative text with that which you have specified instead.

If you add an image in an HTML/JavaScript widget, or as part of a Text widget you can add ALT and TITLE text manually inside the image tags without having to edit your template code. Simply open up the editor for your widget (either in the Layout>Page Elements section of your dashboard, or by clicking the wrench icon displayed in a blog page) and add the relevant code to the HTML mark up of your widget.

Optimizing Images in Blog Posts

Like most Bloggers, I upload images to my posts using the image upload button. This adds the correct code to my blog post without having to code the whole thing by hand!

But (as usual!) Blogger does not optimize the image tags!

When you use the image upload feature, ALT text is added to the image tags, but nothing is contained inside it so it may as well be blank!

You can see this at work in the following example where the missing alternative text is highlighted in red:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
href="http://bp3.blogger.com/[...]/A_Picture.jpg">
<img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;"
src="http://bp3.blogger.com/[...]/A_Picture.jpg"
border="0" alt="" id="BLOGGER_PHOTO_ID_5175851698930009362" /></a>

While it wont do any harm to have no value to the alternative text (that is, to define alt=”"), it won’t do your blog any favors either! The best way to remedy this is to add your own alternative text between the two speech marks, which will be displayed for visitors who block images or use text-based browsers to read your site.

As in all of these examples, you can add title text to the image tags in your blog posts too, simply by adding the appropriate code.

After optimizing the example above, the code would appear like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
href="http://bp3.blogger.com/[...]/A_Picture.jpg">
<img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;"
src="http://bp3.blogger.com/[...]/A_Picture.jpg"
border="0" alt="A Picture" id="BLOGGER_PHOTO_ID_5175851698930009362" title="The Image Title"/></a>

Useful Resources

Here are some useful sites which can help you understand the techniques outlined in this post, and also for SEO in general:

• Formatting Images for SEO
• SEO for Images by ImpNerd
• Xinu Returns (A great resource for discovering how well your site is optimized)