H1 Tag as your Logo?

By , October 18, 2008

h1-tag-logoI had an interesting chat whilst working on a design project alongside Mike Jolley the other day, as we was working on Theme Slice a PSD to WordPress Theme conversion service – sorry had to get that in, our different styles of coding ignited an interesting topic; Should the H1 tag be used for a logo?

We both class ourselves as semantic web coding types, but should the H1 tag be used as your logo? – on this conundrum we disagree.

Mike along with most web designers work I view use the H1 tag as the logo, I do not, I often use an anchor with an image within it, and heres why:

Anthony’s Argument

Usually the first heading tag that your web browser and users encounters is the H1 tag and theres one on every page, the H1 tag semantically has the most grunt and is the premier tag you should use for the main heading for that web page.

Notice I said “Web Page”, as this is where the problem with using a H1 tag and putting your logo within it lies. Every page on your website has different content and I believe the H1 tag should support this.

For instance lets say you run a design agency called Dave’s Design and you have a web design services page. To identify to users and to the web browsers a fair reflection of what the content is on that page it makes sense that the main heading (H1) should say “web design services”.

But if the H1 tag was used as a logo, as is often the case, then the web design services pages H1 tag would be Daves Design, actually in this scenario the H1 tag on every page of the Dave’s Design website would be H1, which does not reflect all the different content on each individual web page across the website.

Therefore it is my belief that we should simply use a anchor tag with the logo within that anchor and leave the H1 tag to do its semantic duty as the foremost representative of the web pages content.

Logo’s are always a vector or bitmap image and so I believe semantically should be represented that way, to say that an image is a heading to me just seems plain stupid.

Who won?

In case you was interested to know Mike won the argument in this instance, as Theme Slice is aimed at web designers we have coded in the most popular coding methods, everyone seems to use the H1 tag as a logo, so we followed like sheep, please share your view?

Who won?  (updated)

It seems my rant on this post has won after all and now Theme Slice uses an anchor, I may have even convinced Mike this is the way forward.

