Page design, setup and SEO

Design

These pages are based on a design from dcarter with a few adaptations:

  • Replaced banner. Different pages have different banners. These banners are part of various photos I took.
  • Replaced top links with additional menu
  • Pages are generated through a template engine
  • (internal) links in pages from menu items will give a different layout. The text part is wider which is more convenient if there is more text.
  • Not all pages validate correctly in part due to a byte order mark (BOM). I tried various options like viewing it in hex and using the notepad++ editor but none of them solved this problem.
  • It is easy to zoom in with Internet Explorer, Firefox and Opera, but Safari does not seem to work that well. I should point out that the Safari browser has the same problems zooming in on their own sites.

Setup

The pages you are viewing are not managed with a conventional cms. All pages are 'static' html that is generated with a python template engine that I wrote for this purpose. The template engine generates all pages before they are published on the Apache web server as static html. The menu navigation on the pages are 'static' (no javascript). Sometimes I experiment with Varnish. The cache size of Varnish is as big as the size of all the html pages of my site. Obviously the transition speed between pages depends also on the network latency and capacity and various other things. Search is provided through HTDig, a relative old search tool but still effective. The whole site is run on a VPS. Apache consumes approximately 15 MB of RAM while Varnish consumes (when all pages are in cache) approximately 40 MB. On the VPS there are several applications that monitor Apache, Varnish, memory, load and the OS. When an applications stops (unexpectedly) it is automatically restarted and a notification email is sent, and when a memory or load threshold is reached a notification email is sent too, including the output of the 'top' command (as an attached file).

Search Engine Optimization (SEO)

Search Engine Optimization can be defined as the process of improving the volume or quality of traffic to a web site from search engines via "natural" or un-paid ("organic" or "algorithmic") search results. There are many different aspects to SEO. Google has some good SEO resources that focus on the Google search engine but can be applied more broadly. Below is a short list of simple things that you can do to optimize your sites for search engines which can have a big effect on your ranking.

  • Do not use _ (underscore) but - (dash) for separation of file names.
  • Add a site map that is statically linked from the main page. The site map contains static links to all (important) pages.
  • Make sure that images have the alt attribute and that it is descriptive.
  • Keyword tag: Every word in this tag MUST appear somewhere in the body text. If not, it can be penalized for irrelevance.
  • Check broken links (e.g. with a link checker).
  • Check your web page look/feel in multiple browsers.
  • For javascript you can use the Firefox error console to check for any javascript errors or exceptions.
  • Use Google webmaster tool to check if Google generates any errors when crawling your site.
  • Use Google analytics or other data aggregation tool like AWStats to find out what pages are visited.
  • Descriptive link names (not 'home', 'me', click 'this').
  • Put in place a robot.txt file
  • One topic per page.
  • Access the whole site in three clicks.
  • Use proper CSS and HTML.
  • Make sure your web server supports the If-Modified-Since HTTP header. This helps search engines to assess what has been modified.