A Search Engine Friendly web site is nothing more then a regular web site that was coded properly. The only partition of a web site that people usually don't see (the code), is acually the only partition of a web site that Google can see!
A clean HTML code, if possible free of tables or scripts, with navigation menus built using UL and LI tags, with all the writen content separated by main headers using at least the H1 and H2 tags, and finaly, with a Document Type Declaration (DocType XHTML 1.0 Strict for example), would be considered not only a search engine friendly and optimized web site, but also a properly built one.
I know it seems a bit complicated but if you continue reading below I will try to explain all this using a basic language and examples that will help you to understand.
Unfortunately the robots operated by the major crawlers can only read the code partition of web sites. The robots cannot read the content of images that you might place on your website and even less Flash websites. Flash websites are totally ignored by the robots. It is ok to use some Flash on your website but it is better to use none. Images should be used for image contents only, try to avoid using images for the main links or for the most important wording content. Unfortunately, the HTML written content is limited to few different fonts and styles but, most importantly, are robots friendly. This web site you are viewing now has all the written content in HTML code format, it renders nicely because I use advanced CSS to format the copy and all the headings (except the logo), it shows very nice and is 100% Search Engine Friendly!
The robots constantly trace the internet searching throughout all the code of every web site submitted. All the copy content of these web sites will be indexed and related to important keywords and saved into the crawler's database. Everything else that is not code (images, flash, videos and applications) will be ignored.
The use of menus with images should definitely be avoided but in case it is a must then you should place a title tag for each button link with the name of the button on it. The title tag will indicate to the robot what is the link about and which keywords it should be related with. As you can see in my web design portfolio, most of the menus on the web sites I made are done with code (not pictures) and there is a reason why.
In adition, all the buttons of a menu should be grouped inside a UL tag and every single button of this menu should be placed inside a LI tag. This will clearly indicate to the robots where the navigations menu starts and when it finishes as well as how many buttons are present. This way, robots can go thru the navigation menu easily and quickly index all the pages of a web site.
Your Web Site should also have an HTML Header so it can be easily understood by the robots.
Lack of these simple features will make a tremendous difference.
The user cannot see what is in the HTML Header, except for the HTML Title tag which is shown atop the browser window. The header is usually found in the begining of the code partition of your web site, delimited by <head> and </head> elements, and it does not show on the screen. It is an area with some information that the robots will read. Basically there could be four TAGS on the HTML Header: The TITLE tag, the DESCRIPTION tag, the KEYWORDS tag and the ROBOTS tag.
The Title tag is no doubt the most important feature in SEO. The title tag of every page of your web site will be used as the title of the link to it, when shown on the search engine results pages (SERPs). It is recommended to use up to 70 characters only, including commas and spaces. Within that short length you will have to include all the keywords that are relevant to its page. You can use more then 70 characters but it is not recommended and Google or Yahoo may place you on the spammer list and you will be out of the search results for a while (until you fix it and request reevaluation).
The keywords in this tag should be repeated few times in the page's body to obtain a good keyword representation. You should have one title tag with different and relevant content on every page of your web site. The keywords used in the title tag should be obviously as much popular and relevant as possible, and, at the same time with competition level compatible with your current page rank.
<title>The HTML title tag content would go in here.</title>
The Description tag should have a clear description of your web site page in which it is inserted, you should use here approx. 20 or 30 words but you must keep it short and clear. Google and Yahoo may use this tag as your default description but it is not guaranteed. The description will show right bellow the title of the link on the SERPs. It is important to have a proper description because users will decide whether to click into your site by reading your description, therefore you should spend considerable time fixing this tag.
<meta name="DESCRIPTION" content="The description would go in here" />
Of course, both the Title and the Description Meta tags must be compelling, but the Title tag has special relevance, because so many search engines use the Title exactly as it appears on your page. Some search engines will use the site description that you give in the Meta Description tags, but others will not. For this reason, the title of the site is more important than the site description.
The use of a long title (up to 70 characters) on each page builds a more compelling reason to visit a Web site. It takes a certain number of words to persuade someone to to take action, logic dictates that longer sentences have more opportunity to create that compelling argument.
People often scan headlines in brochures and magazines, even when they don't read all the information. In Addition, the matching words used on the search, with words on your title or description tag, will be displayed bolded on the search result pages. When it is longer, there are more words with which to "hook" a reader. If something catches the reader's eye as they scroll down a list of site titles, they will hopefully read the site description. If you have done your work, they will be hooked.
The Keywords tag can have as many keywords as you want, separated by commas. I know this tag is probably ignored by Google, Yahoo and MSN, but other crawlers use it so you might as well have it ready for them.
<meta name="KEYWORDS" content="one keyword here, another keyword here..." />
The Robots tag should only be necessary in case you want to block content from search engines, so it is not an important SEO tool. But you can also use it to make it clear that all Robots are allowed to go into all your web pages and search for indexable content.
To prevent all robots from indexing pages on your site, you'd place the following meta tag into the head section of your page:
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
To allow other robots to index the page on your site, preventing only Google's robots from indexing the page, you'd use the following tag:
<meta name="GOOGLEBOT" content="NOINDEX, NOFOLLOW" />
To allow robots to index the page on your site but instruct them not to follow outgoing links, you'd use the following tag:
<meta name="ROBOTS" content="NOFOLLOW" />
To allow robots to index the page on your site but instruct them not to index images on that page, you'd use the following tag:
<meta name="ROBOTS" content="NOIMAGEINDEX" />
To allow all robots to index all contents and all links on your web site you'd use the following tag (not necessary):
<meta name="ROBOTS" content="INDEX, FOLLOW" />
The Open Directory Project DMOZ.org is the oldest and the most respected web directory, and the Google Directory (not the search engine) is a copy of it. In other words, to be in the Google Directory you must be first in DMOZ. And, as long you are in DMOZ you will be also placed in the Google Directory.
In addition, in most cases, the Title and Meta Description used by DMOZ (which could be the one you used when submitting your site to DMOZ or the one approved by the DMOZ editorial process) will be by default copied over to the Google directory and to the Google search as well, and will overwrite your Title and Meta Description tags described above. This might be a big problem if you want to validate keywords in your Title tag once, in most cases, the DMOZ directory will only place your name in the Title and nothing else. In any case, if you do not want Google to use the title and description present in the DMOZ directory (and of course, this will only apply in case your web site is already submitted to the DMOZ directory) you can use the NOODP tag that should be placed in the header area of your index file. It should look like this:
<meta name="ROBOTS" content="NOODP" />
If you want to submit your web site to some other good directories and search engines you can use the Free URL Submission Tool.
It is important to note that Search Engine Optimization is way more than simply including the META TAGS explained above in your code head area. Only by using an organized set of HTML tags (H1, H2, H3... H6) properly arranged throughout the entire code, will allow the contents of a web site to get indexed quickly and correctly relating to the specific keywords that you selected.
The H tags are one of the most important feature that can be used to improve search engine optimization. Every web page should have one H1 tag with a headline for the page. Under the H1 tag you can use H2 tags to organize the writing content. H3 tags can be used as subtitles under H2 tags and so on.
Example
H1 - New York City Airports
H2 - Brooklyn
H3 - JFK Airport
H4 - Directions
H5 - By subway
H5 - By bus
H5 - Driving
H6 - Fastest Route
H6 - Safest Route
H4 - Hours
H5 - Weekdays
H5 - Weekends
H2 - Queens
H3 - Laguardia Airport
H4 - Directions
H5 - By subway
H5 - By bus
H5 - Driving
H6 - Fastest Route
H6 - Safest Route
H4 - Hours
H5 - Weekdays
H5 - Weekends
Of course this is an example indicating how the H tags family works. A paragraph right bellow the "H6 fastest route" under JFK would be easily indexed by the crawlers as referent to the fastest route instructions for driving to the JFK airport in Brooklyn, New York.
These header tags were primitively introduced in HTML code with the intention of easily making different font sizes for headers. (H1) is the biggest title tag and (H6) is the smallest one. This considerably helps writing text in HTML code. Only latter on the robots were trained to use this tags to relate titles with its text on an attempt to improved the keyworded internet search. Of course, the font size and other design specifications of the H tags can be set nowadays using CSS.
HTML is a design language based in boxes, it's all about placing boxes on the screen with its contents inside. The boxes can have writing, pictures, background images, and all visual effects.
Initially HTML used TABLES to make these boxes but now we can also use DIVs. The difference is obvious. Below is an example of the code required to make a simple white box with gray border using TABLES:
<table width="200px" height="200px" valign="top" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border:1px solid #dddddd;"><tr><td width="100%" height="100%" valign="middle" align="center" bgcolor="#ffffff"> <font face="arial" color="#333333" size="10px"> CONTENT EXAMPLE </font></td></tr></table>
And now another example with the same effect but using DIVs:
<div class="example"> CONTENT EXAMPLE </div>
The content of either box ("CONTENT EXAMPLE") is the same but the code around it is what makes the difference. Using much less code, DIVs are much better for the search engine robots to locate and read the contents of a web site. It also makes it much easier for someone to edit or update the web site.
The class used on the DIV will be its referrence to a separate style sheet file that will specify its properties like border, background, font, etc.
With much less code, your code/content balance is much better when using DIVs. Google recommends that the less code and the more content is the better.
A Document Type Declaration (DocType) is required to be present at the very top of every web page, in the first line of code, prior to the head area. DocTypes are a key component of compliant web pages, without specifying a DocType, your HTML will not be validated with a DTD (Document Type Definition) and your document will be rendered (loaded) in "Quirks Mode."
But what is Quirks Mode? Back the old days, the most used browsers (Netscape Navigator and Internet Explorer) were developed in a total different way one from the other and both support did not match the W3C standard (or, indeed, each other).
The W3C standard is the World Wide Web Consortium (www.w3.org). An international consortium leading the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.
Standing far close from the W3C standard, Netscape 4.0 and Explorer 4.0 could never open web pages equally. To make sure that a website rendered correctly in both browsers, web developers had to code according to the wishes of these browsers so web sites were then forced to be made without following the standard as well in order to show properly.
When standards compliancy became relevant, browsers developers as well as web designers faced a big problem. Moving everything over to the standards would then make most of the web sites load incorrectly once they were coded based on a wrong supported browser. On the other hand, not moving closer to standards compliance would perpetuate the general confusion.
That's why a DocType was then introduced to specify if that web site was developed prior or after the change. The browsers would then check the Doctype prior to rendering the site. If the web page doesn't have a DocType it means that it was developed prior to the DocType introduction and will be interpreted in "quirks mode."
All browsers needed two modes: Quirks Mode for the old unregulated code and Strict Mode for the standard. Explorer Mac was the first browser to implement the two modes, and Explorer Windows 6, Mozilla, Safari, and Opera followed suit. Netscape took too long to adapt to the new rule therefore it is pretty much a dead browser nowadays. But the new version of Netscape Navigator has shown to be an excelent browser, it seems to work faster then Mozilla!
If the web developer is savvy enough to include a DocType, he would, of course, use Strict Mode, which is the way to go in order to have a code fully compatible with the W3C standard. An XHTML Strict DTD is the most strict DTD available: no deprecated tags are supported and the code must be written correctly.
I use Strict Mode (DocType XHTML 1.0 Strict) in all my web sites, which means that my web sites will always be compatible. All enhancements in the new Internet Explorer 7, for example, only work in Strict Mode!
Another DocType options is the Transitional Mode (DocType XHTML 1.0 transitional) which is almost Strict Mode but yet not 100% compliant with the standard. The reason why some developers use the Transitional Mode, to me, is simply because they were not able to code in Strict Mode which is a little bit tricky and harder to deal with.
Note that if a Strict DocType is preceded by an xml prolog, the page will show in "quirks mode" on Internet Explorer 6, so it is not a good thing to have on your site. And this behavior has been actually removed from Internet Explorer 7.