For a given web page, what is the order of appearance in the HTML code for SEO?

Question

In terms of SEO, we typically want to put the most important content as near to the top of the HTML code as possible. This means that the order of visual appearance will differ from the order of appearance in the HTML code.

For example, a typical search results page will contain the following elements:

Order of Visual Appearance

1. Header – logo, content and location search text fields, search button
2. H1 tag
3. Number of results
4. Left bar – Navigation links
5. Additional navigation links
6. Breadcrumb in center column
7. Content/results(contains one Google AdSense ad)
8. Right column – this is a placeholder that currently contains one Google AdSense ad, and a social media linking widget. This can be used to display related results and other content
9. Related affiliate results based on the search parameters
10. Results paging links

Order of HTML code

1. H1 tag,
2. Number of results
3. Center column, Content/results (contains one Google AdSense ad)
4. Affiliate results
5. Breadcrumb
6. Left bar – Category and sub-category links
7. Right bar
8. Results paging links
9. Footer
10. Header – logo, content and location search text fields, search button

My question sits around where to position the header section in the code. As you can see, the H1 tag and results are first nearest the top of the code. Common artifacts across various pages such as navigation and header are position nearest to the bottom.

Is this order consistent with suggested technical SEO coding practices?

Answer 1

The good news is this.

You do not have to worry about it.

Google and I am sure Bing and others use the HTML DOM object model to analyze one or more pages to determine what HTML elements are repeated from page to page and therefore can easily tell header, footer, and sidebar elements (for example) and separate it out from content. They have been doing this for a fairly long time and therefore are very good at it by now.

For semantics, this becomes extremely important for the search engines to be able to do. The important elements for semantics are the title tag, the description meta-tag, any link text, content, and the content block surrounding the link text. Nav links are a different animal. Be traditional and use About, Contact, Help, and so on. That really helps. However for other links it is best to use a sentence or fraction of a sentence that contains the subject, predicate, and object.

Make the title tag a complete sentence. Make your h1 tag a more verbose title tag without being an exact or too close a copy of the title tag or it will have no effect and can be ignored as a result. Your title tag should be about 45-50 characters (512 pixels is the actual measure). Your h1 tag more complex and longer. Use only one h1 tag. Make your description meta-tag even longer and more descriptive than the h1 tag but no longer than 170 characters. Subsequent header tags should reflect an organizational hierarchy. Keep in mind that header tags are important for semantics. So is the first sentence of each paragraph. These are semantic signals that get weighed a bit more heavily with the title tag weighed most heavily as well as any inbound link.

Google does not do direct keyword matches despite the impression that SEOs make. Any keyword match is a natural incidental effect of semantics. With that in mind, the title tag, description meta-tag, and content are matched more readily.

Be conversational and natural when creating content. Adjust your work after the fact once the page settles into the SERPs. It can take a few weeks for this to happen. No one gets it right the first time out so do the best you can and imagine how the page could be better once time has passed and you can look at it with metrics and a fresh eye.