How important is the website logo on a page?

Question

I have stopped to insert "img" tags for the logo of the page. Because its not an image that is part of the content, its a design element but its still a information I want to have control over. So I just write the title in a "a" element as display: block, overflow: hidden and I push the text out with some padding. I think thats a good solution for SEO because you are keeping control of how important the logo should be on a page.

But now my dilemma is starting. How important is the logo of a page?

"A list apart" puts the logo in a h1 element. But is the logo really that important? On article pages you have two H1 elements (the logo and the title of the article) Most of the sites just use a img balbal /a, but I don't like this solution. Because I just want to use img for images that are part of the content...

Its kinda philosophical question, I hope you can give me some input or some articles to read about that...

Answer 1

I prefer putting the logo in an H1 and hide the name of the website. The logo is a big part of the website's identity but it's also often the "home" link... so it's important enough!

edit: CODE SNIPPET TIME!!

<h1><a href="/" id="logoLink">my company</a></h1>

with a background image on the link (and displayed block with a set width and height etc.)

Answer 2

For the homepage, the logo is a very important heading.

<h1><img src="/logo" alt="ACME inc."></h1>

…and it is an image that is part of the content, it isn't decorative or part of the background.

For other pages, it isn't.

<div><a href="/"><img src="/logo" alt="ACME inc."></a></div>
<h1>Products</h1>

Answer 3

Your logo represents your brand identity. It is the ONE thing you want your visitors to remember (if they like your site, that is).

I personally recommend always using a CSS image replacement technique for your logo in an <h1> tag because you want search engines to recognize this as your bread and butter. You want to ensure you rank on the top for your company name. This will help get you there.

h1#logo { height: LOGOHEIGHTpx; width: LOGOWIDTHpx; text-indent: -999em; overflow: hidden; background: transparent url('/path/to/logo.gif') 0 0 no-repeat; }

Answer 4

Speaking as an old search engine guy, the logo itself is not really what the page is about. I normally put it (img or text) in a styled div. The title of the specific purpose of the page is normally what you want to wrap in an H1. This is usually the same as the TITLE, although I normally tack on a " | SiteName.com" to the title so that the site name shows up clearly in the results listing.

Answer 5

Q: -How important is the websitelogo on a page? A: -Very important! :)

Answer 6

10 years back when i first visited a new search engine i only saw a textbox and a logo on top that said 'google'.The web page was ordinary didnot have any a lot of html elements infact only a textbox and a logo, but i always remembered the page due to the logo and the excellent search results. Logo is important man, very important

Answer 7

Take a look at the top of this page. You can't go much of anywhere on this site without seeing the "stack overflow" logo up in the corner.

I'd say at least 90% (probably more!) of web sites I visit on a regular basis have a recurring logo. Marketing is a sick and twisted thing, but if so many web sites are doing it, it's probably not too far wrong.

From a visual standpoint, a logo is crucial -- it is part of the identity of the page, and users will associate it with the content. It's almost an imperceptible thing, but I know if I didn't see a logo at the top of a content page, it'd almost smack of unprofessional design to me! It's a subtle thing. Make sure the users know where they are and what they're looking at; form a psychological association.

Yes, search engine results are important, but that doesn't mean the logo is a throwaway.

Answer 8

I always do this:

HTML:

<h1 id="logo"><a href="#">Company Name (with tagline, if any)</a></h1>

CSS:

#logo a {
  float:left;
  width: ...px;
  height: ...px;
  text-indent:-1000em;
  background: url(/path/to/image) no-repeat;
}

You can replace the H1 with H2, H3 etc.. on the inner pages, but I prefer keeping the header (and other sections) consistent as much as possible.

Answer 9

I believe it is good practice to have your <h1> tags match (or contain) similar text to the <title> of the page. For this reason, I think the following pattern is a good one:

<title>Your Site Name Here</title>

...

<h1 id="logo">Your Site Name Here</h1>

And on other pages:

<title> Article Title Here  | Your Site Name Here</title>

...

<div id="logo"><a href="/">Your Site Name Here</a></div>

...

<h1>Article Title Here</h1>

Having the nested <a> tag in the div#logo allows you to have a different click area than logo display. For instance, if you have a wide drop shadow or other element that doesn't make sense to have clickable, the a could be smaller than the div#logo and help with that.

Answer 10

I used to do the same image-replacement thing, but I finally realised it was a waste of time. As long as a meaningful alt attribute is present, you should just have the image.

As for the appropriate markup: on the home page I have the logo as h1 as it's the title of the page. On other pages I have it in a p and the actual title of the page is h1.

For example, home page is:

<div id="header">
  <h1><img src="logo.jpg" alt="HyperGlobalMegaCorp"></h1>
</div>
<div id="content">
  <h2>Welcome to the HyperGlobalMegaCorp website</h2>
</div>

whereas contact page is:

<div id="header">
  <p><img src="logo.jpg" alt="HyperGlobalMegaCorp"></p>
</div>
<div id="content">
  <h1>Contact HyperGlobalMegaCorp</h1>
</div>

...and that's HTML, not XHTML, before some zealot starts going on about closing the img elements ;-)

Answer 11

I use the both logo image and text for improving SEO on my site

<h1 id="pageheading"><a href="http://mysite.com" title="site description">
<span>Site name</span><img src="mylogo.gif" alt="my brand" />
</a></h1>

then I used css for formatting display so visitor can see only my logo but SE can see the both that make double search result for 2 type of search text and image. The image which use searched is the brand of your site, when visitor see your logo, they thought about your site, your products, services like as HP, IBM, DELL etc.... In other case you can make paragraph tag for more description about your site to focus some keywords in your site. My language skill is not good but I still want to share to you some knowledge, dont laugh me when I got mistake about grammar please :)

Answer 12

Think about it this way: "How should a text-to-speach browser translates the page if a disabled person visit the site?".

Do you want the text-to-speach to mention the logo as an image? If yes: the logo should be an img with a caption providing a textual description. If no: use whatever alternative to no have image as content.

Do you want to emphasize the importance the page title, the article time, and the logo?

I guess I would

• use an img for the logo (so that it's also printed, which is not always case if you use background image)
• provide a nice caption (with "alt" attribute) that describes the logo and the company
• have the page title be "company - page title"
• have the main title be h1.

I feel like it should also gives decent SEO results.

Answer 13

Thank you for your inputs, it helped me a lot. This is my conclusion of all your answers and my thoughts:

It depends on your programming style and personal philosophy how you implement your logo technically. Some are using IMGs inside H tags, some are hiding the content of what ever tag they used and are placing the logo as background image.

But i think i have got my answers:

Consider the website as a book or magazine. On the front cover you want to have the title of the book as most important element and maybe some headlines. But inside the media you gonna implement your book/magazine title into the header and maybe the footer.

In order to make this understandable for a text navigator or a search engine. I would now choose a h1 tag to place my logo on the main/home page. But on the other pages a simple IMG, A or whatever tag but H.

Please share your thoughts about my conclusion.