16

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.

The question

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 <title>, <header> and <h1> elements.

  • 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
Improve this question
6
  • Do I understand you correctly that you are looking for documentation if&how search engines use the outline? (and not for advice which markup to use, unrelated to SEO)
    – unor
    Commented Feb 26, 2014 at 5:06
  • @unor I want to learn why the technique used on the MDN / Dart documentation works and if I am missing any key knowledge. They seem to rely upon <title> to provide context. For example, is it a bad idea to include the same <h1>User Guide for Ubermachine</h1> on every page where the topic heading is presented with <h2>Getting Started</h2>... or should the outline begin with <h1>Getting Started</h1> with an accompanying <title>Getting Started | User Guide for Ubermachine</title> to provide useful context for search engines. This is an SEO question.
    – Lea Hayes
    Commented Feb 26, 2014 at 6:43
  • If there were 2 separate products, then it is very likely that there would be 2 user guides containing their own "Getting Started" topic. Hence part of my concern with the MDN approach and why I want to know whether <title> provides enough context.
    – Lea Hayes
    Commented Feb 26, 2014 at 6:45
  • 2
    I wouldn't worry about search engines. If you're thinking at this level, the rest of your site will probably be technically fine, and good enough for search engines. Think about your users instead.
    – John Mueller
    Commented Mar 4, 2014 at 22:06
  • 1
    You did not mention the URL. That is also an important mechanism for human and robot friendliness. For example, while your two MDN example <h1>s are inconsistent re. context, both of their URLs include /web/guide/html/ before the page-title.
    – Martin F
    Commented Mar 5, 2014 at 0:47

3 Answers 3

Reset to default
8

During my extensive web searches I have found a quote which I find useful and suspect that future readers of this question will also.

Use <h1> for top-level heading

<h1> is the HTML element for the first-level heading of a document:

  • If the document is basically stand-alone, for example Things to See and Do in Geneva, the top-level heading is probably the same as the title.
  • If it is part of a collection, for example a section on Dogs in a collection of pages about pets, then the top level heading should assume a certain amount of context; just write <h1>Dogs</h1> while the title should work in any context: Dogs - Your Guide to Pets.

Original Source: http://www.w3.org/QA/Tips/Use_h1_for_Title

The above quote seems to suggest that the document-level <h1> element can assume that the context of the current page which is defined using the <title> itself. So presumably if there were multiple pages with the exact same <h1> then this would be okay...

<title>Getting Started | Guide | Uber Product - Company Name</title>
<h1>Getting Started</h1>

<title>Getting Started | Guide | Other Uber Product - Company Name</title>
<h1>Getting Started</h1>

See Also: <title>: the most important element of a quality Web page

Before accepting an answer I would like to wait and see what others think.

Improve this answer
1
  • Nice question updates and follow-up answer. Maybe others will chime in, if not accept your answer if you think it's the right one.
    – dan ♦
    Commented Feb 28, 2014 at 23:16
1

I would dispute the use of a H1 or any heading level for the 'Product Name' in the header.
The H1 represents the title of the page not the product, application or site.
Both for Accessibility and SEO purposes a repeated H1 on every page would be detrimental. Unfortunetaly in this case there is no semantic HTML tag that means 'site title' so the only option is a <div> or <p> or perhaps even a <strong> tag to give it some semantic emphasis. 

<main>
  <header>
    <div>Logo</div>
    <div>Product name</div>
    <nav>
      <ul> ... </ul>
    </nav>
  </header>
  <section>
    <h1>Getting started</h1>
    ...content
  </section>
</main>
Improve this answer
0

There is not one right answer, there are different options.

Below are a few options, but all of them have pros and cons:

This option is more or less the one you presented, but shows a bit more headings and where the content would go, plus the idea that the logo, would be a more complex element than only the image/text, it would have all the related elements to make an impression as the personality of the company, that why the section. Again. it could not be a section, but just a div.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <section>
            <a id="logo" href="http://example.com">Company Name</a>
        </section>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product Name</h1>
            </header>
            <p>...</p>
            <header>
                <h1>User Guide</h1>
                <p>...</p>
            </header>
            <p>...</p>
        </main>
    </body>
</html>

This next one introduces the main tag to show what is the relevant part of the page. This tag is still sketchy on support and future, but gives a clear indication that navigation has nothing to do with the product or page. The section tag could be other container and main could be article for some people.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <section>
            <a id="logo" href="http://example.com">Company Name</a>
        </section>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product Name</h1>
            </header>
            <section>
                <header>
                    <h1>User Guide</h1>
                    <p>...</p>
                </header>
                <p>...</p>
            </section>
        </main>
    </body>
</html>

The next one uses article since most people are inclined to use that one.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <article>
            <a id="logo" href="http://example.com">Company Name</a>
            <nav>
                <ul> ... </ul>
            </nav>
            <main>
                <header>
                    <h1>Product Name</h1>
                </header>
                <section>
                    <header>
                        <h1>User Guide</h1>
                        <p>...</p>
                    </header>
                    <p>...</p>
                </section>
            </main>
        </article>
    </body>
</html>

I would use something like the next one, since I'm very modular and block oriented, so each element would be independent from a database perspective only related by relevant keys. Although I most probably would skip the section tags.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product name</h1>
            </header>
            <section>
                <header>
                    <h1>description of product</h1>
                </header>
                <p>...</p>
            </section>
            <section>
                <header>
                    <h1>user guide</h1>
                </header>
                <p>...</p>
            </section>
            <section>
                <header>
                    <h1>Getting started</h1>
                </header>
                <p>...</p>
            </section>
        </main>

    </body>
</html>

and still, there are more options.

Improve this answer
1
  • 2
    They all look overly complicated to me.
    – Martin F
    Commented Mar 5, 2014 at 0:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.