SEO Counter - jQuery character counter

Mar 20, 2009

For the last several years, I have used a little javascript character counter to keep my page titles and meta descriptions to a certain length. When titles are less than 70 characters and meta descriptions are less than 155 characters, Google won't truncate them in search results, and this looks nice.

Today, I decided to bundle up a version of this script so others can use it in their CMS or website. This variation of the script is based on jQuery, and is pretty straightforward to install.

Why?

If your page title is longer than 70 characters, Google will shorten it when it is displayed in search results. This means visitors don't get to see your full message. I like my titles to include the keywords I'm targeting, but also have human appeal so they are clickable. If they get shortened by Google, they have slightly less human appeal in my opinion, and you have less control over how your listing is presented.


Above: Titles longer than 70 characters and meta descriptions longer than 155 characters will usually get shortened.

SEO Counter

SEO counter is a simple script that adds a counter to your text input / textarea fields, so you know how many characters you have left to work with. For titles, the counter starts at 70 characters and counts down to zero. This makes it easy to know when your title is likely to be truncated in the search results.

Example

You can see the script in action at the SEO Counter example page.

Download

Download seocounter.zip

Installation (quick version)

Installation is fairly straightforward.
  • Include jQuery in the <head> of your document.
  • Include seocounter.js in the <head> of your document, after jQuery.
  • Add class="seocounter_title" to any title text inputs on your page.
  • Add class="seocounter_meta" to any meta description textareas on your page.
  • Make sure your form fields have a name attribute set (this also needs to be unique).
  • Call SEO Counter using the following code in your <head>...
    <script type="text/javascript">
    $(document).ready(function(){seocounter();});
    </script>


Installation (detailed version)

Include jQuery

Add the following code between the <head> and </head> tags of your page...
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

You can also use Google's copy of jQuery...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Note that if you are already running jQuery, you won't need to include it twice.

Include seocounter.js

Add the following code between the <head> and </head> tags of your page. This must be added after jQuery.
<script type="text/javascript" src="path/to/seocounter.js"></script>

Add classes to your input boxes

You won't want the counter on all of your input fields, so you need to specify which fields where you want the counter. This is done by adding a new class to the input or textarea.

If you want a text input to behave like a title, add a class of "seocounter_title".
<input type="text" name="title" class="seocounter_title" value="" size="50" />

Make sure the field also has the name attribute specified, this is required by SEO Counter.

If you want a textarea input to behave like a meta description, add a class of "seocounter_meta".
<textarea name="meta_description" class="seocounter_meta" rows="4" cols="50"></textarea>


You can add counters that countdown from any number as well. Add a class of "seocounter_XX" where "XX" is the number of characters to countdown from.
<input type="text" name="foo" class="seocounter_50" />
<textarea name="bar" class="seocounter_200" rows="4" cols="50"></textarea>

Call SEO Counter

Add the following code between the <head> and </head> tags of your page. This must be added after jQuery, and after seocounter.js
<script type="text/javascript">
$(document).ready(function(){seocounter();});
</script>

This will cause the SEO Counter script to appear after the document has loaded. If you happen to add extra input elements to the page dynamically, you can call this function again to add the counters.

Title suffixes

I pretty much always use a suffix on my sites. For example, on RagePank.com every page title ends with " | RagePank SEO" which I like from a branding perspective. However, this means that this is 15 extra characters that needs to be included in the equation. In effect, my titles can't be longer than 55 characters (70 - 15 = 55), so the counter needs to account for this.

To workaround this, when you call SEO Counter, include the title suffix as an argument to the function. eg.
<script type="text/javascript">
$(document).ready(function(){seocounter(' | RagePank SEO');});
</script>

Easy.

License

You are free to use and modify this script free of charge, subject to the terms of the Lesser GPL license. If you like this script, please consider linking to http://www.ragepank.com

Testing

I have not done extensive testing on this script, however it is quite simple and I wouldn't expect to run into many problems. Feel free to get in touch if you find any bugs, or have any comments.
Digg StumbleUpon del.icio.us technorati blinklist furl reddit sphinn

<< SEO Articles index  < OSS Bar Camp, Dublin, 2009 - Review | How to stir up your insurance company >

4 Comments

- Aug 24, 2009

good

- Aug 24, 2009

Thank you for knowledge

eddai - Aug 24, 2009

Recently, I'm having some experiment on google search results. I'm also testing some incoming searches to my posts.
For those my post titles longer than 70 chars,
when a user make a query and if one of word is not in the first 70 chars of title but in the rest, my post still appears on top.
What i understand from this is,
Google still counts in those "queried words" which are not in the first 70 chars. just google trims the first 70 chars.
is my assumption true ? is this an already known thing ?
or am I wrong ?

- Mar 12, 2010

It could be fun to simulate the display on google


Post Comment

Post Comment

*
*


Visual CAPTCHA

*
Code is not case-sensitive
*

We welcome comments on this article, provided they have something to contribute. Please note that all links will be created using the nofollow attribute. This is a spam free zone. HTML is stripped from comments, but BBCode is allowed.