The Great H1 Debate
My colleagues and I have been discussing/arguing/throat-punching where to place the H1 -- does the H1 belong on the logo? Or as the page's title? It's a rather hot topic right now (great for happy hour and dinner partying), and I guess a bit hotter than I thought. Keith Tweeted about H1Debate.com in which you vote for H1 placement via a Tweet...who knew?! Here's what I voted and why.
Historically, the H1 has been on the logo. However, I believe the H1 makes more sense on the title. Why? I'll limit it to four reasons:
- From a purely SEO standpoint, the H1 is very important. It tells the search engines what the page is all about. Keywords are super important in your header tags. With the H1 as the logo, you're rendering a powerful piece of SEO inneffective (unless you care only about your brand name).
- If I'm reading a report or viewing a presentation, I expect the header to be about that page. I don't expect the header to be the logo or brand name, nor to be identical across all pages. That would just be weird if my presentations all had "Viget Labs" describing every page/slide.
- SEOMoz (a very well-respected SEO resource) interviewed 37 SEO leaders, and they ranked keywords in H1's as the 4th most important part of SEO.
- Google produced their SEO Starter Guide and said "On a page containing a news story, we might put the name of our site into an <h1> tag and the topic of the story into an <h2> tag." However, the example of the H1 (the name of the site) they gave was "Brandon's Baseball Cards," which is actually very keyword-rich — unlike most logos/brand names (think "Viget Labs"). Additionally, on the next page Google says, to "Imagine you're writing an outline" and "Avoid placing text in heading tags that wouldn't be helpful in defining the structure of the page" — like a logo, for example? Does seeing the word "Viget Labs" over and over help "define the structure of the page?" I suppose you could answer "yes," but that just seems a bit weird to me.
There are lots of arguments against this, so I'd like to hear yours. We're still debating here at Viget. Do you agree? Disagree? Oh yeah, and don't forget to tweet #h1title or #h1logo to vote on H1Debate.com.
Commence flaming.
What about H1 as ‘Sitename – Page title’ and then style it as the logo? Wonder why that’s not an option.
I think Tor have got a valid point here. I’d switch sitename and page title around, though, making it easier to separate different tabs from the same site among other advantages for the user.
Although, you’d then often end up with having the page title twice in your code, which seems a bit untidy.
The arguments in this entry are all good, but if you’re all about your brand, and no surprise — many companies are — it would make perfect sense to inprent your brand in every single page.
<h1> re: the great H1 debate </h1>
Fabulous post. I agree that <h1> tag should be in the title. I also wish that people would follow the industry standard of adding an <a> tag to the logo, which links back to the homepage.
Tor, I know Google frowns on hiding text, which it sounds like you’re suggesting. The logo and page title are generally pretty far apart, structure-wise, so if you wanted to show both, it would require something a little hacky...like putting “Viget Labs” inside a span in H1, then positioning that H1 absolute so it ends up in the header.
Even if this is a good approach (and I’m open to thinking it is), it seems like it’s not adding any value to the page. The actual Title tag for this page would be “The Great H1 Debate - Viget Labs” and the H1 would be “Viget Labs - The Great H1 Debate.” No keywords are being added with this approach, and the SEO advantage of doing this would be pretty low.
My primary argument against the H1 being anything but the logo is the work involved, to be honest. Since we do design first and SEO considerations second, pages often end up with no consistent, keyword-rich title to grab, meaning the H1 needs to move around the page and work differently all over the site. Take Viget.com for example:
Homepage - The H1 would probably be that big “Passionately providing” area.
About - The H1 would be the “About Viget Labs” headline.
Work - Not really a good spot for an H1 on this page.
Engage - Would the H1 be the “We’re the marketing lab at Viget” area? Seems a bit long.
The Great H1 Debate - On this page, the title would be the H1, meaning that the “We’re the marketing lab” area would no longer be an H1.
So, if we remade Viget.com using H1s as page titles, we would either need to a) rethink the design of several pages, and write new headers, or b) spend a decent chunk of time hopping the H1 around the page, depending on which page it is.
The biggest advantage conferred by using the logo as an H1 is that you set it and forget it - it gets placed into an include and voila, a relevant H1 shows up on every page, guaranteed. Doing otherwise is more work, which I’m not adverse to if switching up the H1s provides a real advantage. But from an SEO perspective, it seems like that time could be better spent writing a good blog post, putting Viget in some directories, cleaning up the [title] tags, writing some good comments on other blogs, saving some posts on Delicious or Digg with good tags....you get the picture. Thoughts?
Yeah I’d use a negative text-indent value. Will Google ignore the only H1-element in a document because of this?
From what we’ve read, Google frowns on “hidden” text (when they catch it). So, using negative text-indents is fine if your logo is “Viget Labs” and your image says “Viget Labs,” because you’re not really hiding any text, but if your H1 is “Viget Labs makes cool stuff” and the logo reads “Viget Labs,” it’s considered cheating somewhat.
In the case of hiding the “Viget Labs” in an H1, the same thing applies...if you have text in the markup, that text should be visible to users (and vice versa).
But as long as the ‘makes cool stuff’ actually is the page you are on, I don’t see a problem with the image replacement.
I also think that <h1> should only be used for your content and not your brand name. The best way to promote your brand, in my opinion, is to put it in the <title> tag (after or before you page topic).
I think Doug raises a very good point: You can’t just “move” the H1 and call it good. It may require rethinking how the page elements interact with each other. Is it ok to have the H1 be the same as the Title Tag, for example?
There are two separate questions here:
1) Is it better to have the H1 as the logo or title?
2) If “title”, then how does one accomplish that?
My post def. did not get into part two.
However, it seems like many designers are already thinking through much of this in context of the H2—so while it may add work to figure it out, could it get easier over time?
Also, not every single page has to have a keyword rich H1. It’s the pages that you’re looking to optimize that matter. The “About” page might not ever make sense to optimize (then again, it might), the H1 could behave just like the H2 is behaving now.
Thanks to everyone for the comments. Keep them coming!
I’d be curious to hear what an accessibility guru has to say regarding how screen readers process it.
Personally, I always have the logo on the homepage be an h1, but on all other page I have the page title be the h1 and the logo will just be an anchor.
So if your page title is in the <h1>, what do you put your logo in? Just a <div> or something? Or do you give it SEO hierarchy points too? It seems like most companies would want to have their company name optimized, as I’m sure a good portion of company web sites get found by searching for “Viget” or similar.
Ben - still trying to figure that out. Some of our designers have suggested a div with an ID of logo...but I look to our designers to help with that as well.
Josh finally mentioned me in a blog post! Today is a good day.
My vote on http://h1debate.com/ was for the “main title” because I think its better to put valuable page content in the H1. This is NOT just because of SEO. I personally think this is more semantic because the logo in my mind is not a headline. It is an image or symbol that represents the site you are on and most of the time it is just the title of the site. And what do we use for the title of the site? The page title tag! I don’t see a need to duplicate the same information in the H1 as the logo, plus the page title tag is usually more descriptive about individual pages. Let’s save that H1 for the title of the page you’re visiting to give the content better structure.
Is there anyone who uses more than one H1 on a page? I’m not ashamed to say there was a time when I did it. For example, a homepage showing major sections of the website. Correct me if I’m wrong, but I really don’t think there is any evidence that this is a bad thing from an SEO perspective (and I mean actual data showing it is bad, not because a group of “SEO experts” said so). Obviously you can argue that this is a problem with semantics, but for an example like a homepage, I don’t think it would be that big of a deal.
Keith, I’m in the same boat as you on this. I tend to reserve the H1 for the content’s title (and also integrate that title into the HTML TITLE element in the page’s HEAD as well—based on good TITLE naming conventions).
So, as Doug mentioned, this means that when I build sites, I have to accommodate different versions of my markup. Fortunately, most cases allow me to use separate includes (server-side or PHP) to generate the “header” areas of homepage and all other internal pages. This usually amounts to only 2 different files who’s difference is only the use of an H1 (homepage) vs. a DIV or H2 (internal).
Since in my experience, homepages are a one of a kind page in build-out, I tend to focus on the templates needed for all the other levels of my site first, and on those can usually create a standard area (both visually and in my markup) to place the content title in an H1. Sure navigation may come and go, but I’ve found where I place that title is relatively consistent and the changes again can be handled in a minimal number of templates. I then usually tackle the homepage with its separate “header” included. That coupled with using a system of classes on my BODY element throughout pages allows me enough visual flexibility with minimal duplication or continued management.
Kristen, I’d also love to hear the accessibility side of this. I think there could potentially be a big difference, based on which H1 school of thought you go by, for a user who’s experience relies on a screen reader announcing heading and other semantic elements.
With how I currently do things, I’d be worried that the following things would cause some issues:
1) Would placing the H1 element further within the page’s content (i.e. lesser heading elements are before it in my DOM structure) on a site’s interior pages cause confusion?
2) If users browsing with screen readers care or rely on the consistency of semantic elements, then would my switching of the order of the H1’s placement (again from a higher location near primary navigation in the DOM on a homepage to another location after primary navigation and other global content/functionality on lower level pages) cause disorientation?
In general, I agree with you, Josh. However, I say a page can have more than one h1. Why? Because I’m CRAZY!
Thanks for the article. I created the H1 Debate with Ollie Parsley in 4 hours, due to a tweet i sent, which sparked some strong opinions.
You can follow @h1debate to get H1 and semantic-related news and articles.
Paul
@Keith & @Brian: Thanks for the thoughtful replies—very helpful!
@Paul: Thanks for creating that site, really cool idea.
@Nick & @Keith: The reasons I say to not have more than one H1:
1) If the H1 should be used as the heading of your outline—the page description—then multiple H1’s would be weird.
2) Most of those who use multiple H1’s are doing it as gray/black hat. Sorry, Keith, but almost all SEO experts say no-no. I don’t have a case study. It looks like spam; and it hurts the spider’s brains.
3) There can be only ononneeeeuughhhh
Yeah, I vote for the title.
This discussion has started months ago, surprised it came up just by now.
Josh, at the end of the post you mistyped the url (TheH1Debate.com).
[]’s and keep up the good work guys!
@Jan:
Thanks for the heads up - I fixed it. We’ve been discussing this for some time internally and finally decided to blog about it. It’s been the talk of the industry for months.
Next entry: Email Newsletters - Personality and Best Practices
Previous entry: Crafting the Digital Brand: Social Media's Role in Brand-Building
Comments
Viget is Hiring!