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 ]

Continue Reading »

Basic Search Engine Optimization Tips for Blogger

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

In this installment of "Better Blogging Tips for Blogger Powered Blogs," we're going to implement two simple and elemental search engine optimization measures; replacing the simple title tag with dynamic title coding, and add meta tags.

First on our agenda, is the title tag. While many pre-made templates are equipped with an improved title tag; this is not always true. In that case, we'll have to modify it ourselves.

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

To do this, we need to click "Edit HTML" within the Dashboard's "Design" tab to access the template code. Once there, find the code in question

<title><data:blog.pageTitle/></title>

and replace it with the "dynamic" title code shown below:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

If we really want to blog better and be a better blogger, we should gain some understanding as to the purpose of this code and it's function before we proceed.

The former code consisted solely of the title tag, whereas the the new "dynamic" code supplies instructions, or conditional statements in addition to the title tag. The conditional statements define the title tag's behavior in the browser, depending on the page type on which it is referenced.

And just what does that mean?

If the referenced page is an index page, the browser will only display the blog title.

If not, or if the referenced page is something else, the browser will display the title of the referenced post or page, followed by the title of the blog.

It's not so complicated after all, is it?

Now that we've gained some understanding of the dynamic title code, we are ready "Preview" and "Publish," our blog. (Provided our blog appears normal/unchanged in the preview)

Browse your blog, paying attention to the title bar in your browser to see the dynamic title code in action.

The accessibility of our content by search engines is greatly improved now that our title code is "dynamic." Hooray!

But it's not time to celebrate just yet, we still have one more thing to complete on our agenda: adding meta tags to our blog.

Meta tags provide search engines various information and details specific to a blog or website. The meta tags we are going to add to our blog are description, keywords, and author.

Screen capture of BellaTYPE's description as it appears on Google Search, one example of how meta tags can be utilized by search engines

Return to the Dashboard HTML Editor, and look for the dynamic title code we added previously. To find that code again, first look for
</title>
and then
</b:if>

Just after this instance of </b:if>, we are going to paste the meta tag code provided below.*

<meta content='Your description goes here' name='description'/>
<meta content='Your keywords here' name='keywords'/>
<meta content='Your name here' name='author'/>

*The pink text in the above code must be replaced with values specific to your blog.

Your description goes here: Enter the description of your blog here. It is advised that the description be kept relatively short, and sentence form. Avoid using too many keywords in your description as well.
Your keywords here: Replace this text with keywords relative to your blog separated with commas. Limit your keywords to only those that reflect your content, and try not to use more than a handful.
Your name here: Replace with your name, or the name you wish to go by.

Just as we had in done when changing the title tag earlier, after customizing and pasting our meta tag code, "Preview," and "Publish," your blog.

Ta-da! You have now provided your Blogger powered blog with some elementary measures for search engine optimization. You are about to be discovered!

Stay tuned for the next installment in the "Better Blogging Tips for Blogger Powered Blogs" series, where we'll take optimizing your blog's content up one more notch...

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

Continue Reading »

Better Blogging Tips for Blogger Powered Blogs

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

It's no secret that Blogger is often likened to WordPress's kid sibling, always depicted as the lesser of the two when it comes to blogging platforms. However, many bloggers utilize Blogger for the entirety of their Blogging needs, or in addition to blogging on other platforms such as WordPress.

While the "Blogger vs. WordPress," debate is one that wages on, it appears neither poses a threat to the other, nor do any "new challengers" pose a threat to their position.

Wherever one might fall on the battlefield of blogging platforms, it's a hard to refute fact the fundamental "pros" of Blogger remain unmatched. I'll provide the base to this claim by listing just a few of those "pros":

• It's free
• You can create multiple blogs
• You can use a custom domain on Blogger
• Better Google Indexing/potentially better search engine ranking
• It's easy. With ready made templates and the Template Designer, creating a blog has hardly been any easier
• You can earn money with your free blog

Now that we've established Blogger as our choice for the best blogging platform, (or chose it as the platform for your new blog at least), stay tuned for the next installment in this series, Better Blogging Tips for Blogger Powered Blogs, covering essential tips for a better Blogger powered blog.

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

Continue Reading »