SEO - Use Proper Semantic Structuring in your Web Pages

What Are Web Page Symantics?

In the beginnings of the web, web pages were fairly simple and structured semantically. What this means is that the way the code was written for a page was interpreted and presented pretty much as it was written. For example, this simple HTML code:

Would output this in a browser:

The tag <h1> corresponds to a heading, and the tag <p> corresponds to a paragraph. The code used here has a direct relationship with the meaning of the content. With this kind of structure, it is fairly easy for a search engine to determine the most important parts of a document. For instance, the content in the heading tags most likely summarizes the content of the entire page, and is therefore the most important. The secondary heading tags (the content between <h2> and </h2>) most likely have to do with sub-sections of the page, making them less important.

Search engines can look at the relationship between multiple elements on a page to determine the general content of the page, and therefore if a page would be relevant for a particular search phrase.

Over time, however, web pages have become much more complex as the presentation of a web site has received more emphasis. The positive side to this emphasis is that we have more tools to create web pages that look exactly the way we want them to. The negative side is that it is easy to give a particular look your web page while completely ignoring the structure, giving search engines no clues as to which bits are more important on a page. For instance, the following HTML and CSS code will display nearly the same way in a browser as the code we just reviewed above:

The difference, however, is that this code tells a search engine nothing about the importance of certain parts of the content. To the search engine, it's just a bunch of text. No headings, no sub-headings and no paragraphs. With this kind of structure, the search engine has to make its best guess, but that's not good enough.

An Example of Proper Web Page Symantic Structuring

The trick is to incorporate semantics with your presentation. Said simply: use titles, headings and paragraphs to structure your content. Here is an example of a web page with proper semantics, as in the following web page code:

This page is squeaky clean when it comes to semantic structure. You're telling the search engine exactly what the page is about multiple times, and that's exactly what the search engine wants. Notice that the keyword phrase "search engine optimization" appears in the title, headings and paragraphs. This is because I am targeting that keyword for this web page.

Keyword Focus

Focus each web page on a single keyword

There's typically not enough room in a single web page to focus on multiple keywords. The more words you have in your title and headings, the less significance each word has to a search engine. For instance, a web page with the title Search Engine Optimization and Advertising on the Web will have less significance than a web page with the title Search Engine Optimization in regards to the keywords "search engine optimization".

If your page has multiple subjects, consider splitting the content into multiple pages and give each page its own set of semantically correct HTML tags. The benefit from doing this is twofold: 1) The resulting pages will be more finely targeted and 2) You get multiple content pages, which is better than a single long document.

Using the Right DOCTYPE For Your Web Page

Using the right DOCTYPE on your web pages

A DOCTYPE is a small chunk of code that you add to the top of a web page that tells a browser (or search engine robot) what kind of code is being used on the page. For instance, there are multiple versions of HTML, and in order for a browser to display the HTML code correctly, it needs to know what version you're using. Here is an example of a DOCTYPE:

Browsers are pretty good at guessing what version of code you are using, but there's better reason to use a DOCTYPE than just how the web page looks in a browser.

A DOCTYPE also tells the browser how much work it has to do in order to interpret the page. For instance, there are "transitional" DOCTYPEs and "strict" DOCTYPEs. The "strict" type of DOCTYPE tells the browser that you are using all the rules of the code, so it knows in advance that it doesn't have to guess about certain things. Ideally, this lets the browser work more quickly to display the page.

Search engine robots are the same as browsers in this sense. If they know in advance that they won't have to work as hard to understand the page, they will work more quickly, giving them more time to work on other pages on your site.

Use an XHTML strict DOCTYPE when you can

XHTML is virtually the same as HTML, with some minor differences. For instance, in XHTML you need to close all of your HTML tags, even tags that don't typically have an ending tag, such as the <br> tag, making it look like this: <br />.

There are some minor quirks to XHTML that may take a little work to circumvent, but on the whole it is identical to HTML. The difference, however, is that XHTML is structurally clean, or well formed, which means that for every opening tag there is a closing tag. This makes it much easier for browsers and search engine robots to interpret the code. An XHTML strict DOCTYPE looks like this:

Search engine robots will only spend a certain amount of time on each web page, and on each web site. By using strict XHTML, you give the robots a chance to do their work faster, meaning that they can get more indexing done on your page and web site.

The Importance of Code Validation

Validate your web page code

Once you've built your web page, you can validate it to make sure that your code is structurally correct. This will prevent the robots from getting snagged on some bad code.

There are some offline tools to do this, but the W3C (World Wide Web Consortium) ? the standard-makers for HTML and XHTML ? offer an online validator at validator.w3.org . This tool will point out parts of your code that might cause problems for browsers or robots.

Internal linking is critical

Inbound links will often get a search engine robot to your home page, but from there it's up to you to show them the way to the rest of your site. Internal linking - or, linking from one of your pages to another on the same site ? is the way to direct the robots.

Site maps guide search engines

One good strategy is adding a link to a "site map" on every page on your site. A site map contains a hyperlink to each one of the pages on your site. If your site has over 100 pages or so, you can split up the site map into several smaller pages.

Linking to a site map on every page means that on any given page the search engine robot is only 2 links away from any other page. Pages requiring several intermediary links to find will take longer for search engines to reach.

Another factor that comes into play with internal linking is the dispersing of PageRank amongst your pages. In this way, internal links work much the same way as inbound links. By linking one page to another on your site, you are helping to pass on PageRank to the other pages in your site.

Knowing this, a site map is not sufficient, since every page points to the site map, passing it a certain amount of PageRank and that single site map page points to every page, spreading it's own PageRank thinly across all the pages it links to. Creating a structure where each page on your site links to a small selection of other pages will allow the PageRank to disperse relatively evenly amongst all pages in the site.

Conserving Page Rank

Advanced technique: Conserving PageRank

Advanced techniques are used in order to "conserve" PageRank. Remember how I mentioned that PageRank is distributed on a voting system, and that each time a page links to another page, they give a certain amount of their vote - and thus PageRank - to the page? When you link from one page to another on your site, most of the time you want to pass the PageRank on, but sometimes you won't.

Take for instance a "member's only" page, which displays a log in for visitors not logged in (such as to search engine robots). A page like this wouldn't be useful to have indexed because it doesn't contain any real content, and therefore will likely not show up in search engines. Every time you send PageRank to one of these pages by linking to it, you dilute your PageRank by spreading it to a page that you don't actually want to be indexed by a search engine.

The way around this is to use the rel="nofollow" attribute in hyperlinks to the page you don't want to be indexed. This will keep PageRank from flowing to it, and will keep search engines from wasting time indexing the page.

Symantic Lesson Summary

Lesson Summary

In this lesson we discussed how to properly construct pages in HTML to allow the maximum coverage from search engines.

First, we went over how to structure your web pages semantically, which tells the robots exactly what they're looking at. Next we covered how focusing on a single keyword can be more powerful than focusing on multiple keywords because a search engine will see the page as more relevant for the term. Then we discussed how the right DOCTYPE tells robots what they need to do in order to index your page, which inadvertently gives visitors a small boost in speed. The final structural elements we covered were internal links, which help guide the robots through your site.

In our next lesson, we discuss how to help the robots further by reducing the amount of code you use on a web page, giving your real content greater importance to the search engines