SEO Lesson 2

by Ryne C Allen, WebPaws.com

Search Engine Optimization starts at the inception of your web page or site and evolves with a purpose or direction, appropriate content, semantic structuring of the HTML document and then formating this document into an attractive presentation using CSS.  All the while following known web standards to produce a solid foundation in which to further market your web page.

Business websites should be part of the business’ marketing plan or broader yet, the business plan. Even non-business websites should have a plan or written conception. In lieu of a previous written plan, the minimum suggestive guide would be a “statement of purpose” for your website followed by some basic marketing research to be used in the development of your website.

The statement of purpose defines the reason to create your website (sell products, disseminate information, provide a service, become a portal, promote a business, collect data, etc.), the primary purpose of your website (transactional, informational, social, promotional or a hybrid of purposes) and what measurable goals you expect after 3 months, 6 months and 1 year from launching your website. This information is critical to having a successful website, one that meets your goals and expectations. You develop and write content to meet your website’s purpose. This is your primary focus for the content you add to build your website. If you lose focus of your primary purpose, then your website will not meet the goals you have set and will not rank well for its primary purpose.

Examples statement of purpose and results:

Organization: Humane Society

Primary Purpose: Rescue animals, care for them and find them good homes

Website Purpose: Promote & find sheltered animals good homes, donations

Goals: 3 m – 3% adoptions, 6 m – 10% adoptions, 1 year – 25% adoptions

Results: 3 m – 2% adoptions, 6 m – 7% adoptions, 1 year – 35% adoptions

Website: Example Website – http://www.webpaws.com/mwhs/

In order for this example website to be successful, the site needed to be designed around the animals rescued and up for adoption. In this case, cats where the primary animals rescued and the primary focus of the website. So visitors looking to adopt a pet cat can easily navigate within the example website and learn about the different cats up for adoption, get attached or attracted to a certain cat, fill out a request form (a lead) which might motivate them to go in person to the shelter and adopt their new pet (a conversion).

Now that you have the focus of your website content, you can start to assemble the primary pieces into an SEO friendly format or semantic structure. Developing good semantic HTML (HyperText Markup Language) structure is one key to a solid foundation for your website. Good HTML structure is based on communicating properly, using logic, order, in your content with semantically correct markup (HTML) structure. For example, if you have a heading, then use the heading element, beginning with the <h1> element. If you have a paragraph, then use a paragraph element <p>. If you have a list, then use a list item element <li>. If you are quoting text content, then use a blockquote element <blockquote>. If you are placing code examples in your content, then use the code element <code>. These and other HTML elements provide meaning to the content, making them semantically correct, in addition to providing a solid HTML foundation for your web page.  Expert SEO marketers will in addition to using correct semantically structured HTML elements, add appropriate attributes to these base HTML elements (tags) to fully optimize the content’s message and readability by user agents (web bots).  An example attribute would be:
<h1 title="Good SEO practices start with a solid HTML document">SEO Practices</h1>

Good semantic HTML practices require two things of authors:

1. To avoid the use of presentational markup (elements, attributes, and other entities) in the primary content of the document
2. To use available markup to differentiate the meanings of phrases and structure in the document. So for example, a book title would need to have its own element and class specified, such as <cite class="booktitle">The Adventures of Tom Sawyer</cite>. Here, the <cite> element is used because it most closely matches the meaning of this phrase in the text. However, the <cite> element is not specific enough to this task, since we mean to cite specifically a book title as opposed to a newspaper article or an academic journal.

The development and proliferation of CSS has led to increasing support for semantic HTML, because CSS provides designers with a rich language to alter the presentation format of semantic-only documents. With the evolving development of CSS, the need to include presentational properties in the basic HTML structure of your web document is now hurting your SEO in favor for proper semantic HTML structure followed by CSS design to appease both the automated user agents and human visitors or your web pages.

Proper semantic HTML is one key element to building an SEO friendly website. By providing a semantically rich HTML document (web page) it will yield additional value to your code in several ways:

1. First, it provides consistency in style across elements that have the same meaning. Every heading, every quotation and every similar element receives the same presentation properties, which in turn,.makes your HTML web page more intelligible to a wider range of user agents which range from web browsers and e-mail clients to search engine crawlers (“spiders”), as well as mobile phones, screen readers and Braille browsers used by people with vision impairments, but in this case, especially user agents as search engines bots

2. Second, semantic HTML frees authors from the need to concern themselves with presentation details. Such details would be left up to stylesheet designers, which would make better use of CSS (Cascading Style Sheets – a kind of type-setting and page formatting code) for the human visitor

3. A third advantage is device independence and repurposing of documents to reach or be viewed by different user agents. A semantic HTML document can be paired with any number of stylesheets (CSS documents) to provide the proper type of output to various computer screens (Web browsers), high-resolution printers, handheld devices, aural browsers or Braille devices for those with visual impairments, and so on

4. Additionally, these user agents may more easily find clues for developers to use possible web hooks of interest and add them in their projects or products. A web hook is a very simple server-side mechanism for web applications that allow users to do what they want with their data. You just let them specify the URI for various events that the application will use to pass data or information to in real-time

Developing proper semantic design of your content, followed by the appropriate design elements of the style sheets (CSS) makes it easier to follow the World Wide Web Consortium (W3C) web standards. You can check if your code meets the current web standards by checking these on-line validators:

· W3C X/HTML Validator: http://validator.w3.org/

· W3C CSS 2 Validator: http://jigsaw.w3.org/css-validator/

· W3C Semantic Checker: http://www.w3.org/2003/12/semantic-extractor.html

Please note, even if your web code is XHTML or CSS valid, it is not necessarily semantically correct. This still needs to be checked by a human, but the Semantic Extractor above aids humans (web developers) in their semantic HTML structure designs.

We now have a good map to help us develop a rock-solid foundation for our web page that will yield the most effective SEO performance in the Search Engine Result Pages (SERPs).