Proper way to use h1? (Regarding document outline and SEO)
browser, html, html-heading, search-engine
Solution
Use the new format. Plenty of people will use `h3`s or `h2`s, 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).
Problem
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 `h1`s. 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, - I previously never paid serious attention to site structure/document outline. So I never know how old browsers (pre-HTML5) read a site structure/document outline. There exists a HTML5 outliner, but I can't find outliner for HTML4. - Matt Cutts's video (regarding HTML5 and SEO) is published in 2009. I don't know if Google already support the new HTML5 way of outlining document. So my question is, if I want to: - Support older browsers (e.g. Firefox 3.0 and IE 6) to display correct site structure/document outline - Have a good result in SEO Which one should I use: multiple `h1`s (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> ```