Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question
add comment

8 Answers 8

up vote 30 down vote accepted

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".

share|improve this answer
    
Excellent answer. –  Jason Dec 30 '10 at 12:43
add comment

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).

share|improve this answer
3  
+1, very intersting link. –  Marco Demaio Oct 28 '10 at 11:05
    
Awesome answer & very useful. –  JP19 Jan 20 '11 at 18:07
add comment

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.

share|improve this answer
1  
According to the fact that most sites use the same layout for home and inner pages I personally prefer the second solution –  Ilian Iliev Oct 28 '10 at 10:31
    
@llian Yes, if you had to choose one or the other for all pages then the second solution would be preferable. However, it is common to incorporate the website title/logo into the title on the homepage - what page should be found when someone searches specifically for the website title/company/logo? The homepage? –  w3d Oct 28 '10 at 10:44
add comment

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.

share|improve this answer
1  
I don't like to use any <img /> tag unless it's for content. A website logo that repeats in the header of all pages is not content but a layout detail. –  cherouvim Jan 2 '11 at 15:04
1  
@cherouvim: an image doesn't have to be an <img> tag, it can be a background, just not a background on an <h1> tag. However, as the linked article argues, your logo can be seen as page content. –  DisgruntledGoat Jan 2 '11 at 16:12
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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