Webmaster tips & trix   contact | privacylink partnersfree website content
Home » Articles » Search engine optimization

» Affiliate programs
» SE optimization
» Miscellaneous
» Newsletters & E-zines
» Promotion
» Web design
» Usability
» Domain names
» Create income
» Web writing
» Hosting
» Guerrilla marketing
» Accessibility
» Web credibility
» Data recovery

» Archive


Special articles

» Google tools/services
» Yahoo! tools/services

Optimizing pages with JavaScript and style sheets for search engines

Dale Goetsch
Search Innovation
June 28, 2002


Search Engines use a number of criteria to decide what a given web page is all about. These criteria, which can be different from Search Engine to Search Engine, and which may even change over time, all aim at deciding how "relevant" a page is to a given user's search. The Search Engine wants to return the results most relevant to a user's search.

While the particulars may change over time, there are some criteria which remain constant. One of these is where the keywords are located on the page. Typically words that are located closer to the beginning of a page are considered more important than words that occur further down the page. This stands to reason: think of a newspaper article, where the headline and the first paragraph usually have more "meat" than the rest of the story.

Another measure of relevance is "keyword density". This is roughly the ratio of keywords on a page to the total number of words on a page. Having a higher ratio of keywords to total words will make a page more relevant for a search on those keywords.

When a Search Engine sends its robot out to look at your page, you want to make sure that it finds important information near the top of the web page, and that the page has a high keyword density. Sometimes there are complications, even when you have a lot of keyword-rich text early in the visible portion of your page. Two of these complications, extensive JavaScript code and extensive Cascading Style Sheet code, can be easily remedied.

JavaScript problem

Large amounts of JavaScript code can get in the way. Typically the largest amount of JavaScript code in a web page is found in the HEAD section. This is usually where variables and functions are defined, and so forth. Unfortunately, having a large amount of JavaScript code in a page can be detrimental to a page's ranking in the Search Engines.

Since Search Engines tend to pay more attention to text at the beginning of a web page than they do to text further from the beginning, it stands to reason that if you have several dozen lines of JavaScript code at the top of the page, your real content is going to be further from the beginning of the page. Further down the page means less important to the Search Engine.

Keyword density is also important. Here again, if you have several hundred words of JavaScript code in a page, the keyword density—the ratio of your keywords to all the words in the whole page, both text and code—is going to be much lower. That means that some Search Engines will decide that your page is less relevant.

JavaScript solution

So how do you maintain JavaScript functionality, but make your page as Search Engine-friendly as possible? You put the JavaScript code into a separate file, and link it back to the web page.

The original page, "mypage.html", may look something like this.

