PopularMechanics.com

First let's look at what not to do. For that, we turn to the PopularMechanics.com home page (see Figure 16.1).

Figure 16.1. PopularMechanics.com (May 7, 2002).
graphics/16fig01.gif

Here's the (first) head section of the PopularMechanics.com home page:

 <html>  <head> <title>Popular Mechanics</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="site" content="PM_Zone"> <meta name="Description" content=""> <meta name="Keywords" content=""> <meta name="department" content=""> <meta name="date" content=""> <meta name="display" content=""> <SCRIPT LANGUAGE="JavaScript"> function formHandler(form){ var URL = document.form.site.options[document.form.site.selectedIndex].value; window.location.href = URL; } </SCRIPT> </HEAD> 

Popular Mechanics is a magazine devoted to do-it-yourselfers and handymen and women, with automotive, science and technology, home improvement, and the outdoors listed as some of their main topic areas. Unfortunately, their online companion site, PopularMechanics.com, takes little advantage of this rich set of keywords within their pages. Keyword-free title tags, blank meta tags and alt attributes, an oversized head section, commented code, and syntax errors highlight this poster child for web site optimization. Let's start at the top and work our way down.

Term -Limited title

 <title>Popular Mechanics</title> 

This is a good start, but Hearst Communications is wasting a perfectly good title tag by omitting their prime search terms. Let's take them at their word and use their main topic headings:

 <title>Popular Mechanics  automotive, science and technology, home improvement news graphics/ccc.gif outdoors</title> 

This is much better. Another improvement would be to put their top keywords up front, before their name. Remember from our Keyword Optimization Guidelines to write a title using your top two to three phrases. It goes downhill from there, however.

Empty meta Tags

PopularMechanics.com includes many meta tags, but most of them are blank. All but the description and keywords tags can be deleted. So instead of this:

 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  <meta name="site" content="PM_Zone"> <meta name="Description" content=""> <meta name="Keywords" content=""> <meta name="department" content=""> <meta name="date" content=""> <meta name="display" content=""> <SCRIPT LANGUAGE="JavaScript"> function formHandler(form){ var URL = document.form.site.options[document.form.site.selectedIndex].value; window.location.href = URL; } </SCRIPT> </HEAD> 

They should do this:

 <meta name="description" content="Popular Mechanics is a magazine devoted to ...">  <meta name="keywords" content="automotive do-it-yourself science technology outdoors graphics/ccc.gif handyman house repair ..."> 

Be sure to include your top keyword phrases in the description and keywordsmeta tags. All the other meta tags are superfluous or can be accomplished more efficiently with server settings.

Big head

Search engines generally give higher relevance to pages that get to the point within the first 2KB to 3KB of code. The head section of a web page should be minimized both to decrease load time and to increase relevance.

PopularMechanics.com uses 1,783 lines of CSS and JavaScript before you get to the body tag. This 60KB+ block of code must be loaded before any content can be displayed and before visible text can be indexed. Their head section alone is twice as large as many home pages. Highlights include internal overspecified CSS, iSyndicated content placeholders and instructions, profuse comments, and JavaScript galore (some of which is not used).

So instead of this (imagine a long jumble of JavaScript, CSS, and comments):

 <!-- first head section here - ABK -->  </SCRIPT> </HEAD> <!-- second head section starts here - ABK --> <style type="text/css"> <!-- lots of CSS and JavaScript here - ABK --> ... </script> <!--  End rollovers (yellow_navigational_buttons)  --> <!-- PowerAd --> <!-- PowerAd --> </head> <!-- feed name ="Top New" --> <!-- article --> <BODY OnUnLoad="checkCount()"  leftmargin="0" topmargin="0" marginwidth="0" graphics/ccc.gif marginheight="0" onLoad="MM_preloadImages('images/b_auton.gif','images/b_himpon.gif','/ graphics/ccc.gif images/b_scion.gif','/images/b_outon.gif','/images/b_techon.gif','/images/b_srcon.gif','/ graphics/ccc.gif b_whton.gif','/images/b_shpon.gif','/images/b_crron.gif','/images/b_emlon.gif','/images/ graphics/ccc.gif b_advon.gif','/images/b_msgon.gif')"> 

