The Logo: To H1 Or Not To H1?
Even though I’ve been working in HTML for over 12 years now, I still have a few philosophical conflicts about certain practice. I call them philosophical, because in the end, it really doesn’t “matter” which way I choose, but because I’m a big proponent of web standards and semantics, it makes a big difference to me.
Using the logo in an H1 tag is one of those things. About a year ago, I was using the logo in a regular <a> tag with a logo class, when someone made a great argument for putting it in an H1 tag instead. The said to think of a website like you would a table of contents in a book. A typical book outline usually goes like:
Title of book > chapter > sub chapters
Considering the fact that HTML was originally meant for outlining books and papers, this made a lot of sense to me. The title of the entire site is what the broadest headline is, so why not make it an H1?
So far awhile now, I’ve been using the logo in an H1 tag. To make it extra semantic and usable, I actually use the logo as a background image and put the actual title of the site in text, while using text-indent to hide it. Those using screen readers, printing the document or with CSS off, would then get the regular text instead of an usuable image.
However, I started hearing recently that Google is adding text-indent to it’s no-no list of black hat techniques. While I seriously doubt this means that it will punish you for using once, it’s again got me thinking – is using the logo in the H1 tag really the best way to go?
So I turned to Twitter…while most of you were convinced that it was the page title that should be an H1, even though it isn’t technically the top-most heading, I still wasn’t satisfied, so I turned to some of our favorite industry experts.
Jeremy Keith, you awesome man you, was the first to reply and in less than 140 characters, convinced me to go back to using the H1 for the page title only:
I consider the title element to be equivalent to h0. Also, SEO and argument are two words that do not belong together.
OK, ok I can deal with that.
It’s these kinds of self-arguments that make you a better developer. Every time you code, try to think of a way you can do something different – do you need to use that class? Can you instead use the cascade? Why do you code that element the way you do? Push, always push, and be better!
About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?
I think a logo should not be inside of a H1 tag, if the H1 tag is the “top most heading” why place an image inside which a search engine cannot read?
Semantically I can see the pros to placing inside of the H1 tag but from a SEO point of view I can see the cons.
So it falls down to personal preference and what is most important to you, SEO or Semantics….
Because you actually place text inside of the h1 and then hide it with text-indent and place the logo as a bkg image in it.
But I do think it’s best now to do the h1 as the page title.
Thanks for writing about this. I’ve struggled with it as well. So, put the page title in an H1, makes sense. What then do you do with the logo? Do you still do the logo class?
Yup I do that now, even try to use it without a class in side of the header, but that part is down to cleaner code…a much different debate!
I’ve come around to thinking that at this point and time the best way is to use a regular image for a logo with the correct alt tag. I don’t see a philosophical problem with wrapping an img in an either. The reason being, for clients with logos, when a site is shared and the snippet is previewed on Facebook or Twitter etc. it looks for an img. So if the logo img is the first thing on the page that’s what’s going to register. Now if you don’t have a logo (as I don’t for my own blog) just let the text be an h1 of course. Interesting food for thought!
I used brackets when I said h1 “I don’t see a philosophical problem wiht wrapping an img in an h1 either”
Well that is an interesting point. The Facebook one I mean.
Facebook will actually pick up any image on the page, whether it’s first or last…it lets you choose before you post
of course, but not every page has an image. It’s really for those cases where you’d at least want a logo to show up (I tend to blog without images). If you’re using image replace you won’t get any thumbnail. (I think Facebook used to have a really ugly placeholder for sites without images). There is another fix for this as well for WordPress: http://vonlind.com/2010/10/how-to-make-your-wordpress-post-look-nice-when-shared-on-facebook/
I think the logo should go in the H1 as it is good for SEO and the part about Google making the text-indent a no no, then maybe a different way of hiding the text. Maybe instead of loading the image through CSS you do it in the HTML and use CSS to place the image above the text. And if for some reason your image does not load the text will be there.
Then that’s a lot of unnecessary ugly HTML
I’m a firm believer that on the home page, the logo should be in an H1 element, as that is the title of the page. All secondary page logos should be wrapped in a different element, maybe a div, while the page title should be in an H1.
Yea a few people have mentioned that to me before, but that requires some extra code…I guess it’s doable though?
I feel like we’ve had this conversation before
Cause we have? lol!
I’ve always gone the route of logo in H1 (I came from publishing, where the title needs to be the most important heading, and to me, logo is the most important heading), and using PHARK to hide the text and replace it with an image. I’m kinda not happy about Google making image replacement techniques as ‘black hat’… I use this a lot to ensure that non-traditional readers can still read my images’ content.
I have always used H1 for logo’s.
But in all honesty i think html5 should have introduced to us a element for exactly this reason.
Although h1 is the most important header of the page, it would be nice to use it as the introduction header to a piece of content, instead of the page as a whole.
It definately seems as though h1 is the most standardized way of doing it, and so i will continue to use this until some smart bugger comes up with something better!
It’s really a philosophical question.
Amberm you should ask an expert in SEO, i mean Joost De Valk (http://yoast.com/)
Will wait for his response…
I don’t want to ask an SEO person, because it’s more important to have semantic code then it is to be “SEO perfect”
Agreed. SEO changes as search engines get better at understanding semantics, while semantics themselves remain constant. SEO follows semantics, not vice versa.
Quite a hot topic I see.
I’ve never put a logo inside h1 tags, just doesn’t “feel” right to me. I really just hadn’t thought of it, but I’m not stranger to wrangling HTML/CSS.
I believe h tags should be used to section off pieces of content, such as the title of a blog posts or h2 for sub-heading of a blog post. The h tag is just extremely literal to me and I take it for what the design was intended. The web offers a lot of freedom in how we use elements, I feel the way I use my tags ultimately best serve my content.
The only way I’d feel comfortable having a logo be h1 is if it was just straight text.
I know some of you might disagree, but I’ll stick with mah guns. =P
Interesting question. I didn’t think to wrap a logo (image) in an h1. If it’s straight up type, then yes of course. I do like Todd’s comment on wrapping it in an h1 only on the homepage and making the page title h1 on all secondary pages. On my page at the moment I have the logo image as an img tag and I have an h1 with my company name with “visibility:hidden;” so that it’s read by search engines as the most important thing on the page, yet what’s visible to the viewer is the logo. Not sure how good or bad this is in terms of semantics and SEO, but that’s what I’ve started doing.
I do use in LOGO in the first page (index)…and all the other pages, I use to name the theme or the main subject.
The content of H1 should be the same as the tag Title, by doing this, you are telling the robots indexing each page of your site has a unique and different subject matter.
I would love to discuss this, but I’m so busy these days, that I hardly found the time to read this post. I regularly read your blog, but in case I forget about this post and don’t come back, I’m just going to share this insightful post about the topic of what element you should use for your logo: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/
Have a wonderful day,
OnionEye
Hmmm…….this is a good one.
I think it’s actually okay to h1 a logo in there, just so long as there’s text in there and if it works SEO–wise. However, I’m getting a bit fatigued of these do or do not arguments people are having these days.
While I don’t like to say “it just works”, it’s worked for us for many years so why the hell not, still?
Why not use tables?
Why not use responsive web design/media queries?
Why not use inline JavaScript (it works)?
Asking the question of why or why not helps to further optimize processes.
Asking questions is key to growth and further optimization.
I understand your sentiment, however. You have the power to do many things, but it helps to ask yourself if this is the best way to go about it.
Exactly. “What is the very best way we can do this now” is always an interesting question in my book. Our clients may not care, in fact i’m sure they don’t but asking these questions keeps me sharp.
Great post Amber you always seem to post something that’s really relevant to me just at the right time.
I’ve always used the H1 method with a negative text-indent for my logos that’s how I was first taught from the old Molly Holzschlag books but having read all of the above I think I’ll change to using an image with an alt tag. Like you say you shouldn’t even need a class depending on your page structure of course. One of the reasons I was starting to wonder if using h1′s for my logos was that I sometimes reached h6 to quickly.
I was just wondering what you and others think of the wider issue of using the text-indent image replacement technique in general. For years now I’ve used this method for navigation (when the design requires it) and buttons etc. My rule is generally if I’m using the image to make the text look different like a designed button for instance I will use image replacement and just use the image tag for photographs and other imagery etc what you’d call images.
I always thought this was better than just using an image for a button and using the alt tag as I thought it was better for screen readers and SEO, is this no longer best practice?
How do you code such things now?
It’s hard to keep on top of things, but I do agree with you, you have to keeping pushing, to keep improving. Sometimes I can break off from a project for an hour or so to research something to ensure I’m doing things correctly especially since I started using as much HTML5 as possible. I’m forever on the HTML5 doctor website.
Thanks
Richard
i think it should be neither an nor a but a (with a link around it, of course). A logo shouldn’t be a background image, as it’s not style but actual content. Harry Roberts has a good article on this matter: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/
I’ve never been much of a fan of text-indent, especially in hiding text. For me, in general, hiding pieces of content through negative values, simply doesn’t seem right – as if it would break some sort of general flow.
But I agree, H1 for logo seems like a good option.
If text-indent is not preferred, why not use a hidden span tag inside the h1, with the text, along with the CSS background. This way, if the stylesheet is not parsed, you get the text instead of the image.
My English isn’t good but i hope you can understand me:
The real problem of all the discussion is the precept that the name (logo) is the most important and top level part on the structure of a website, that’s why we see the things like this:
My Website ==> My current Section
But let’s think outside of the box: when you go to the bathroom on a restaurant what is the important thing? the place itself, you don’t expect to view a sign reading “My restaurant Name > Bathroom > Boys” it’s just “Boys bathroom”. When you are reading the chapter 3 of a book the Title and main object is “Chapter 3″, no “Books name > Chapter 3″. Is the same thing for a website, when you go to the “About Section” you don’t expect the website to say “hello i’m The XX website in the about section “, you expect something like “About xxx”. The main object on the About section is “about” itself, no “XX website > About”.
If you have to put labels/titles on each door of your house, did you put something like “Family xxx > Visitors Bathroom” “”Family xxx > Living room”" or just “Living room” or maybe “xxx’s living room”.
Is logo important? sure, the name of the website is relevant? sure, the logo most be on the h1 element? errr no. The top structure element on your website is different for each section, is not the logo / name of the website.
Hope my bad English doesn’t ruin my explanation.
Ok folks you have a reply from someone who’s worn many black hats and applied just about every SEO cheat on the planet to make bank.
H1 – H6 the guys who wrote the book told you what they were for and little has changed from that day to this.
Google Bot: Hello H1 how are you today
H1: I’m fine thank you
Google Bot: I can’t seem to find your description
H1: I don’t have one so I’m giving you a nice picture to look at
Google Bot: I’m guessing your creator’s an SEO expert
H1: How did you know that
Google Bot: I know everything
H1: Cool
Google Bot: Got to move on now – have a nice day
H1: But Google Bot I was going to tell you my secrets
Google Bot: I already know