H1 vs H2 vs Other for website title/logo and SEO

Question

It is a common practice for front-end developers to put the website title or logo in H1 tag and the title in H2. But most of the time the title of the page/article is more important because it carries the content value. So my question is what is the best approach from semantic and SEO viewpoint. Examples:

• logo - H1, title - H1
• logo - H1, title - H2
• logo - H2, title - H1
• logo - other tag, title - H1

Provided other variants if you think they will have bigger effect.

Answer 1

I usually don't put the logo or site title in an H1. The way I like to look at it is that each page is a document. That document is about a particular subject, as reflected in the page title and also the main heading. The website itself is just the publisher of the document. So, semantically, it's incorrect to use the site logo or name as the main heading of each page. Logos are displayed prominently to remind the user where they are and for branding purposes, but they're not actually part of the content or document.

I mean, when you watch a news story you might see a little news channel logo in the corner, but the news story isn't going to be titled "CNN" or "BBC News". The headline will be about the story, not the network publishing the story. Likewise, when you read a magazine, only the article title is used in the heading, not the name of the publication.

It's also semantically incorrect to use an H1 tag for the logo/site name and one for the document title. Headings define the hierarchical structure of the content on the page; using one for the site name and another for the document title is like saying, this page has 2 main sections: "mydomain.com" and "contact us".

Answer 2

See Page #37 of Google's SEO Report Card document:

Most product main pages have an opportunity to use one <h1> tag, like the example above, but they're currently only using other heading tags (<h3> in this case) or larger font styling. While styling your text so it appears larger might achieve the same visual presentation, it does not provide the same semantic meaning to the search engine that an <h1> tag does. The product's name and/or a few words about its features are great to have in an <h1> tag for the product main page.

Per Google's own analysis of its offerings, I would arrive at the conclusion that Google expects a unique, page-specific value to appear in an H1 (the illustration in the linked doc illustrates this).

Answer 3

IMO there should be only one H1 on the page. And the H1 should always before the H2 - to maintain a correct hierarchy of your content.

The logo is often repeated on every page and, like you say, on most pages the title is nearly always more important.

On the homepage I would consider using:
logo/title - H1[, title - H2]
Although, on your homepage the logo could well be your title.

However, on all subsequent pages I would go for:
logo - other tag, title - H1
Even having the logo as a background-image if appropriate.

Answer 4

Here is a good rationale: Your logo is an image, not a <h1>

Semantically, <h1> should be used for the page title, and the page title ought to be unique per page. Your logo or site name is not the page title (aside from perhaps the home page).

Your logo/site name should be in a plain div, perhaps with ID of 'heading'. Or, the <header> tag if using HTML5.

Answer 5

What you're really looking for in your H1 tag is the page title or what makes this page unique. If you're using an image in it, you need to do it with a fallback method for degradability:

<style>
h1{background: url('imagePathHere.gif');width:60px;height:10px;}
h1 span{display:none}
</style>

<h1><span>Unique Page Title</span></h1>

This way you can set an image to show up for the H1 (which people often misuse as the logo area) and still have good content inside it for people using degraded internet experiences. It also makes your SEO value happy.

Answer 6

This is a terrific question, due to the practices (and templates) that are out there.

Personally, I like to refer to "Outlining 101" logic, considering the following:

H1 is like a title (certainly you like to complement your HTML title) and there should be just one per page, just as a page has only one title

H2 is kind of like Roman Numerals in the outline: I., II., III., etc.

H3 would be the outline equivalent of A., B., C.

Often, the practical use of this logic is hard to enforce on a web page exactly -- there are so many incidental bits of info that just don't roll up into that hierarchy. However, if you sit down and try to break it down with that logic, I feel there is a benefit to the discipline.

Answer 7

I'm h1 for main title guy. And main title is decorated site name, or as you call it, logo. Here's the point -- in header of website, logo is not actually a logo, it's illustrated site's header. Designers just like to design it as logo.

What's wrong with LOGO -> H1?

Google

About Us

Now, as h1 is the most important section as it tells visitor what's it all about, the visitor cannot understand the page, because h1 is too specific. About who?

Google

About Us

This page is about Google. Here's the section about us. See -- there's no question? All is clear.

Second point.

Page structure. If you put site main heading into div or p, there's nothing to associate it with.

Google

About us

How can i associate About Us with Google if h1 comes after? Because all that comes AFTER H1 is associated with it, not what becomes before.

Google

About Us

About us belongs to Google. No questions.

Third point.

HTML is language to DESCRIBE information. Therefore you don't display information, you describe it. And each page is independent. Therefore you describe one page because there are no associations between pages. Just links that link individual pages.

Google

About us

THIS page is About us. Who/what it is? Unclear. It just describes something called "About us".

Google

About Us

This site describes google. And there is a section About us. Us = most probably google, cause the structure describes it that way.

I hope I made my point :)

Villu

PS! You cannot use h2 - h1 - h3 as it is illogical, therefore a big fail. Just because w3c haven't said it is not allowed, doesn't make it valid. It's illogical, think about it.

Answer 8

Logo as an h2 tag?

I was just browsing around SitePoint (www.sitepoint.com) which is a WordPress blog with a mix of regular pages and blogs. In general, I found that they have the page title as the h1 tag, and the logo set as h2. You can see this at a blog page like www.blogs.sitepoint.com/category/design/. Cruising around the site you find different setups. I often couldn't find the h1 tag, as an example at the main product page (http://products.sitepoint.com/). Although from that page, if you click on any particular product for more info www.sitepoint.com/books/design2/, you find again that h1 is the page title, h2 is the logo. A typical web page is similar to the blog, (see www.sitepoint.com/help/). In this case the FAQ's subjects are all h2 tags.

Tom Rogers