34

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.

0

9 Answers 9

40

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: example.com and "contact us".

2
  • I would like to give support the answer from Chris Conway. There is no point adding a H1 for every site title on 100 pages. We want websites to be found for the keywords inside page titles not in site titles. Plus, if you take a look at all the big websites (cnn.com, amazon.com, ebay.com) none of them have a h1 tag for site title. Take also a look at the google webmaster blog code & you will see there is no H1 tag for the site title and the page title is H2. So, i would suggest to use a div tag or span title with a class for site title and H1 or H2 for the page title. Jan 25, 2016 at 9:27
  • 2
    @NicolasGuérinet: Not sure if it changed since you posted, but eBay actually has does have their logo inside an h1, but only on their main page. Go to a specific listing and the listing title is now in the h1. Sep 13, 2016 at 23:53
23

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

1
  • Awesome answer & very useful.
    – JP19
    Jan 20, 2011 at 18:07
6

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.

2
  • 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, 2011 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. Jan 2, 2011 at 16:12
5

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.

2
  • 1
    According to the fact that most sites use the same layout for home and inner pages I personally prefer the second solution Oct 28, 2010 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?
    – MrWhite
    Oct 28, 2010 at 10:44
3

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.

2

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.

1

Your logo doesn't need to be nested in a heading -- a simple linked image in the header is enough. But both your site title and page/article title should be <h1>. This article is informative: The Truth About Multiple H1 Tags in the HTML5 Era.

1
  • It is informative, but it would help your answer immensely if you posted a summary of it here. Jun 25, 2022 at 13:36
1

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?

<div>Google</div>
<h1>About Us</h1>

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

<h1>Google</h1>
<h2>About Us</h2>

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.

<p>Google</p>
<h1>About us</h1>

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

<h1>Google</h1>
<h2>About Us</h2>

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

<p>Google</p>
<h1>About us</h1>

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

<h1>Google</h1>
<h2>About Us</h2>

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

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.

-1

Logo as an h2 tag?

I was just browsing around SitePoint 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. Cruising around the site you find different setups. I often couldn't find the h1 tag, as an example at the main product page. Although from that page, if you click on any particular product for more info, you find again that h1 is the page title, h2 is the logo. A typical web page is similar to the blog, (see the help section). In this case the FAQ's subjects are all h2 tags.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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