seo html best practices

SEO HTML BEST PRACTICES

CONTENTSIntroduction.................................................................................................................................................................................. 2

Disclaimer................................................................................................................................................................................. 2

Definitions......................................................................................................................................................................................2

Structure......................................................................................................................................................................................... 3

Opening the code................................................................................................................................................................... 3

Headers ("H tags").................................................................................................................................................................3

Div order ("The danger of Floats").................................................................................................................................3

Closing elements.................................................................................................................................................................... 4

Nested elements.....................................................................................................................................................................4

Proper linking..........................................................................................................................................................................4

Content............................................................................................................................................................................................ 5

The Golden Rule of SEO.......................................................................................................................................................5

The Mantra of SEO.................................................................................................................................................................5

Keyword stuffing....................................................................................................................................................................5

Internal Linking......................................................................................................................................................................5

Strong elements......................................................................................................................................................................5

Image Alt Attributes............................................................................................................................................................. 5

Supporting Code..........................................................................................................................................................................6

HTML Comments................................................................................................................................................................... 6

JavaScript................................................................................................................................................................................... 6

CSS................................................................................................................................................................................................ 6

Code Bloat...................................................................................................................................................................................... 7

Closing............................................................................................................................................................................................. 7

Authored by Rich Missey, [email protected]

INTRODUCTIONThe internet is complex, global, and always changing. The number of people involved with the production and maintenance of HTML on global business website properties is constantly evolving. As a result, this document establishes recommended HTML standards from an SEO (Search Engine Optimization) point of view. It is not an all-encompassing document, nor is it a strict set of requirements. These guidelines are an attempt to inform and educate those unfamiliar with Search Engine Optimization in some of the ways to improve organic exposure in search engines such as Google and Bing.

DISCLAIMERThe information presented is generalized to all internet websites, based on my experience in the field of Search Engine Optimization. There are no guarantees associated to results within any timeframe associated with this information. The document may be freely distributed, so long as attribution is associated.

Please note that this document focuses on on-site optimization – those factors which can be controlled within the confines of a single web property. This document does not address any issues related to off-site optimization, such as link building, content marketing, etc.

DEFINITIONSThe following terms and expressions will be used extensively. This list ensures that the terms are being interpreted in the same manner by all readers.

Term Definitionelement Also referred to as a "tag", an element is the most basic HTML object. Examples include

div, p, img, a, and meta.Code bloat

Search engines read HTML the way we read words on a page – from the top down. "Code bloat" is the introduction of code that

1) Increases the amount of code in the final HTML2) Increases the ratio of user-focused text vs background HTML/CSS3) Pushes user-focused content farther down in source code

Context The meaning of a word or phrase considered along with all other relevant factors, including the content that comes before, the content that comes after, and the content that is linked to (or linked from) that content. For example, the word “path” can be used to describe a physical clearing allowing transit from one point to another, or a detailed plan on how to get from one point of a plan to another.

HTML Best Practices 2

STRUCTUREHTML is a structured language. This means that elements are arranged in a logical pattern. These patterns are critical, as they define the subject matter of the page and how that page is contextually associated to every element within that page and every element connected to that page.

OPENING THE CODEThe first elements of an HTML document are the DOCTYPE declaration, <HTML> element, and <HEAD> element (in that order). Within the <HEAD> element, the <title> element should be first, and then the <meta name="description"> element. All other head content should follow, and then the Head element closed with a </HEAD> tag. Immediately following the closing head element, open the body of the page with <BODY>.

HEADERS ("H TAGS")Header elements (not to be confused with Head section elements as indicated above) can be among the most over-used, oft-abused elements in website HTML. Header elements are designed to provide navigational and contextual relevancy. Header elements are not design elements. Headers should never be used just to "make it big and bold." Requirements for header elements include:

1) Proper nesting. When scanning the HTML of a page from top to bottom, header elements must flow in increasing order. You should never encounter an H2 before an H1, or an H3 before an H2.

a. The H1 is the single most important phrase on the page. It is the topic of that page, in its entirety.

b. Multiple H2s are allowed to break down the page content into smaller, thematically relevant sections.

c. H3s must always fall after an H2, and further break down the topic matter. In eCommerce, you rarely should ever go past H3.

2) Proper Positioning. The H1 should be at the top of the page content. The page content in this context is the point at which useful, unique, relevant information is presented. This does not include navigational elements, such as the main menu.

3) Proper style. Header elements are, by design, structural and intended to break up text. It is best practice to let a header element break copy into a new paragraph.

DIV ORDER ("THE DANGER OF FLOATS")The "Float" attribute in CSS opened the door to a massive array of design possibilities – and abuses. When floating elements, keep in mind that search engines read content from top to bottom. Secondary information should NEVER be presented above primary information in source HTML. This can severely skew the contextual analysis of a page. For an example of proper floating of elements to create a structured layout, see http://matthewjamestaylor.com/blog/perfect-3-column.htm.


http://matthewjamestaylor.com/blog/perfect-3-column.htm

http://matthewjamestaylor.com/blog/perfect-3-column.htm

CLOSING ELEMENTSIn XHTML, and in HTML 5, all elements must be closed. This means any element opened must have a corresponding closing element, or be self-closing. Examples:

The p opens a paragraph, and the /p closes the paragraph.

<meta name="note" content="Many meta elements self-close by including a trailing slash." />

