I have been studying this subject for several days and have found many conflicting suggestions with regards to search indexing. I am working on a project which has a lot of different pages ranging from simple product descriptions to in-depth user documentation.
I have broken this question down into sections since I feel that this will make it more useful for future readers of this question.
Some of my findings
Several websites seem to have assumed document outlines like the following:
1. Programmer's Guide (https://www.dartlang.org/docs/) 1. Getting Started 2. Concepts 1. Libraries 2. Fundamental classes etc.
I find it interesting that the above example does not utilise the
<nav> element with a suitable heading. I like the simplicity of the outline and being Google I am fairly certain that they know what they are doing when it comes to this.
But I am confused since the above outline makes no mention of "Dart". The only mention of "Dart" in the semantic sense seems to be within the main document
<title> element "Programmer's Guide | Dart: Structured web apps".
The MDN (Mozilla Developer Network) is another brilliant example of a website which follows this principal. Many of the
<h1> titles provide full context (Sections and Outlines of an HTML5 Document):
1. Sections and Outlines of an HTML5 Document 1. Untitled Section (nav) 2. Untitled Section (nav) 3. Structure of a Document in HTML 4 4. Problems Solved by HTML5
Whilst others do not make much sense out of context (Obsolete practices to avoid). For example, does the following HTML5 outline relate to CSS, HTML5 or C#... with just the document outline to go by, who knows!
1. Obsolete practices to avoid 1. Untitled Section (nav) 2. Untitled Section (nav) 3. Doctype 4. <meta> element and charset attribute
To make matters worst, what if the MDN contained 2 topics with the same (or very similar) title "Obsolete practices to avoid" where one is part of their CSS guide and the other is part of their HTML guide...
On the other end of the spectrum websites seem to use the main
<body>-level heading for the product name (Foo) or the topic container (User Guide for Foo). Where all subsequent pages then use
<h2> for the actual page title.
How do search engines infer the context of a webpage like those found on the MDN website using the DOM and the HTML5 outline?
What is the right way to markup the following HTML5 page so that Google can index the page in the suitable context? This includes usage of
- Company Name
- Product Name
- User Guide
- Getting Started
The most significant heading in the HTML which gets viewed in a web browser, should this represent the context of the entire website (Company Name or Product Name), the collection of topics (User Guide) or the actual topic in hand (Getting Started)?
My best guess
<!DOCTYPE html> <html> <head> <title>Getting Started | User Guide | Product Name - Company Name</title> </head> <body> <header role="banner"> <!-- Note: Lack of <h1> in here --> <a id="logo" href="http://example.com">Company Name</a> <nav> <h1>Site Navigation</h1> <ul> ... </ul> </nav> </header> <main role="main"> <div class="product-name">Product Name</div> <div class="document">User Guide</div> <h1>Getting Started</h1> <p>blah</p> </main> </body> </html>
Leading to the outline:
1. Getting Started