They should do this:

 <html><head><title>Popular Mechanics  automotive, science and technology, home graphics/ccc.gif improvement news</title>  <meta name="description" content="Popular Mechanics is a magazine devoted to ..."> <meta name="keywords" content="outdoors automotive do-it-yourself science technology do graphics/ccc.gif it yourself handyman house repair ..."> <link rel="stylesheet" type="text/css" href="/css/global.css"> <script src="/js/global.js" type="text/javascript"></script> </head> <body> 

This simplified head section saves PopularMechanics.com nearly 60KB of code, from 61,569 characters down to less than 500 characters . Most of the JavaScript can be eliminated, optimized, moved to external scripts, or shunted into server-based scripts. The overspecified CSS can be simplified, optimized, and moved to an external style sheet.

Search engines will now get to the visible text much earlier in the page, and users won't resort to home-improvement projects while waiting for the page to display. The lesson? Remember to minimize your head section.

Sharp-eyed readers will notice that PopularMechanics.com has two closing </head> tags, which means that not all their CSS is HTML 4 compliant. They also specify their body styles twice, with a huge body tag that appears to be generated by Dreamweaver. I'd eliminate the rollovers entirely, or use a more efficient alternative, such as one from Doc JavaScript (http://www.docjs.com), www.DHTML.com, or xml.apache.orgor even better, use CSS rollovers (see Chapter 8, "Advanced CSS Optimization," for more information).

Missing alt Attributes

PopularMechanics.com uses graphic text for their primary navigation, but they do not provide text alternatives for the visually challenged or for folks with images turned off (which is likely if they return a second time). Alternative descriptions ( alt attributes) are a required attribute of image elements in HTML 4.x and XHTML.

Here PopularMechanics.com misses on two counts:

  • Search engines rank link text and URLs higher than regular text.

  • Search engines also look inside alt attributes for keywords.

Search engines can't read a graphic "automotive" or "technology" button, so they will not see these keywords. Vision-impaired users need descriptive alt attributes to help navigate a site.

So instead of this automotive menu item:

 <tr>              <td width="1" height="17"></td>             <td width="123" height="17"><a href="/automotive/ graphics/ccc.gif index.phtml" onMouseOver="HISpopUp('HISelMenu2',event); img_act('red_automotive')" graphics/ccc.gif onMouseOut="HISpopDown('HISelMenu2'); img_inact('red_automotive')" style="color: graphics/ccc.gif fefefe"><img name=red_automotive src="/images/b_autoff.gif" width=119 height=17 alt="" graphics/ccc.gif border=0></a></td>           </tr> 

They should do this:

 <tr>  <td width="1"><img src="/t.gif" width="1" height="17" alt=""></td> <td width="123"><a href="/automotive/" onMouseOver="HISpopUp('HISelMenu2',event); img_act( graphics/ccc.gif 'automotive')" onMouseOut="HISpopDown('HISelMenu2'); img_inact('automotive')" graphics/ccc.gif style="color:#fefefe"><img name="automotive" src="/images/b_autoff.gif" width="119" graphics/ccc.gif height="17" alt="automotive" border="0"></a></td> </tr> 

Notice that I've used defaults ( align="left" ) and simplified the image names to use the 'automotive' keyword. I also simplified the unnecessary 1-pixel spacer cell . To prepare PopularMechanics.com for XHTML, I've added quotes on all the attributes.

Most importantly, I added a meaningful alt attribute value of "automotive" .

Even better, remove the DHTML menus entirely and use style sheets:

 <tr>  <td width="123"><a href="/automotive/" class="r">Automotive</a></td> </tr> 

This HTML could be optimized further, but this should give you an idea of the savings you can achieve. These improvements would dramatically improve the search engine rankings of PopularMechanics.com.

 



Speed Up Your Site[c] Web Site Optimization
Speed Up Your Site[c] Web Site Optimization
ISBN: 596515081
EAN: N/A
Year: 2005
Pages: 135

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net