<title>My Title</title>
function helloWorld(){
alert("Hello, World!");
<body onLoad="helloWorld()">

...body of page...


Example 1—mypage.html with JavaScript code

We replace the JavaScript code with an instruction for the browser to go and grab the code from a separate file. The new page will look like this.

<title>My Title</title>
<script src="codepage.js"></script>
<body onLoad="helloWorld()">

...body of page...


Example 2—mypage.html with JavaScript code offloaded

Note the addition of the "src" attribute to the SCRIPT tag. The value assigned to that attribute is the name of the external file that contains the JavaScript code. Typically, these external files will be given the filename extension ".js" to indicate that they contain JavaScript code. Note also that there are both <script> and </script> tags here, even though there is nothing between those tags.

A new page is then created that holds the code that was formerly held in the SCRIPT tags. We will call it "codepage.js", and it looks like this.

function helloWorld(){
alert("Hello, World!");

Example 3—codepage.js includes only JavaScript code

This new file doesn't need any kind of HTML markup. It contains only the code that was originally held between the SCRIPT tags.

Style Sheet problem

In addition to JavaScript code, Style Sheet code can cause complications for Search Engines when it is put into a web page. For the same reasons as JavaScript—moving the important content further down the page, and diluting the keyword density—it is important to move Style Sheet code off of the page as well.

Style Sheet solution

The thought behind removing Style Sheet information from a page is very similar to that of offloading JavaScript; the syntax to do so is different.

The original page, "mypage.html", may look something like this.



...body of page...


Example 4—mypage.html with style sheet code

We want to move this code into a separate file, so we remove it from the original page, and add a link to point to the separate file that now holds the Style Sheet code.

<link rel='stylesheet' href='style.css' type='text/css'>


...body of page...


Example 5—mypage.html with Style Sheet code offloaded

Note the addition of the LINK tag. This contains three types of information that the browser will need to reconstruct the page when a visitor looks at it. The "rel='stylesheet'" attribute/value pair indicates that we are looking at a Style Sheet file here. The "href='style.css'" attribute/value pair points to the external file that contains the Style Sheet information. Typically these external files will be given the filename extension ".css" to indicate that they contain Cascading Style Sheet code. You will replace the filename "style.css" with the name of the actual file into which you place your stylesheet code. Finally, we have to specify the MIME type of the file, in the "type='text/css'" attribute/value pair.

A new page is then created that holds the code that was formerly held in the STYLE tags. We will call it "style.css", and it looks like this.


Example 6—style.css includes only Style Sheet code

This new file doesn't need any kind of HTML markup. It contains only the code that was originally held between the STYLE tags.


By following these two procedures, you have now made your web page more friendly to the Search Engines. This means that the next time your page is spidered by the Search Engine robots, the important content on your page will be closer to the top of the page, and you will have a better keyword density. This will result in your page appearing higher in the Search Engine listings, and will probably bring more traffic to your website.

About the author
Dale Goetsch is the Technical Consultant for Search Innovation Marketing (http://www.searchinnovation.com), a Search Engine Promotion company serving small businesses and non-profits. He has over twelve years experience in software development. Along with programming in Perl, JavaScript, ASP and VB, he is a technical writer and editor, with an emphasis on making technical subjects accessible to non-technical readers.

Copyright © 2002-2004 Search Innovation Marketing. http://www.searchinnovation.com All Rights Reserved.

Latest articles

» Change your mind about an eBay bid?
We have all made choices in life that two seconds later we know we should take back. Especially when there is money involved this can become a problem.

» A simple way to create 7 effective autoresponder messages
Email is the Net's most powerful marketing tool. And autoresponders are the best idea yet for marketing with email.

» 7 ways to drive laser-targeted traffic to your website
Getting people who matter to see one’s website is a difficult undertaking if he tries to consider the fact that there are rivals everywhere waiting to pin him down.

» Website valuation: Why standard website pricing methods will emerge
The market of buying and selling developed websites is becoming more and more liquid each day.

» One way links are better than reciprocal links
You probably know by now that where your website ranks in the search engine rankings dramatically affects how many visitors you have to your site. Did you also know that you can change where your site is ranked by being proactive and getting as many one way links to your site as possible?

» How to make visitors stay at your website
The very first thing which you should provide the visitors with is some free interesting reading material.

» How to make your visitors click your ads
Here is a simple solution; Convert your banner advertisement to look like a text advertisement!

» Offline advertising should be a part of your online strategy
Day by day, online business has become more & more complicated and competitive.

» How to sell traffic
Selling the traffic arriving at your site is a good method to increase profits from your portal.

» Make money from online auctions
Online auctions have the best benefit of a vast platform. Your product is viewed by loads of people & hence there is more possibility of finding a suitable bidder.

» Groupware explained in easy terms
Groupware is a term used frequently to describe collaborative software. Groupware is application software that integrates work on a single project by several concurrent users at separated random workstations.

» Timely back up can save you from disasters
Few things which people often back up are e-mail addresses, bank records, photographs, personal records, software’s, music etc.

» Why should one go for autoresponders
Autoresponders are programs which get automatically executed in particular situations.

» Become your own boss - Start your own online business today
A survey conducted by SBA states that two third of new business survives at least two year and about forty four percent survives at least four year.

» Express your thoughts - Creating your own blog!
What exactly is a blog? Technically speaking it is a journal or a newsletter which is regularly updated and can be used by any one.

» Pop-up ads - To be or not to be?
According to a study conducted by the Bunnyfoot University, “The Efficacy of Pop-ups and the Resulting Effect on Brands” Internet users feel harangues and harassed by pop-up ads.

» Why content is king on the Internet
The advantages that Internet holds over the rest of the other communication mediums should not wasted because of the inability to find a comprehensive plan that will bind all these faculties together.

» 10 niche marketing tips
In our increasingly driven consumer economies, the average customer is bombarded by choices. With increased saturation of the market, companies look towards niche marketing to search new, ever-evolving and sophisticated consumers.

» Using free traffic exchange
These days internet has emerged as both, a market and hub for marketing. Unlike the ‘brick and mortar’ world where large manufacturers manage to squeeze out the market bases of smaller companies, the internet provides haven like the free traffic exchange.

» Ten ways to drive traffic to your website
Developing a web site and then letting it grow is like planting a tree and then nurturing it.

» Marketing through keyword articles
One of the most effective tools of Internet marketing is the use of keyword articles.

» Want to make money online? Market a service to businesses
Don walked across the street from his house to mine to announce he had finally retired. "But I'm not ready for the golf course," he said. "I want to make a living on the Internet. What can I sell?"

» Web site design mistakes - Database parameters in URLs
Creating a web site takes thought, planning and execution. Unfortunately, many designs are dead in the water before they are even published as far as search engine optimization is concerned. Whatever you do, avoid these critical mistakes.

» Alexa Toolbar - The ultimate internet tool
There are numerous tools available on the Internet to assist online businesses. A valuable tool that you should use is the Alexa Toolbar. Even better, this tool is free.

» Web site design mistakes
Some wise human once said "Learn from the mistakes of others. There isn't nearly enough time to make them all yourself." Hence this article. Here are five of the most annoying and common web design mistakes.

» Abandonment - Why visitors don't turn into customers
Every good Internet business understands the value of conversions versus hits received. Far too often, businesses become fixated on the hits they are receiving instead of monitoring their hit to sale conversion rate.

» Creative search engine optimization - A case study
Search engine optimization this and search engine optimization that. You read and hear about it all day, but what about your site?

Tools & services to enhance your online business

» Site Build It!
Over 100,000 small businesses of all kinds outperform larger, well-financed competitors. Read about this all-in-one site-building-hosting-marketing system of tools that delivers results.

» Secrets To Their Success
Take a private tour of two "Mom & Pop" web sites every month that earn $100,000+ a year... and discover the exact step-by-step strategies they have personally used to generate these massive profits.