Site Structure
Site Hierarchy
The most broad way in which a site is structured is through its page hierarchy. The hierarchy can be seen most clearly in its URL structure. The slashes in a URL imply a nested folder structure, for example http://domain.com/top-level-topic/specific-aspect.html. Having a clear site hierarchy helps both humans and computers navigate the site clearly. A site with 200 .html files in its root has little way to distinguish related topics.
Fundamental Pages
Context: by saying these pages are fundamental, I mean this in regards to the type of website that the SEOer is most likely to be working on (es.g. local businesses, organizations).
These fundamental pages are, I propose, the pages that every site in context should have, and that have their own special rules regarding on-page optimization like titles, description, and structured data.
- Home
/ - About
/about - Contact
/contact - Blog
/blog - Sitemap
/sitemap - Testimonials/Reviews
/reviews - Shop (as needed)
/shop - Various legal necessities. e.g.
/terms-and-conditions
Keyword Pages
Every other page is a keyword page. That is, all non-fundamental pages should exist to signify the site's relevancy to a specific term. Pages neither fundamental nor keyworded can negatively affect the site's ranking - they create bloat. These pages include blog archives
Landing pages are keyword pages which are not listed on a menu - targeting longtail keywords.
TODO: Landing Page structure/site elements
Page Hierarchy
HTML(5) defines the structure to be used to establish a document outline. Below is an example of a properly-structured page that uses the HTML document model to establish a hierarchy parseable by search engines and well-organized to humans.
<!doctype html>
<html>
<head>
<title>HTML Document Outline</title>
<meta name="description" content="Defines an HTML document outline, including meta-information & sectioning elements." />
</head>
<body>
<header>
<h1>AboutHTML.com</h1>
<nav>
<h1>Main Navigation</h1><!--*2-->
<ul>
<li>Tags</li>
<li>Document Outline</li>
</ul>
</nav>
</header>
<main>
<h1>The HTML Document Outline</h1>
<p>Lorem ipsum</p>
<h2>Technical Definitions</h2>
<dl>
<dt>Document</dt>
<dd>Lorem ipsum</dd>
<dt>Parsing</dt>
<dd>Lorem ipsum</dd>
</dl>
<section>
<h1>History of the Document Outline</h1>
<p>Lorem ipsum</p>
<h2>Ideal Beginnings</h2>
<p>Lorem ipsum</p>
<h2>Trouble in Paradise</h2>
<p>Lorem ipsum</p>
</section>
<section>
<h1>Modern Implementation</h1>
<p>Lorem ipsum</p>
<h2>How to Structure a Document</h2>
<p>Lorem ipsum</p>
<aside>
<h1>Caveats</h1>
<p>Lorem ipsum</p>
<img src="xyz.svg" alt="A diagram of the document outline" title="Note the different line colors connecting the nodes" />
</aside>
</section>
</main>
<footer>
<h1>Additional Information</h1><!--*2-->
<nav>
<h1>Quick Links</h1><!--*2-->
<ul>
<li>Etc</li>
</ul>
</nav>
<section>
<h1>About AboutHTML.com</h1>
<p>Lorem ipsum</p>
</section>
</footer>
</body>
</html>
*1: Structured data includes
- Author & Publisher Markup
- Open Graph tags including
- Featured image
- Facebook page URL
- Schema.org markup in JSON+LD format
*2: This h1 would not be visible to standard users but enhances the page's outline and accessibility.
Running the above document through the html5 outliner produces the following outline:
1. AboutHTML.com
1. Main Navigation
2. The HTML Document Outline
1. Technical Definitions
2. History of the Document Outline
1. Ideal Beginnings
2. Trouble in Paradise
3. Modern Implementation
1. How to Structure a Document
2. Caveats
3. Additional Information
1. Quick Links
2. About AboutHTML.com
which is more or less what a human would create when reading the generated document. The header and footer imply the page's position in a larger structure, that of the site. They are still, however, part of the document regardless of the fact that most humans filter them out after the first look over the site. At this point, each page remains a distinct document and browsers are required to parse them that way. It may be at some point in the future that browsers are trained to ignore the header and footer and only re-render them as needed, but we are not currently at that point (2015).
The concept of this outline most foreign to traditional SEOers is the existence of multiple, even liberal h1 tags. First note the existence of the doctype declaration at the beginning of the document. It's not "HTML 4.01 transitional" or any permutation thereof. It simply states the doctype as HTML. The current (2015) version of HTML is 5 which is the first 'living standard'. This means that subsequent versions will not require documents to declare the version in which they were written. HTML 5 is the first version of HTML to support sectioning elements, the understanding of which is crucial to seeing why multiple h1s are possible, even preferable.
Sectioning Elements
Sectioning content elements define a new section of the document. They may be implicitly created by hX tags but explicitly defining them is clearer and allows more styling freedom. Each time a new sectioning content element is nested, it creates a new header hierarchy. Therefore, the appropriate header tag for each section is an h1. (If you are not using HTML5, the legacy hierarchy sitll applies.) The sectioning content elements are: body, article, section, nav, and aside.
Note: The header,main, and footer elements are not sectioning elements by themselves but they semantically distinguish parts of the document. This explains why that while there is an h1 in the header of the above document, it renders as the same outline level as the h1 that titles the main section of the document.