Animation


DIVs vs. Tables

Float Layouts

Inline Blocks

Block Layouts


Centering

Split Bkgrd

Graphic Borders

Horizontal Lists

CSS Colors


.htaccess

Block IPs

Down for Maintenance

Page Redirect

Custom Error Pages


Escaping query strings

PNG transparency

Google App testing

Flash Optimizing

Avoid AS Statics

SEO Optimization



Using HTML tags for SEO

A good web site needs more than good website design. It also needs marketing.

Using the correct HTML tags can greatly increase your website's search engine rankings. This is because HTML has tags that describe your data/content. Below I will go into detail of the philosophy behind HTML and how its tags are your best friend when creating search engine optimized websites. First, some definitions:

SEO
Search Engine Optimization
Search Engine Optimization
The process and result of creating a web page so that is it found by major search engines and indexed by them such that the page returns high in search results. SEO is an continual process to ensure that once a high ranking is attained that it is preserved. SEO is primarily done by the careful selection of keywords presented as the page's content within a carefully selected construction.
Keywords
"Keyphrases" is also an applicable term. Both terms refer to words that represent the subject matter of a page or the purpose of the page. A page may have subject matter different from its purpose and part of the art of SEO is choosing the best keywords to meet the goals of the web page.
Keyword placement
Where key words are placed on a web page. More accurately though, keyword placement refers to where keywords or keyphrases are placed in HTML code.
HTML
HyperText Markup Language is the code read by a client (browser or search engine robot) to render a web page. HTML is for creating documents. HTML is not for creating keyword lists.

Reading my little definition list above you can see where this article is heading. The last definition sums it up nicely. Put another way, use HTML the way it was intended and search engines will reward you.

Document structure

HTML describes documents. Documents, of course, exist in the real world. Usually in paper format. They have titles, headers, paragraphs, images, and many other components. Titles and headers describe to the reader what the content is about, ie: the subject matter. The content is described mostly in paragraphs. HTML has tags to describe the same things. HTML provides for content and also tags to describe the content which make HTML an excellent method to describe real world documents.

HTML tags to describe a document

There are several HTML tags that are very effective in describing key parts of your document but unfortunately are not used to their fullest potential. Here are a few:

<title>
The title tag could be the most important tag of your document. It can tell the subject of your web page or act as a summary or be a name. Be sure your title is accurate and concise. It is probably ok to include a subtitle in the tag to help narrow down the page content. For example: <title>Up With A Bang! web resources for new developers<title>.
<h1><h2><h3> etc
Header tags divide your page content by topic. They are therefore an excellent tag that describes your content. Search engines like them too. Some people are put off header tags because of their default formatting. However the formatting can be changed using style sheets. So any time you have a header, use an H# tag and format it the way you want. Make sure the header accurately titles the content that it heads. It is possible that some search engines want to see a <p> block under a header. So it is a good idea to put some actual content under headers and not just use them as key word lists.
<p>
This is the content tag for all documents. Presumably the information that you are providing to visitors is text presented in a paragraph. Of course you can have as many paragraphs as you want in a document and preface them with headers. Just like a real document. Search engines love this format because it clearly lays out what your site is about and how much content you have related to it.
<dl>
A definition list is a great example of HTML's basic meta data tagging. By specifying a definition list you are telling the client that you are defining terms. This is probably the best tag for telling a search engine what you are talking about. You are saying "This is a definition of X". How else could be me more clear? (did you notice this page uses two definition lists?)

More details below the bread and butter...

Search Engine Optimization

To state the obvious, search engines are interested in finding what the searcher is looking for. By definition, search engines are searching through documents. Documents that are expected to conform to the structure of a document with various sections correctly labelled (or "marked up"). If an HTML document does not have its sections correctly marked up then the search engine will have difficulty knowing exactly what the page is about. The page will likely rank poorly.

Besides just correctly marking up HTML documents, the contents of the markup must be suitable for the type of markup it is. For example a title must look like a title. Unfortunately this is too often not the case. We've all seen web pages where titles are just a list of keywords. Online and offline this does not a good document make. And that is just one example.

Keywords in HTML

Previously in this article I wrote about how great HTML is in describing a document both in terms of content and in describing the content. The benefits to search engines are enormous. If you want to spoil HTML's benefits you can do two things: 1) don't use the tags that describe your content, or 2) waste your meta data tags by polluting them with keyword lists. I think I've cover (1) quite enough so I'll move on to (2).

Search engines don't like spam. Populating your web page with keywords that are unnecessary to the purpose of the content will be considered keyword spam. Unnecessary keywords include keywords that don't accurately describe your content and excessive keywords. For example, making a list of every team in a league when your page is only dedicated to one team, is excessive and inaccurate.

Although it is important to use keywords there is a concept called "keyword density". It refers to the ratio of keywords to non-keywords on your page. If the keyword density is too high search engines start to get suspicious. The safest and most honest thing to do is to simply to only use keywords where they come up naturally when discussing your subject. Use keywords in grammically correct ways and don't make lists of them unnecessarily.

Often the front page of a web site is nothing more than a glorified menu with pictures and no informational content. Many times there is no suitable place to put a <p> tag. This does not mean that you cannot create a sound document. Afterall, a table of contents or an index is a document. In these cases use header tags and list tags. These are wonderfully symantec to the client and fit the requirements of any page layout since they can be styled with cascading style sheets. It is in these tags that you can put appropriate key words.

Often the greater picture and purpose of HTML is forgotten or never learnt in the first place. HTML is very powerful in describing a document and can be utilized to great effect in search engine optimization. The World Wide Web is build on particular standards and specifications and even though these specifications can be neglected to create a web page, the specifications are respected and preferred by the search engines. Using HTML tags that put meaning to your content is a successful method to achieve high search result rankings.

Did you find this article userful for your website?
If so, why not provide a link to it? Just copy the following to your web page:
      <a href='http://upwithabang.com/articles/html-document-tags.html'>
            Effective HTML for SEO
      </a>



Recommended Reading

Official HTML specification

Did you find this article userful for your website?
If so, why not provide a link to it? Just copy the following to your web page:

<a href='http://upwithabang.com/articles/flash-optimizing.html'>Optimizing Actionscript</a>