Making Your Pages Search Engine Friendly.
Hiding Scripts and Cascading Style Sheets (CSS).
Do you use JavaScript and/CSS on your web pages? Did you know that these can
effect your ranking on the search engines, as well as, have other negative
effects such as slowing down the loading of your web pages?
It has been consistently stressed by SEO experts that simple pages, in general,
score better on the search engines. Elements used on a web page such as frames,
HTML tables, and non-indexable text like Java, JavaScript and imbedded
<Style> tags can hinder top page ranking in terms of search engine
optimization strategies.
When a search engine spiders/crawlers a web page it has to skip over all of the
impertinent information to find the actual content of the page. The search
engine spiders/crawlers are looking for indexable text, not the elements used
to build and enhance the web page.
JavaScript and CSS are very useful tools. They provide unique and useful
features for web designers and developers while enhancing the browsing
experience for web site visitors. Unfortunately, on the downside, is all the
additional code that must be inserted into a web page to implement the features
and enhancements.
In addition, by adding the extra code the size of the web page increases. This
also increases the load time of the web page. If a web page is viewed with a
high-speed connection this increase may not be noticeable. However many
Internet users are accessing the web using a dial-up connection.
So what can be done to improve upon this dilemma? The extra code can be hidden
by placing it in separate files. This simplifies the web page HTML code, better
optimizing it for the search engines and reduces the overall size of the web
page. It also has the added benefit of making the web pages easier to manage,
especially if the same code is used across multiple pages of the web site.
Here, step by step, is how to place scripts and/or CSS in a separate file and
load it into a web page. The following are two examples, one with JavaScript
and the other for CSS and how they appear in the <head> section of a web
page:
JavaScript:
<html>
<head>
<title>How to implement remote
files.</title>
<meta name=
"Description" content="How to remove javascript and CSS from a web page.">
<script langauge=
"text/javascript">
<!--
Hide from older browsers
function
m_rollover(){
.
.
The javascript code goes
.
here between the curly brackets.
.
}
//-->
</script>
<style>
h1.heading
{text-decoration: none; color: Navy; font-size: 10px; font-family: Verdana,
arial; }
h2.heading
{text-decoration: none; color: Navy; font-size: 12px; font-family: Verdana,
arial; }
h4.heading
{text-decoration: none; color: Navy; font-weight: bold; font-size: 12px;
font-family: Verdana, arial; }
</style>
</head>
To eliminate the JavaScript or <style> but maintain the functionality of
the code simple remove the bolded code in the example and paste it into a text
file. Notepad will work for this or any other editor that allows saving in a
'Text Only' format. For this example save the files as remote.js for the
JavaScript and remote.css for the CSS style definitions. The files can be save
as any name but it's a good idea to use the .js extension for JavaScript and
.css for the style sheet.
Once the files are saved replace the <script> and <script> with
<script language="javascript" src="filenames">.
For the <style> tags replace the <style> and </style> with
<link rel= "stylesheet" type="text/css" href="filename">.
Filename should be replaced by the name of the file the script code or
style tags were saved to. In the example remote.js and remote.css were used.
Therefore the resulting changes should be similar to:
<html>
<head>
<title>How to implement remote
files.</title>
<meta name=
"Description" content="How to remove
javascript and CSS
from a web page.">
<script language="javascript" src="remote.js">
<link
rel="stylesheet" type="text/css" href="remote.css">
</head>
|