About Anthony Anthony Brewitt is Design Bit, has been for years - he's an experienced WordPress Designer, and Muggle-born Marketing Philosopher. Let’s talk about your website; your marketing, blog design, and that cool new mobile web thingy. Contact Anthony
  • http://www.digiartbali.com DigiArtBali

    thanks for information.. very useful.. thanks for share..

  • http://www.searchengine.ltd.uk/h1-and-title-tags/ Dale

    Thanks for the great info.

    I did an article recently on h1 tags that you may find useful.

    Great work on the site by the way.

  • http://www.trcreative.co.uk trCreative Web Design

    Interesting subject. From a personal experience I would tend to agree with you (Anthony) on this one.

  • http://kingsportanimation.com aby

    well, the tag should be the first one to show. So people know what kind of site they visit.

  • http://www.websitedesignliverpool.com Website Design Liverpool

    I agree with using the h1 tag as both the logo and also as a statement describing the page.

    You can have both if you use CSS image replacement.

    Just replace your h1 tag with your logo/branding image and then change the h1 text on each page. Best of both worlds.

    Is this a solution?

  • http://dynamicsitesolutions.com/ Kravvitz

    I agree with you, Anthony.

    As to having multiple h1 elements… some people and tools might be confused by it.

  • http://www.fuzedesign.co.uk Fuze Design

    I agree with you Anthony. Every page on your website has different content and for that reason the H1 tag should support this. Also very important for SEO.

  • http://designbit.co.uk Anthony

    I am pleased to announce that I won the argument this time and Theme Slice uses an anchor for the logo.

  • Arem

    Hm, I like to use the h1 tag for my logo, but I use different text for the logo on each page. I guess that doesn’t work for WordPress pages (which are not individually written), but as a general principle I don’t see anything wrong with it.

  • http://acheapwebdesign.com Ahsan

    Excellent suggestion. H1 tags should not be used as logos for the scenarios that you have described.
    But it can be used on small websites in which all pages are related to just one product or service.

  • http://www.enjoyonline.co.uk Manchester

    I guess it depends what your company/website is called and also what keywords you’re aiming for.

    Our business website, Enjoy Online, couldn’t possibly use h1 tags as its logo because we’re not aiming to be in the search engines for the term “enjoy online”, we’re aiming for “web design manchester” so we use the h1 tags to highlight that term.

    If, however, your company is called “Yellow Socks”* and you’re aiming to be in the search engines with the term “yellow socks”, then by all means use h1 tags for your logo.

    *Yellow socks was the first thing that came to mind, don’t ask me why ;)

  • http://www.metaspring.com Ann Arbor

    If everyone went with the flow, sounds like the whole argument was a waste of time. Its good to experiment maybe u can do that with the next site you design.

  • http://www.soula.com Isabelle Newton

    I agree with Anthony. Although I guess there is no argument (like Arum said) for pages designed in WordPress and the like.

  • http://mimiflynn.com Mimi Flynn

    I just recently began using h1 tags for the site logo assuming that if a screen reader were to speak the content out loud the logo text would be appropriate before the page’s content header that would have an h2.

  • http://www.dazines.co.uk Dazines

    If your logo uses an unusual font then it will need to be added to your site as an image rather than text so you would be best to use an ALT tag. You can save the H1 tag for the heading on the page which makes more logical sense anyway as you will be able to put your keywords in it.

  • http://www.dazines.co.uk web designers

    If your logo is good it will probably contain fonts that are not supported by web browsers so you will need to have it as an image and so should use an ALT tag.

  • http://itmdesign.co.uk ITMDesign

    H1 should describe the page and not the overall website. H1 is important for SEO, it defines what that particular webpage is about and this should be relevant to the content.

    Besides, a lot of websites like to have a flashy logo which better suits an image file rather than plain text in a H1 tag.

  • Andrew

    Why do some people wrap H1 around their logo?! Why??!!!

    H stands for Headline. It should be used for the unique headline for each unique page.

    Wrapping H1 around a logo (that’s the same on every page of course) is as meaningless as giving every page the same HTML TITLE.

  • http://blog.renaissancecms.com Rob Chant

    I agree with you. I always use the H1 tag as the title of the page.

  • http://designbit.co.uk Anthony

    I’d just like to put an end to the assumption that Wordpess, Joomla , Drupal etc, all content management systems need to have H1 as he name of the site, This is ust not true, this site is built in wordpress, check out my h1′s. In all these CMS’s a simple conditional statement can provide this functionality.

    @Ann “Its good to experiment maybe u can do that with the next site you design.” = Ouch, some one got out of the wrong side of bed!

  • http://www.homestansted.co.uk/ charlotte

    great blog it’s good to see someone using a blog for what it is actually meant for look forward to seeing further comments.

  • http://www.geniusmonkeys.com Patrick

    Anthony’s right. H1 should be the page title, always. Think of users with disabilities and screen readers, etc.

  • Pingback: Web Design Blog » H1 Tag as your Logo? - Designbit : Genius Monkeys Digital Production Blog: Los Angeles Website Design / Digital Video / SEO

  • http://www.brandmantra.net BranMantra

    Importance of H1 is very high. And all the pages don’t have the same relevance of the keyword which is used (if) in the logo. Most of the sites are now developed using same header and footer where the logo and few things are called from a particular folder.

    I think using the h1 tag in the logo is not the best option.

    to know more visit http://www.Brandmantra.net

  • http://www.artofdata.com/ Pete Lister

    Surely Anthony should have won the Argument as is specific to the unique pages content, aren’t duplicate tags detrimental to SEO. Using this process on a site may create tunnel vision and less traffic from other essential phrases that may become relevant as the site grows.

  • http://www.tamar.com Lavelle Hurley

    This is the second time I have heard what you have talked about in this article. Having quite recently received some basic training on website accessibility.
    It was recommended that H1 tags should be used for the logo only on the homepage of a website. But for other pages, it should be used for the page title to describe what the content is. The main reasons being that it reduces the unecessary repetition for people using screen readers. Which may automatically target the h1 tag to inform the user what the page content is.
    This is also good for SEO, because each h1 tag within a website will be unique and better describe what the content of the page is (which is what h1 tags were designed for).
    The accessibility training and recommendation was provided by the RNIB (Royal National Institute of Blind People)

  • http://designbit.co.uk Anthony

    @Lavelle, interesting what the RNIB are teaching on this subject, thanks.

  • Pingback: H1 Tag as your Logo? (Geekspeak Alert) : patrickortman, inc.

  • http://www.raycreations.net/ Ray

    Using the h1 tag for a logo? It is a little strange for me as I would want a different h1 tag for each page. And moreover, logo is usually an image and not always text.

  • http://www.discoverseo.co.za Bryan

    Using H1 tags around your logo will completly destroy your SEO. Search engines use these titles to determine what your page is about. Putting a logo in this spot (even with an alt tag) will only boost your company name which you should already be ranked well under. Rather save this spot for a relative page heading that discribes your page. Using this method will bring a whole range or new indexed keywords to your site :)

  • http://www.adeointernetmarketing.com Allen – Montreal

    Yes, logo with H1 tag is not very good for SEO. we see it all. We force the SEO. ….No traffic on your web site no sales.

    Allen

  • http://www.hajjar.me Masro

    Thank you for this information, but as Allen was saying , is it a usefull or harmfull for SEO ???

  • http://www.raycreationsindia.com/ Joy

    If you use h1 tags only once in a document, then I wouldn’t waste it on the logo.

  • http://www.creativehat.co.uk Lee Norwich

    There should be a single, unique h1 tag on every page. Logos are usually on every page of a website and therefore not unique, hence it should not be the h1 tag

  • http://www.zaidimuforumas.com/ zaidimai 2010

    Thank you for this thread can someone tell us if it is a usefull or harmfull from the seo angel

  • Pingback: Un h1 pour le logo ou pas ? | bbxdesign

  • http://www.mellowmedia.co.uk Paul

    I have to agree, I think the H1 should be unique to each page and not as a logo. The reason I’m on this page, is ‘cos I was having the same discussion regarding H1 tags and Googled ‘H1 as Logo’ to back up my theory…..

  • http://www.informacije.tag.si Informacije

    This is good idea and works very good in Google – so far! It’s just the matter of time when Google will terat this as spam technique.

  • http://www.motionbuzz.com Jacksonville web design

    I agree with Anthony. Best to use a div for your logo and h1 for the actual headline of the page. I often use Drupal CMS, and the exception to the rule is the home page. I use the following code in my theme:

    Your SEO friendly site description goes here

    Your business name goes here

  • http://www.motionbuzz.com Thomas

    Sorry, forgot to wrap the above code. Here it is again.

    Your SEO friendly site description goes here

    Your business name goes here

  • http://www.mybuildingmaterials.net chris

    I would definitly agree with this..

  • http://w3spor.no W3Spor

    Thank you for a good blog!

    And i agree – h1 on every page, search engine range it better, also when the content is the same as title-tag!

    Best Regards

  • http://pixelandcode.com alex

    If you’re going to use h1 as a logo holder (html5 will solve some of this, hopefully) you CAN have text in with your logo image.

  • Steve

    Anthony, you are correct in this instance. H1 tags have some weight to them for SEO purposes. It isn’t a great amount but every little bit helps.

    The h1 tag can be used to help emphasize what your page is all about for the search engine spiders.

  • We network

    We stress that a tag should be used as a headline for the page.

    Any competitive business will already have keywords in their domain name related to the brand identity and a unique,trademarked logo. Using an important descriptive tag to duplicate what a user/spider already knows is just plain stupid.

    If our markup service returned a page with the logo as they would not get paid!

  • We network

    We stress that a h1 tag should be used as a headline for the page.

    Any competitive business will already have keywords in their domain name related to the brand identity and a unique,trademarked logo. Using an important descriptive tag to duplicate what a user/spider already knows is just plain stupid.

    If our markup service returned a page with the logo as h1 they would not get paid!