|
Optimizing_Your_Web_Site_for_the_Search_Engines_Using_CSS_and_Javascript
| Optimizing Your Web Site for the Search Engines Using CSS and Javascript
Two of the greatest techniques to come along for web site
refinement are cascading style sheets (CSS) and javascript
navigational menus. In this article, I want to show you how to
use both of these to ease the strain of site maintenance while
defending against at least two problems with using javascript
menus.
CSS can make web site maintenance much easier by consolidating a
site's style and appearance attributes into one central file
which can be edited alone and yet affect the look of the entire
site. Just as wonderful, one javascript file can accomplish a
similar effect with your site's navigational menu by making it
available to every page on your site through a single line of
code per page linking that page to the javascript file. By
removing all this CSS style and javascript code into two
separate files, you will clean up your web pages' textual
content, thus making it easier for search engine spiders to
crawl and index your site and more effectively rank it according
to your actual textual content. These are definitely two
techniques worth implementing.
Here are the examples to show you how this is done. First,
here's how your web page incorporating both the CSS and the
navigational menu javascript file should look:
<HTML>
<HEAD>
<TITLE>Your Page
Name</TITLE>
<LINK TYPE="text/css" MEDIA="Screen"
REL="stylesheet"
HREF="http://www.yourdomain.com/your_css_file.css">
</HEAD>
<BODY>
<DIV ID="center">
<H1>Your Page Name</H1>
Your page's
textual content goes here.... </DIV>
<DIV
ID="left">
Your navigational menu is inserted here from
your javascript file using the following line of code. See the
next example for sample code for the navigational menu
javascript file.
<SCRIPT LANGUAGE="javascript"
TYPE="text/javascript"
SRC="http://www.yourdomain.com/your_nav_menu_file.js">
</SCRIPT>
</DIV>
</BODY>
</HTML>
Now, here's how your navigational
menu javascript file should look:
<!--
document.write('<a
href="http://www.yourdomain.com/your_web_file1.html">Page
One</a>'); <BR>
document.write('<a
href="http://www.yourdomain.com/your_web_file2.html">Page
Two</a>'); <BR>
-->
You can add as many
menu items as you need, so you get the picture.
Finally, here's the part of the code in your CSS file which
gives your site the table-like look without the
high-maintenance, cluttered effect of the HTML TABLE code:
...other CSS code, such as font style, etc., can
precede the following segment.
The #left and #center
blocks of code below correspond to the left and center columns
on your web page. You can also add a #right and #top column and
section, respectively, if you so desire.
#left
{ position: absolute;
top: 0px;
left: 0px;
width: 220px;
padding: 10px;
margin: 5px;
background-color: #f2f2f2;
}
#center
{ top:
0px;
margin-left: 230px;
padding: 10px;
}
Hopefully, those examples give you a fairly good idea of the
benefit of using these two powerful practices. For more about
using CSS, I can recommend downloading the sample chapters
from Dan Shafer's book, HTML Utopia: Designing Without Tables
Using CSS, at SitePoint.com.
Besides these two
optimization techniques, however, we're also hearing about all
kinds of ways to optimize our web sites for the search engines
these days. The competition for those coveted top placements is
fierce, for sure. We've heard all about how important it is to
have good, pertinent content in the textual portion of our
pages, how effective it can be to include our site's keywords
within the alternate attributes (i.e, ALT="keyword") of our
image tags, and how valuable a link to/from a high traffic,
like-minded web site can be. All this is certainly true and well
worth the effort to make our web pages rank higher in the search
engines, but with all this improvement to web site maintenance,
what is the downside? Well, take note, so you can say you saw it
here first.
I've detected two pesky problems in this
web page wonderland. One is the absence of navigational links
for search engine spiders to follow, and the other is the
possibility of javascript-disabled web browsers. That's right;
as fabulous as it is to store our navigational menu in one
javascript file for easier updating, it removes all the key
links from our start page so the search engine spiders have no
other pages left to index on our site, and javascript-disabled
web browsers can't see a menu at all! What's a webmaster to do?
Well, here's how I decided to handle it.
I put my
navigational menu with its various links to all my site's other
pages on two key pages: the start page and the site map page.
This way, when the search engine spiders come calling, they can
follow every link from my navigational menu to every other page
on my site, and, at least, javascript-disabled web browsers will
still have a menu to follow. The same is true of my site map
page. For all the rest of my pages, however, I decided to leave
intact the line of code calling the javascript file containing
my navigational menu in order to take advantage of its
centralization benefits. The more pages I add to my site over
time, the more beneficial this approach will be, too. I see it
as having the best of both worlds: easy site maintenance and
search engine optimization.
So, if you want to lighten your web site maintenance load while
keeping your site optimized for the search engines, I recommend
using CSS to consolidate your site's style attributes, to
include a tableless, yet table-like, appearance and the
centralization of a single javascript file containing your
navigational menu. Just don't remove your navigational links
from your start and site map pages.
You can visit either of my two web sites at
http://webmarketersguide.com or
http://www.parsonplace.com to see how I've done this. You're
welcome to email me anytime at info@parsonplace.com with any
questions or comments.
About the author:
Michael L. White is an Internet entrepreneur who currently
manages two web sites: The Web Marketer's Guide
http://webmarketersguide.com, which provides resources for
Internet entrepreneurs to create, market, and manage a small
business on the Internet, and Parson Place
http://www.parsonplace.com, which has a more personal bent. Both
have subscription-only newsletters to keep you well abreast of
news and information.
|
|
| |
| |
