SEO Counter - jQuery character counter

SEO Counter - jQuery character counter 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.


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.


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



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">

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=""></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">

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 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');});



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


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 technorati blinklist furl reddit sphinn