Adding ALT and TITLE Attributes to Blogger

Better Blogging Tips for Blogspot Powered Blogs
Posts In Series: [ 1 ][ 2 ] [ 3 ]

In this the third Better Blogger Powered Blogging series, we are going to expand upon the optimizing for search engines we began in the previous post, "Basic Search Engine Optimization Tips for Blogger," with the usage and implementation of ALT and TITLE attributes in our blog.

What are ALT and TITLE attributes? They are HTML codes indended for alternative or descriptive text to display when a cursor is placed on them.
ALT attributes pertain to and are used with images, while the TITLE attribute pertains to links.

These attributes are important as they are informative to visitors, and also provide information that may be crawled by search engines. It's good practice to include these attributes whenever using images and links within a blog post. Beware hwoever, of stuffing ALT and TITLE text with keywords as this is looked poorly upon by search engines. Keep descriptive text pertinent and simple.

The HTML for a typical link might appear something like this:
<a href="http://www.bellatype.com">BellaTYPE</a>

With the TITLE attribute included, that same link could appear like this:

<a href="http://www.bellatype.com" title="BellaTYPE">BellaTYPE</a>

To add TITLE attributes to any link in a blog post, select the Edit HTML mode, and add the code below to your link HTML:
title="DESCRIPTIVE TEXT HERE"

Adding the ALT attributes is similarly simple. Below is an example of the HTML for an
image.
<img src="http://www.bellatype.com/image.jpg"/>

The same example image HTML with ALT attribute:

<img alt="BellaTYPE" src="http://www.bellatype.com/image.jpg"/>

Adding the height and width attributes to images is also good practice, but we'll get to that in another post. Back to the ALT attribute. To add an ALT attribute to any image, simply add the code below to your image HTML:
alt="DESCRIPTIVE TEXT HERE"

Now that we've tackled the use of ALT and TITLE attributes within blog posts, it's time to give our template the royal ALT and TITLE treatment. Head on over to the HTML editor from the dashboard and check the box that says "Expand Widget Templates."

Don't forget to "Backup Your Template" prior to making changes to the code!

To ease your editing, copy and paste your entire template code into a text editor such as notepad.

Find for this in your template code (most likely will appear twice):

a expr:href='data:blog.homepageUrl'

And replace with:

a expr:href='data:blog.homepageUrl' expr:title='data:title'

Find for this in your template:

a expr:href='data:post.link'

And replace with:

a expr:href='data:post.link' expr:title='data:post.title'

Then find for this in your template:

a expr:href='data:post.url'

And replace with:

a expr:href='data:post.url' expr:title='data:post.title'

Then copy the entire contents of your text editor, and paste it in place of your template code in the Dashboard editor. Preview your blog, and if all appears fine, click publish and browse your updated blog.

Congratulations, your blog title link as well as your post title's have now been outfitted with TITLE attributes. Place your mouse cursor over a post title to see the TITLE attribute in action.

Better Blogging Tips for Blogspot Powered Blogs
Posts In Series: [ 1 ][ 2 ] [ 3 ]

share ♥

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
•