Failure to properly close an element may have many side effects. The most severe is that the page layout will fail to render properly on one or more browsers. Another possible effect is that search engines will inappropriately establish context where none exists, because content has been created within a shared parent element (such as a div).

NESTED ELEMENTSWhen at all possible, keep element nesting to a minimum. Multiple layers of nesting introduce unnecessarily complex CSS rules, excessive code bloat, and make the code difficult to modify by others in the future.

Elements must be nested in such a way that they are closed in exact reverse order – the last element introduced must be the first element closed.

This is very wrong!

This is correct.

PROPER LINKINGNo page should be an island – unless it's specifically intended to be. Rare exceptions that fit this callout are email landing pages, affiliate landing pages, and some whitepaper lead gen pages.

When creating a new page, ask yourself from where that page is going to be linked. Ensure that it is linked, in context, from all necessary and relevant pages. With no links coming in, visitors and search engines will have no way to discover the content.

CONTENT

THE GOLDEN RULE OF SEOHide nothing. If there is any piece of content within the HTML that cannot be surfaced by the user, get rid of it. At best, it will provide no value. At worst, it can be interpreted as a Spam technique and introduce manual penalties.

THE MANTRA OF SEOContent is king. Content, in the form of text on the page, establishes relevancy, context, relationships, and authority on the web. Without content, a page (or site, or section of a site) will not rank effectively in organic results. Without rankings, there will be no traffic.

KEYWORD STUFFINGWidespread gaming of organic search has led to successive algorithm updates that have continued to flex and expand their contextual understanding. As a result, old guidelines of keyword usage no longer apply. There is but one rule of keyword usage:

Use a phrase as many times as it reads comfortably for the target user. No more, no less.

A phrase will usually have to appear on a page in order for that page to rank for that phrase, but excessive use of the phrase may actually cause a penalty against that page.

INTERNAL LINKINGWhere possible and appropriate, pages should be connected. Does page A discuss a topic that is discussed in further detail on page B? Create a link from page A to page B. This establishes the contextual relationship between the pages.

STRONG ELEMENTSIn HTML 4 and earlier versions, the element was used to make things bold. With XHTML and HTML5, the element has been deprecated in favor of CSS styles. Some have taken to using the element as a substitute. This is not correct. The element indicates that the phrase contained within that element is of significant importance. The element should not be used to simply bold something. For that, use a CSS class and a element.

IMAGE ALT ATTRIBUTESSearch engines are text-based. They cannot "see" image content. They rely on us to tell them what the image is about based on the surrounding content and the alt attribute of the img element. Alt attributes should be a two-to-five-word description of the image.

SUPPORTING CODE

HTML COMMENTSWhere possible, HTML comments (in the form ) should be kept to an absolute minimum. These comments introduce code bloat and may prevent valuable content from being evaluated. They may also reveal information that might be valuable to hackers.

There are generally two ways to control the rendering of HTML content:

1) URL Parameter. When this is used, adding a URL parameter such as ?htmlDebug=yes will tell the rendering engine to output HTML comments that aide in diagnostic purposes.

2) IP Firewall. If all requests from your development team come from either one external IP address or from a known pool of IP addresses, you can configure a server to only render certain content if the request comes from that IP address or IP pool.

JAVASCRIPTJavaScript is a powerful scripting language, and is used extensively throughout the internet in order to improve the user experience. However, there are some key things that should be kept in mind:

1) Use linked external JS files when possible.2) Avoid embedded JavaScript where possible. These embedded scripts (where functions and

variables are defined within the source HTML in <script> elements) can quickly contribute to excessive code bloat.

3) In-line JavaScript should be avoided at all costs. This usually is only encountered when trying to script an action tied to a link.

CSSCSS is mostly a consideration for designers, but there are a few SEO tips to keep in mind.

1) Keep nesting to a minimum. Multiple nested div tags contribute to code bloat and make it more difficult for designers to update HTML in the future.

2) Keep CSS in external style sheets. Relevant teams should have the ability to upload custom CSS files and reference them as needed.

3) If CSS MUST be embedded, it should be in the Head section in a single <style> element.4) Minimize the use inline CSS. This can quickly cause extreme code bloat. Inline CSS can be

helpful for diagnosis and design, but should be moved to an external file once completed.

CODE BLOATWhat is code bloat and why is it important? As mentioned in the definition above, code bloat pushes user-focused content farther down in source HTML. While this may not seem important, it should be noted that search engines will not always read all of the HTML for a page. The search engine may only read enough of a page to get what it believes is enough information to establish context, and then stop. For this reason, it is critical that code bloat is minimized and that user-focused content is presented as close to the top of the source HTML as possible.

In addition, the process of including all possible scenarios for a situation in source HTML, and then using JavaScript and CSS to control which of those scenarios are presented to customers, should be avoided at all costs. Server-side processing should decide which scenario is appropriate and return only the relevant HTML. For example, if there are a variety of error messages that may be displayed to website visitors under specific conditions, those error messages should not be placed within source code and hidden with CSS by default. They should only be injected by a server-side action or JavaScript action (perhaps based on a cookie response or URL parameter).

CLOSINGThere are thousands of SEO Experts around the world. Choose carefully. However, if your website is structured correctly at deployment, your path to organic rankings will be much faster and significantly more efficient.


seo html best practices

Documents