CODEWITHSUNDEEP
htmlbrowsersearch-enginehtml-heading
deathlock
deathlock

Reputation: 2837

Proper way to use h1? (Regarding document outline and SEO)

I'm still trying to familiarize myself with HTML5, and there's this stuff which feels a bit confusing....

I once read in Jeremy Keith's book and HTML5 Doctor (via this question) which say that HTML5 makes it possible to use multiple h1s. In HTML5, each section can have its own heading element so it is okay to have more than one h1. I've seen a Wordpress theme framework, "underscores", which seem to apply this in the fullest.

However, this may seem to pose problem for older browsers (yet to support HTML5) in defining the site structure/document outline. Also, it poses problem for SEO.

I stumbled upon Matt Cutts's (from Google) video and re-read Keith's book which recommend limiting the use of h1 and use the conventional document outline (only use one or two h1 per page, followed by multiple h2, h3, etc). Matt Cutts also imply that multiple h1 is not too good for SEO.

However,

So my question is, if I want to:

Which one should I use: multiple h1s (the way it is done in HTML5) or the conventional way?

This HTML5 one (example taken from HTML5 Doctor):

<h1>My fantastic site</h1>
<section>
  <h1>About me</h1>
  <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
  <section>
    <h1>What I do for a living</h1>
    <p>I sell enterprise-managed ant farms.</p>
  </section>
</section>
<section>
  <h1>Contact</h1>
  <p>Shout my name and I will come to you.</p>
</section>

or the conventional way?

<h1>My fantastic site</h1>
  <h2>About me</h2>
  <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
    <h3>What I do for a living</h3>
    <p>I sell enterprise-managed ant farms.</p>
  <h2>Contact</h2>
  <p>Shout my name and I will come to you.</p>

Upvotes: 9

Views: 1402

Answers (3)

unor
unor

Reputation: 96567

deathlock, your second example doesn't contain any sectioning elements. However, you could use sectioning elements with headings other than h1. I think that's the point of your question:

h1 in every sectioning element

<section>
  <h1>…</h1>
  <section>
    <h1>…</h1>
  </section>
</section>

or "calculated" heading level

<section>
  <h2>…</h2>
  <section>
    <h3>…</h3>
  </section>
</section>

Semantically/technically, they are the same.

SEO shouldn't be a problem, because "h1 everywhere" will be (and already is) used all over the web, and the major search engines know this. If they want to support HTML5, they have to understand the outlining algorithm. I bet that their crawler/APIs already correctly calculate the real heading level, like the HTML5 outliner does, for example.

The only reason why you'd want to use h2-h6 as sectioning element heading would be old accessibility software, e.g. screenreaders. They usually offer an outline menu, so the user can jump directly to a certain heading. So if you always use h1, older screenreaders, that don't know HTML5, would announce all headings as h1, because they don't calculate the correct outline levels. However, Jaws 13 for example (current version of a screenreader), only gets "h1 everywhere" for HTML5 correct in IE, AFAIR, and it gets confused if you use other heading levels in a HTML5 page. This is, of course, a bug, but it's a nice example that sticking to the "old way" will not always work for newer software.

So you might get problems either way.

In my opinion you should stick with what the HTML5 spec recommends, and this would be: use h1 for all sectioning element headings. Because this specification is what future user-agents, accessibility tools, search engines and other services/softwares use to build their product.

However, it depends on your use case, of course. If you know your visitor statistics, you should use them to make the right decision for your special case. E.g. if your site will not live for many years in the future, use what is now best supported.

Upvotes: 2

LetterEh
LetterEh

Reputation: 26696

Use the new format. Plenty of people will use h3s or h2s, and that's perfectly fine as well.

In fact, they'll use the section or article or header or footer elements offered by html5, and then use h3 or h4 as headings for that document-segment (for fear of SEO penalties / legacy styling|layout quirks).

And that's fine, too.

If you watch Cuts' video again, he says to keep the h1 use to a minimum -- only using multiples when they're really warranted.

That hasn't really changed at this point.

Google isn't going to murder you for having multiples. Google IS going to expect each one to mean that there was a fundamental change in content.

That's true whether or not you have the sectioning (section/article/etc) elements in there or not.

Google has also gotten to the point where they're properly spidering AJAX-only, or JavaScript-dependent websites, and have their own rich-content metadata system... ...they're sophisticated enough to parse section or article.

Worry more about the quality of the content, and if you're ready to take it on, the Google-specific metadata which they use for search-results, etc... ...and let Google worry about navigating the semantics (as long as you're using them well, and not doing anything shady).

Lesser crawlers, who knows... ...but that's on a per-crawler basis, and most people only need to be concerned with Google and Bing and Yahoo, with other crawlers either feeding off of Google, or being very domain-specific (like if you want to rank highly on an opt-in, car-rental crawler for some reason... ...at which point you should be supplying an XML/JSON feed of some sort, anyway).

Upvotes: 5

Megayeine
Megayeine

Reputation: 38

The best way is to use HTML5 and use this link to make them work in the old browser since Google is ready your website way better and consider you use new technology (so that your site is better) if you use the new tags.

 <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Put it in the head section of your site and it'll work fine for old IE versions

Upvotes: -4

Related Questions