OPTIMIZING JAVASCRIPT CODE AND CASCADING STYLE SHEETS
(CSS) FOR SEARCH ENGINES AND MIVA MERCHANT STORE OWNERS
Many Miva Merchant store owners are under the impression that once a
search engine sees a javascript (<javascript>) or css style (<style>)
tag, it automatically ignores everything between it and the ending javascript
(</script>) or css style (</style>) tag and that is the end
of it. They think it is not big deal to have forty lines of javascript
or cascading style sheet code either in the head (<head></head>)
section or content of a page. Actually, this pushes relevant content
further down the page, thus possibly making it seem less relevant to search
engines. You want your pages to be considered the most relevant
to people's searches from Google and other search engines. Here
are some real-world examples from clients.
<script language="JavaScript" type="text/javascript">
<!-- hide
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src;
x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
function mmLoadMenus() {
if (window.mm_menu_0010122535_0) return;
window.mm_menu_0010122535_0 = new Menu("root",102,18,"Arial,
Helvetica, sans-serif",12,"#ffffff","#ffffff","#339933","#99cc66","left","middle",3,0,100,-5,7,true,false,true,0,true,true);
mm_menu_0010122535_0.addMenuItem("Dogs","location='/animals_dogs.html'");
mm_menu_0010122535_0.addMenuItem("Cats","location='/animals_cats.html'");
mm_menu_0010122535_0.addMenuItem("Parrots","location='/animals_birds.html'");
mm_menu_0010122535_0.addMenuItem("Horses","location='/animals_horses.html'");
mm_menu_0010122535_0.addMenuItem("General Animals","location='/animals_general.html'");
mm_menu_0010122535_0.fontWeight="bold";
mm_menu_0010122535_0.hideOnMouseOut=true;
mm_menu_0010122535_0.menuBorder=0;
mm_menu_0010122535_0.menuLiteBgColor='#ffffff';
mm_menu_0010122535_0.menuBorderBgColor='#555555';
mm_menu_0010122535_0.bgColor='#555555';
window.mm_menu_0010121809_0 = new Menu("root",120,18,"Arial,
Helvetica, sans-serif",12,"#ffffff","#ffffff","#339933","#99cc66","left","middle",3,0,100,-5,7,true,false,true,0,true,true);
mm_menu_0010121809_0.addMenuItem("Fountains","location='/fountain_01.html'");
mm_menu_0010121809_0.addMenuItem("Fountain Formulas","location='/fountain.html'");
mm_menu_0010121809_0.addMenuItem("Room Sprays","location='/room.html'");
mm_menu_0010121809_0.fontWeight="bold";
mm_menu_0010121809_0.hideOnMouseOut=true;
mm_menu_0010121809_0.menuBorder=0;
mm_menu_0010121809_0.menuLiteBgColor='#ffffff';
mm_menu_0010121809_0.menuBorderBgColor='#555555';
mm_menu_0010121809_0.bgColor='#555555';
window.mm_menu_0012092148_0 = new Menu("root",154,18,"Arial,
Helvetica, sans-serif",12,"#ffffff","#ffffff","#339933","#99cc66","left","middle",3,0,100,-5,7,true,false,true,0,true,true);
mm_menu_0012092148_0.addMenuItem("Retailers and Distributors","location='/resell_distr.html'");
mm_menu_0012092148_0.addMenuItem("Pet Professionals","location='/pet_prof.html'");
mm_menu_0012092148_0.addMenuItem("Dealer Application","location='/pdf/Dealer_Application.pdf'");
mm_menu_0012092148_0.addMenuItem("Affiliate Program","location='/affiliate.html'");
mm_menu_0012092148_0.fontWeight="bold";
mm_menu_0012092148_0.hideOnMouseOut=true;
mm_menu_0012092148_0.menuBorder=0;
mm_menu_0012092148_0.menuLiteBgColor='#ffffff';
mm_menu_0012092148_0.menuBorderBgColor='#555555';
mm_menu_0012092148_0.bgColor='#555555';
window.mm_menu_0013131507_1 = new Menu("root",99,18,"Arial,
Helvetica, sans-serif",12,"#ffffff","#ffffff","#339933","#99cc66","left","middle",3,0,100,-5,7,true,false,true,0,true,true);
mm_menu_0013131507_1.addMenuItem(" About Us","location='/about.html'");
mm_menu_0013131507_1.addMenuItem("Further Reading","location='/further_reading.html'");
mm_menu_0013131507_1.addMenuItem("Links","location='/links.html'");
mm_menu_0013131507_1.fontWeight="bold";
mm_menu_0013131507_1.hideOnMouseOut=true;
mm_menu_0013131507_1.menuBorder=0;
mm_menu_0013131507_1.menuLiteBgColor='#ffffff';
mm_menu_0013131507_1.menuBorderBgColor='#555555';
mm_menu_0013131507_1.bgColor='#555555';
mm_menu_0010121809_0.writeMenus();
} // mmLoadMenus()
// stop hiding -->
</script>
To fix this problem, remove everything between the beginning and ending
script tags, place it in a text file, and save it as navimage.js.
You can than reduce all that code on your page to only one line of code
like this:
<script language="JavaScript" src="/js/navmenu1.js"
type="text/javascript"></script>
More and more people are using cascading style sheets (css) to format
elements of their website. However, the more elements you want to
format with cascading style sheets, the longer your code will be.
Check out this sample css code.
<style type="text/css">
body {
margin: 0 0 0 0;
font-family: tahoma, arial, sans-serif;
color: black;
background: white;
background-position: top left;
background-attachment: fixed;
background-repeat: no-repeat;
}
:link { color: #004B9A; background: transparent }
:visited { color: #666666; background: transparent }
:active { color: #CC0000; background: transparent }
th, td { /* ns 4 */
font-family: tahoma, arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 { text-align: left }
/* background should be transparent, but WebTV has a bug */
h1, h2, h3 { color: #004B9A; background: white }
h1 { font: 170% tahoma, arial, sans-serif }
h2 { font: 140% tahoma, arial, sans-serif }
h3 { font: 120% tahoma, arial, sans-serif }
h4 { font: bold 100% tahoma, arial, sans-serif }
h5 { font: italic 100% tahoma, arial, sans-serif }
h6 { font: small-caps 100% tahoma, arial, sans-serif }
.hide { display: none }
div.head { margin-bottom: 1em }
div.head h1 { margin-top: 2em; clear: both }
div.head table { margin-left: 2em; margin-top: 2em }
div.head img { color: white; background: transparent; border: none } /*
remove border from top image */
p.copyright { font-size: small }
p.copyright small { font-size: small }
pre { margin-left: 2em }
dt, dd { margin-top: 0; margin-bottom: 0 } /* opera 3.50 */
dt { font-weight: bold }
tt { font: italic 100% tahoma, arial, sans-serif;
color: #004B9A;
background: transparent
}
b { font: bold 100% tahoma, arial, sans-serif;
color: #004B9A;
background: transparent
}
pre, code { font-family: monospace } /* navigator 4 requires this */
ul.toc {
list-style: disc; /* Mac NS has problem with 'none' */
list-style: none;
}
@media aural {
h1, h2, h3 { stress: 20; richness: 90 }
.hide { speak: none }
p.copyright { volume: x-soft; speech-rate: x-fast }
dt { pause-before: 20% }
pre { speak-punctuation: code }
}
.txthead {
font: 14pt tahoma, arial, sans-serif;
color: #004B9A;
background: transparent
}
.table1 {
font: 9pt tahoma, arial, sans-serif;
color: #000000;
background: transparent;
text-decoration: none;
}
.table2 {
font: 8pt tahoma, arial, sans-serif;
color: #000000;
background: transparent;
text-decoration: none;
}
.table3 {
font: 7pt tahoma, arial, sans-serif;
color: #000000;
background: transparent;
text-decoration: none;
}
.table4 {
font: 10pt tahoma, arial, sans-serif;
color: #000000;
background: transparent;
text-decoration: none;
}
.table5 {
font: 12pt tahoma, arial, sans-serif;
color: #000000;
background: transparent;
text-decoration: none;
}
</style>
Ouch! That is going to push your content much farther down than
you ever imagined. Just like the javascript, this all can be compressed
into one line of code. Just copy everything between the beginning
and ending style tags to a text file and save it as pagestyle1.css.
You can reduce all those lines of code into this:
<link rel="stylesheet" href="/css/pagestyle1.css"
type="text/css" />
Another way javascript can adversely affect both your static and dynamic
Miva Merchant is javascript-based link navigation. This usually
comes in the form of drop-down menus. Text links are optimal for
search engines, but sometimes design style and other issues necessitate
the use of drop-down menus. The way to fix this potential problem
is by using noscript tags (<noscript></noscript>). Here
is an example:
<form name="form1" id="form1">
<select name="menu1" onchange="MM_jumpMenu('parent',this,1)">
<option selected="selected">February 2003 Issue Menu</option>
<option value="/searchmiva/jan2003/tips.html">Optimizing
Javascript and CSS for Miva
Merchant</option>
<option value="/searchmiva/jan2003/fatalerrorpagesandmivamerchant.html">Fatal
Error Messages and Miva Merchant</option>
<option value="/searchmiva/jan2003/searchenginenews.html">Search
Engine
News</option>
<option value="/searchmiva/jan2003/resources.html">Search
Engine Resources</option>
<option value="/searchmiva/jan2003/mostimportantsearchengines.html">
Important Search Engines for Miva Merchant</option>
</select>
</form>
<noscript>
<a href="../jan2003/fatalerrorpagesandmivamerchant.html">Fatal
Error Messages
and Miva Merchant</a><br />
<a href="../jan2003/tips.html">Tips on Improving Merchant</a>
<br />
<a href="../jan2003/mostimportantsearchengines.html">
Important Search
Engines for Miva Merchant</a><br />
<a href="../jan2003/searchenginenews.html">Search Engine
News</a> <br />
<a href="../jan2003/searchenginenews.html">Search Engine
Resources</a>
</noscript>
Although a search engine may not follow the links in the drop-down menu
code, it will follow the links between the noscript tags.
Remember this as you optimize both your static pages and dynamic Miva
Merchant pages.
|
