skip to Main Content

With SEO, semantics, and document outlines in mind, which tags are right (or the most commonly used) for site title and headings for other secondary sections (e.g. sidebar, related links)?

Example document:

<header>
  <h1>I'm Site Name, not the title of actual article</h1>
</header>

<aside>
  <h1>And I'm sidebar heading, ain't about the article of this page either</h1>
</aside>

<article>
  <h1>I'm the title of article, supposed to be what this page is all about</h1>

  <p>intro...<p>

  <h2>Subhead. Make site name and section heading a h2 tag, and I'm equal to them.</h2>
  <p>text of about the subhead...</p>
</article>

These are 3 guidelines that I have thought of:

Guideline 1: the way nobody does

  • strong tags on both site title and section headings.

Guideline 2: site title = article’s subtopics

  • h2 tag on site title; and
  • h3 tags on section headings

Guideline 3: just use one kind of heading tag

  • Any heading tag (most likely h2, h3 or h4) for both site title and section headings.

3

Answers


  1. Chosen as BEST ANSWER

    After more research (and sort of validation), I've come with a solution that appropriately (I hope) implies the hierarchy of importance to SEO.

    For article page

    • use h1 tag for article title
    • use h2 to h3 for sub topics
    • use h2 for site title
    • use h3 for aside titles

    for home page

    • use h1 tag for site title

    edit I agree with explicit usage of section on each subtopic as @unor's answered.


  2. You are doing it correct, but you should have only one tag on each page and include your most important keywords in it.

    Login or Signup to reply.
  3. Either you use h1 for each section (like in your example snippet), or you use the heading elements of the appropriate rank (corresponding to nesting levels of your sections).

    Both ways have their pros and cons, but the HTML5 spec encourages authors to use the latter way (probably because of old or non-conforming user agents).

    Following that advice, your snippet would be:

    <header>
      <h1>Site name</h1>
    </header>
    
    <aside>
      <h2>Aside title</h2>
    </aside>
    
    <article>
      <h2>Article title</h2>
    
      <section>
        <h3>Subhead</h3>
      </section>
    
    </article>
    

    Note that I added a section element for the implicit section started by the “Subhead” heading. This is encouraged by HTML5, too.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search