Designing Websites for SEO

Here are a list of items that should be considered when designing & coding a site. These make Search Engine Optimization (SEO) much easier.  The following bullets highlight some of the most important points.  

  • Code sites in css for layout and styling as much as possible.

  • Text on each page should be fluid (vs fixed) width. If a design requires a fixed width for copy, make sure it isn’t so large that a viewer with a 800 x 600 browser will miss important information (such as a navigation bar or title).
 
  • Header graphics shouldn’t be more than 300px high – in a 800 x 600 browser, this is more than ½ the page and puts most text 'below the fold'. 

  • Site navigation design should use text-based links – using <ol> or <ul> or using background images for the text links so they can be placed using <TD background="">.
 
  • Make sure that the company ’s phone number & location (at least city and state, full address is recommended) are easy to read on any page (in HTML / text, not graphic images).  Placing the phone number “above the fold” is highly recommended
 
  • Content headers (<h1>, <h2>, etc.) are important for SEO.  For designers, this means detail pages’ designs should either 1) allow space for CSS text <h1> or <h2> above the body copy or 2) if the design makes it absolutely necessary to code the content headers as images, do not include that image as part of the larger template structure. In other words, put that image in whitespace above the body copy so it can be placed using a CSS <h1> image.
 
  • Taglines near the top of the page are great – they not only put a friendly spin on the site, but more importantly, they give an opportunity to place a keyword or two near the physical top of the code. This is only true if the tagline is in text, though.  Taglines should always be designed so they can be coded as CSS text. 
 
  • For link lists, don’t be afraid to use <UL> or <OL> + a style to set the bullet image. Engines are thought to put a little weight on bulleted lists.
 
  • In general, minimize text rendered as an image. CSS text is always preferred.
   
  • When choosing colors for text links and background navigation images, (or background behind any text), chose to vary the hues & saturation for ease of reading and accessibility for the partially or fully color blind. For example, a bright red on bright green background will appear to have no differentiation to the color blind. A more appropriate choice may be a dark blue on a light background. (According to Wikipedia, 7 – 10% of men suffer from some sort of color blindness. More information at http://en.wikipedia.org/wiki/Color_blindness ).
 
  • Use em's in CSS instead of points or pixels to designate font size. Points & pixels are not 'accessible' and aren’t in accordance with w3C standards. Use medium to large font sizes. 0.61em = 11px. Conversion calculator here: http://riddle.pl/emcalc/
 
  • AVOID placing any navigation, at the bottom or the right side of the page. This is for usability (smaller browsers cant see them) and SEO (SE's put more importance on text links at the top of the page, and when viewing code, right side navs appear nearer to the bottom).
 
  • AVOID white text. White text on a black ground is hard to read, and if it's white text on an image (with no CSS background HEX color), SE's may interpret that as spam. In general, for copy & content – text should be a dark color on a light background.
 
  • All background images should have a HEX# color behind them.
 
  • With almost 40% of consumers browsing the internet using Firefox (as of april 08), designers and coders should aim to be cross browser compatible.
 
  • All sites should be validated for HTML & CSS using these tools:

   - http://validator.w3.org/
   - http://jigsaw.w3.org/css-validator/