Search Engine Tricks

  Homes arrow Search Engine Tricks arrow Optimizing pages with JavaScript and style sh...
 Webmaster Tools
 
Base64 Encoding 
Browser Settings 
CSS Coder 
CSS Navigation Menu 
Datetime Converter 
DHTML Tooltip 
Dig Utility 
DNS Utility 
Dropdown Menu 
Fetch Content 
Fetch Header 
Floating Layer 
htaccess Generator 
HTML to PHP 
HTML Encoder 
HTML Entities 
IP Convert 
Meta Tags 
Password Encryption
 
Password Strength
 
Pattern Extractor 
Ping Utility 
Pop-Up Window 
Regex Extractor 
Regex Match 
Scrollbar Color 
Source Viewer 
Syntax Highlighting 
URL Encoding 
Web Safe Colors 
Forums Sitemap 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
SEARCH ENGINE TRICKS

Optimizing pages with JavaScript and style sheets for search engines
By: Developer Shed
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 2
    2004-10-01

    Table of Contents:

    Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     

    SEARCH DEV MECHANIC

    TOOLS YOU CAN USE

    advertisement

    Optimizing pages with JavaScript and style sheets for search engines
    by Dale Goetsch

    Background

    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.

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

    ...body of page...

    </body>
    </html>

    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.

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

    ...body of page...

    </body>
    </html>

    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!");
    return;
    }

    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.

    <HTML>
    <HEAD>
    <TITLE>My Title</TITLE>
    <style>
    body{
    background:white;
    color:red;
    }
    </style>
    </HEAD>

    <BODY>

    ...body of page...

    </BODY>
    </HTML>

    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.

    <HTML>
    <HEAD>
    <TITLE>My Title</TITLE>
    <link rel='stylesheet' href='style.css' type='text/css'>
    </HEAD>

    <BODY>

    ...body of page...

    </BODY>
    </HTML>

    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.

    body{
    background:white;
    color:red;
    }

    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.

    Conclusion

    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.


    DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

    More Search Engine Tricks Articles
    More By Developer Shed

       

    SEARCH ENGINE TRICKS ARTICLES

    - Time for Your Site`s SEO Tune-up?
    - The Basic Parts of an SEO Campaign
    - Dynamic Content Still Challenging for Search...
    - Google`s Panda Update at One Year Old
    - Why Links Don`t Count Instantly
    - Check Your Code for SEO Issues
    - To Be an SEO, Start With What You Know
    - Don`t Worry About Bad Inbound Links
    - Guard Your Google Places Listing
    - Overlooked SEO Tricks
    - A Simple Long Tail Keyword Strategy
    - Writing for the Long Tail
    - Choosing and Using Keywords
    - Seven More SEO Myths That Can Hurt Your Sit...
    - Google Tips and Tricks

    Developer Shed Affiliates

     



    © 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap