Sunday 22 November 2009

Disabling Bold Highlighting

Using bold highlighting for Search Engine Optimisation

As you may have noticed I tend to use bold highlighting on keywords specific to my articles on this blog. The primary reason for this is to aid SEO as Google and other search engine bots will consider words wrapped in bold, strong, em and header tags to be more important than other content. If you are marking certain text out for the user it means you consider these words to be important and so the SEO bots will as well.

Wrapping all your text in bold or header tags will not work and will in fact get you marked out as a spammer so you should use this technique sparingly. I have used it for a year now and I think its worked very well as a lot of my articles are ranked very highly for certain keywords.

 Obviously other key factors are also important such as the length of the article, the percentage of wording marked as highlighted in relation to overall content and the words marked. I would consider under 10% to be optimum for this technique as any more is getting into the realms of spam.

The other reason I do it is for users who have bad eye sight or for people who speed read articles to mark out the key sentences. Obviously not everyone likes this technique and I have had a few moaning minnies and you cannot please everyone all of the time. 

However as my first aim is to optimise for SEO so that more people get to read the articles in the first place I am going to keep using this technique. However I have added two links in my sidebar menu on the right which you can use to disable this highlighting if you so wish.

The "Turn off bold highlighting" option will just disable any bold highlighting on the current blog page. Once you do this the link should change to "Turn on bold highlighting" to reverse the change.

To turn it off on all articles so you don't have to click the link on each visit you can use the "Turn off for all pages" option which will turn it off on the current page and also set a cookie so that whenever the blog loads it remembers if you want this option. Again once clicked it will toggle the link to "Turn on for all pages".

The quickest technique I found for turning the highlighting on and off was to use selectors to select all my content and then apply or remove a class to those elements. 

For some reason Blogger has a mix of highlighting with the old B tags as well as <span style="font-weight:bold;"> rather than the preferred method of using STRONG tags. I know a lot of WYSIWYG editors will automatically convert SPAN formatting into STRONG tags but for some reason some of my articles have this mixture. So if you look at my code that disables it I have applied all 3 methods to cover all HTML tags.

function unbold(){
 
 // select all B tags within the main post-body div and apply a class
 G('DIV.post-body B').setAtts('className','unbold');
 
 // same method on SPAN tags
 G('DIV.post-body SPAN').setAtts('className','unbold');
 
 // same method on STRONG tags
 G('DIV.post-body STRONG').setAtts('className','unbold'); 
 
}

As you can see I am using my super G method, to select the nodes I want and then use my setAtts method to apply a class to all the nodes. Obviously if you are using a framework like JQuery or Prototype you would be using the $ to select your objects and some method like attr or curCSS to do a similar chained method.

Let me know of any problems.

No comments: