SEO HTML Blog

A Note on Javascript

2006-12-21T03:51:00.000-05:00

In the course of web design, it has become popular to include various javascript code snippets to perform various functions within a site; often they can be used for browser-compatibility checks, basic dynamic content, and to provide the most accurate and accessible webpage to a viewer based on pertinent data provided to the server. These scripts are often called inline from the HTML within a site; in the interest of bandwidth, it is a good idea to avoid this whenever possible.

Taking a javascript program and putting it into an external file, then calling this script in a webpage header instead of writing out the entire script inline, serves to cache the script instead of forcing the browser to reload it every time a page is reloaded, especially if every page on a site calls the same set of scripts.

If embedding is required, be very careful to properly bracket the script.

<script type="text/javascript" language="JavaScript">
</script>

is the correct method of declaring an inline javascript snippet. Often, WYSIWYG code editors may mangle this declaration, often omitting type="text/javascript" entirely. This informal style is one of the most significant causes of erratic javascripts, and should be strictly avoided.

Search Engine Robots

2006-05-23T13:55:00.000-04:00

Every search engine has a continually-refined and complicated process for updating its search database. The "big three", that is Google, Yahoo, and MSN, all employ a combination of methods, but all three use search engine "spiders" (or crawlers, robots, any of a dozen nicknames). These spiders are largely-autonomous programs which travel the web, jumping from page to page based on the link structure, the same way a regular user might. While the spiders sweep across the web, they collect a variety of data about the pages they encounter, including such items as modification dates, descriptions, and other information contained in the meta tags within a site.

Upon reaching a page, a spider might either index the page initially if it isn't already within the database, or it might update its record of the page, based on how much has changed. The frequency of these spider visits are determined by a variety of factors, including how "static" the content of the page is, and the relative importance of the page itself (PageRank is a measure of this, in Google's world).

Ideally, if you wish to promote your website, you need the spiders to visit often, and "see" all the important sections of your site in order to maintain an updated index that will serve your goals. Accomplishing this is a major goal of SEO on a whole, and is by no means simple. For one, the ways in which spiders move around and collect data is proprietary, and can only really be guessed at by crunching log data, and measuring how quickly a site is indexed and visited.

A separate blog entry will be devoted to each of the big three engines and their methods of indexing, but one general standard for instructing the basic behavior of spiders is a simple textfile called "robots.txt", which is placed in the top-directory of the webserver.

A number of directives can be specified within this file, most notably which areas of your site are "off limits" to search engine spiders. For instance, adding the following lines to robots.txt...

User-agent: webcrawler
Disallow: /

...will tell webcrawler not to index or collect information on any part of your website. Wildcards can be used, as illustrated in the following lines...

User-agent: *
Disallow: /secret
Disallow: /logs

...which keeps every search engine spider (that follows this standard) out of the noted folders. Note that wildcards aren't supported in the actual file path, so instead of /secret/*, just use /secret/.

There is also a META equivalent to this method; simply add the following line to your HTML file, if you don't want it indexed:

<META NAME="ROBOTS" CONTENT="NOINDEX">

If you'd like the page indexed but not the links contained within, use:

<META NAME="ROBOTS" CONTENT="NOFOLLOW">

Meta Tags, Introduction

2006-01-07T16:49:00.000-05:00

When a search engine robot indexes a website, it takes down cursory information like remote location, size, and other details. The actual content of the page is often dynamic and very difficult to categorize automatically; this is where Meta tags come into play. Meta tags serve as guidelines for search engine robots, validation engines, and even your audience's actual web browser. Proper use of these tags ensures your page will be recognized by all types of browser and search engine robot, and will be indexed quickly and efficiently.

Beware defaults; visitors with their browser settings set up in nonstandard ways will rarely see your website as it's intended to be seen
In general, it's good practice to keep everything in lower case
Using quotations within quotations is a common source of error, beware of quotes in your meta information
Punctuation in general can wreak havoc on validators and robots, try and avoid it within meta tags.

Generally, the following format should be sufficient for most sites:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Descriptive Title</title>

 <meta name="author" content="Author of this site's content">

 <meta name="classification" content="Descriptive category for indexing">

 <meta name="copyright" content="Usually author or company name">

 <meta name="description" content="Keep to about 12 words, be descriptive and concise">

 <meta name="keywords" content="A series of keywords, separated by a comma and space, that describe your site. These are things users might type into a search engine if they were looking for your services. Don't go overboard, keep them focused. Some robots will only read the first dozen or so, keep the important ones at the beginning">


 <meta name="distribution" content="Global">


 <meta name="language" content="Language code. In Canada, this is en-ca">


 <meta name="reply-to" content="Put your inquiries email address here">


 <meta name="revisit-after" content="30">


 <meta name="robots" content="index,follow">


 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


 <meta name="rating" content="GENERAL">


 <meta name="MSSmartTagsPreventParsing" content="TRUE">

The latter tags ensure that robots will visit often, and index your entire site. The very last tag prevents your page from being improperly indexed by Microsoft's controversial "Smart Tags" program.

Next week, we'll examine further ways to insure robots index your site properly.

Best Practices in HTML Design

2005-11-01T23:09:00.000-05:00

We have so far established that during the planning stages of any professional or commercial website, both user interaction and search engine compatibility must be considered. Proper code will not only streamline the flow of customers and viewers, but it will leave them with a fantastic impression of the website, free of errors and irritations. Similarly, search engine spiders will be met with validated, concise code which can be quickly parsed and indexed properly. Not only can this potentially increase a website's ranking among search engine results, but it allows the search engine to effectively detect relationships between various pages within a business website, and provide these related pages as additional results, further increasing exposure.

Initially, we will concentrate on four "best practices" we recommend for proper optimized code.

W3C Validated Code (we have touched upon this before, and we will again.)
Proper incorporation of scripts and external programs.
Effective use of stylesheets (CSS)
Proper insertion of metadata in the form of META tags.

Each of these topics will be covered in a dedicated blog post, but in the meantime, we recommend designers adhere to a set of general coding practices which ease a lot of hardship when attempting to validate code:

Always close any HTML tags you open. There are few exceptions.
Know the default attribute values; get into the habit of assigning values to each attribute, in case defaults are different between browsers and platforms.
Use lowercase EVERYWHERE.
Set up an intuitive and expandable file system, and only use A-Z, a-z, and 0-9 (and underscores) in your filenames. File systems can become bogged down quickly, and an organized hierarchy is invaluable down the line.
Keep accessibility in mind, for people with disabilities or limitations on their browsing. (We shall touch upon this later)
Never automatically trust code that you didn't type out yourself. (Dreamweaver and Frontpage, for instance)

Stick to these guidelines and validation will become almost automatic. Detail will be provided in future blog posts, as to how to properly make the most of these various practices.

Proper Coding Ethos

2005-09-05T14:45:00.000-04:00

Paramount in any commercial website is the useability of the site itself. Glitches, malfunctions, inconsistencies and errors are business killers, and must be eliminated in order to provide an efficient and friendly browsing experience for customers and readers. The implementation of proper coding practices will keep customers at your website for longer periods of time, and will vastly decrease their levels of stress. It is crucial to gain the customer's trust, as far as their perceptions of your security and professionalism. A buggy website is often seen as an insecure website, and an amateur affair. These perceptions can crumble the credibility of a business in an age where the website is not only the first portal to a company, but often the ONLY portal.

Sideline to the obvious issues of useability, are issues of search engine exposure. Search engines employ sophisticated programs called "spiders" or "robots" to automatically trawl the internet for content, which is then indexed according to the search engine's own specific (and secret) algorhithm. The methods these spiders use to index a page are unknown, and change frequently. Certain things hold true (for the time being): The text used in an image is not seen by the spider, but the "alt=" text most likely is. Spiders are code based and thus are incapable of "fuzzy" interpretations of your website. This is the reason why proper code is crucial; if the spider hits an error, it may improperly index your page, or ignore it completely, severely limiting your exposure to search engines.

It is impossible to know what glitches a spider can overlook, and which ones will stop it in its tracks. For this reason, we have taken the stance that the only code which is sure to be read properly by a spider, is code that has passed W3C validation. The more of your code that can be validated, the more a spider can access. Once it's indexed, more customers will find your site among search results, thus increasing revenue. There is a demonstratable link between proper coding practice and revenue generation in today's online marketplaces, one that is unfortunately often ignored.

It is possible that search engine spiders aren't quite as stringent and strict as the validation rules are, but on an issue of this importance it's better to be safe than sorry. Next week, we will delve into proper code declarations to maximize the ability of a spider to properly detect and index your site.

Why Validate?

2005-08-30T00:55:00.000-04:00

Validation is a practice sorely underused in modern web design, a fact that is unfortunate when coupled with the fact that most modern businesses rely on a solid web presence to enhance their bottom line. When a business creates a webpage with the sole purpose of driving customers toward their company, both their placement within a search engine's results, and the compatibility of their website with the hodgepodge of browsers and computers currently available, is crucial for survival. Validation ensures this survival, and instills the proper ethos of effective coding practice.

While validation is crucial on a broad scale, it is not imperative that every single webpage validate. It is however important that the designer understand precisely why a page does not validate, if it is not required to. Pages that are databased are currently not able to pass validation, and thus aren't typically indexed by the search engine spiders. The main players in the search engine race are taking broad steps to fix this problem, as large sections of the internet are in the form of databased pages; for this reason, a keen knowledge of the mechanics of page validation is imperative. It is also important to note that validators currently do not validate script, just the script's relative placement within the HTML. The same proper coding practices should apply to script, just as they do to HTML, as a matter of convention.

Shortcuts are some of the most common reasons for a webpage not validating, and proper formal coding can eliminate these problems before they crop up. Where a quick kludge might seem worthwhile, proper CSS coding and the use of legal, proofed code will nearly always result in pages which are largely free of problems from the beginning.

With this knowledge in mind, the designer can begin studying the fundamentals of proper, formal code and the methods of proper validation, topics which will be touched upon in later weeks.

SEO and Validation Tools

2005-08-09T13:42:00.000-04:00

Developing proper standardized, validated code and documents requires specialized tools. The days when it was suitable to code line by line in Notepad, or another simple text editor, are largely gone. Today's businesses and customers require fast turnaround, and efficient debugging. This document is an overview of the necessary tools for effective search engine optimization and validation.

Hardware:
Although the vast majority of computers connected to the internet are Windows-based PC's, Apple and *nix-based browsers are enjoying a healthy increase in market share. Beyond this, cross-platform browsers (Mozilla, Opera, Firefox) are growing at a fast pace, and cutting-edge web technologies like AJAX might soon render the specific operating system irrelevant. The computer system used to develop proper websites is thus less important than it once was; any system capable of running the latest version of every browser, and a decent graphical manipulation program, should be sufficient.

Browsers:
In a PC environment, the newest versions of Internet Explorer and Firefox should be installed, and consideration given to also installing Netscape and Opera (which share a smaller market percentage).

In a Mac environment, the most recent versions of Safari and Firefox must be installed, as well as the Mac version of Internet Explorer.

Linux users should implement whatever browsers they can, including Firefox and ideally an emulation of Internet Explorer. Linux-specific browsers (Konqueror, etc) are also recommended, although these represent a very small percentage of the total number of browsers visiting a website.

Coding Software:
Many professional-level packages exist for website design, and most insert proprietary code and use often-confusing methods for obtaining certain layouts. The code produced by these packages often needs to be cleaned up, and in most cases does not immediately validate. Having said that, the authors of this website have used various versions of Macromedia's Dreamweaver in the past, and found it effective in certain capacities.

For complete control over code, Metapad is a free program available from http://www.liquidninja.com/metapad, and seeks to improve upon Notepad in the Windows environment. Editplus, from http://www.editplus.com is another program that is effective in this regard. HTML-KIT, available from http://www.chami.com/html-kit, is a valuable program (when used correctly) for code validation.

Graphics Software:
Any sufficiently robust graphic application should suffice, ranging from the free GIMP (http://www.gimp.org) to the professional-level Adobe Photoshop. Whatever graphics program is used, the user must have knowledge of how various filetypes are interpreted by the browser, and how to optimize image files for use on the internet. A significant number of internet users are still on low-bandwidth connections and will not sit idle while enormous graphics slowly download to form a website.

Beyond these programs, the online code validator at http://validator.w3.org/ is indispensable for proper code optimization.

None of these programs are foolproof; all can be benefitial, but only if used properly and under the right circumstances. No program will substitute for the fundamental practice of TESTING, under as many different environments as possible. Methods of testing will be discussed in future articles.

The Cause for Validation and Search Engine Optimization

2005-07-29T21:38:00.000-04:00

This weblog intends to provide a wealth of knowledge on search engine optimizing, proper and formal HTML design, and the methods one should use to thoroughly test both websites and network documents. The methods herein primarily apply to public websites, but these techniques can be applied to intranets and internal networks as well; any search schema based on keywords and mainstream-styled search algorithms.

These lessons will provide insight on how to create search engine optimized documents from the beginning, as a default state. Barring that, existing pages can be modified to readily accept optimization, from an optimized code, images, and metadata basis. These lessons should function as a rough benchmark for proper coding and web design, and these standards should be applied to every website or network document which is required to be accessible by a search scheme.

It should be stressed that the most fundamental principle here is TESTING. Minor errors can snowball, cascading into unexpected problems throughout the scope of a website. The mere case of a missed period in a CSS document, for example, can ruin the layout of an entire website.

Why is Validation Important?

Validation can vastly reduce the occurrence of website crashes, hangs, or critical errors. A validated page is an acid-test for formal and professional code, and is thought to be preferentially chosen by both search engine robots and human editors. A poorly coded page which does not pass validation might cause errors in a search engine robot, and result in vast sections of the website being missed, or worse, the site failing to rank at all.

Pages occasionally can avoid validation if they are suitably specialized to require code which inherently does not validate. It is crucial that the web designer know why the page does not validate, and the implications thereof. In an era dominated by the indexing and quick location of information, validation standards must be strictly upheld if a business is to become competitive, or if documents are to stay relevant and avoid being lost into the ether.

The next post will detail the tools needed to effectively produce validated code, and introduce the techniques required to do so.