Replacing h1 tag with logo

Forgive me, I really don’t know the best forum to post this question in.

screen shot is attached.

A site I manage is looking to replace <h1>Company Name</h1> with an image logo. I know there has been much debate whether a logo is content or a background image of an h1. But the last article I read made a good case that logos are content, so I won’t be using an image replacement technique.

I’d like to keep the H1 on the page for SEO purposes, the site currently ranks in the top 10 on google.

So where would you move the h1 to? My brain found this to be a dilemma because <h1>Company Name</h1> no longer fits the page design…

I thought about:

  • shoving it above the address
  • putting in the footer ( just to have one on the page )
  • make the text the same color as the header background, then position the logo on top of it
  • or deleting it entirely, but wouldn’t that only hurt my rankings?

thanks for looking

Have you considered using the h1 for what the page is actually about and also adding a company logo?

As mentioned in the previous post, in HTML4 and earlier, the H1 tag ( of which there should be only one) Should be reserved for a descriptive title of the subject that particular HTML document is about. On occasion, there may be overlap ( such as in a landing page or what not) but thats about it.

The best is to create a class to deal with this overlap, so then you can output the logo go as

<h1 class="logo">My Company and what we do</h1>

on the home page and

<div class="logo">My Company and what we do</div>

everywhere else.

you can then use an image replacement technique to achieve what you were wanting.

.logo { position:relative; 
height:50px;
width:50px;
overflow:hidden;}
.logo:after{
content:url(logo.jpg);
position:absolute;
top:0;
left:0;
}

hope that helps

The <h1> will only help your SEO efforts if it’s relevant. i.e. a heading which tells you what the following text is about. So putting an <h1> heading with the company name in the footer “just to have it there” is pointless.

Use <h1> as it’s intended, for the most important heading on the page. Put the company name where it makes sense. If you’re using the logo to display the company name, then surely the alt text for the logo is the place to put it.

Thanks for the help everyone. Good tips for this edit and the redesign!

It should be perfectly fine to use an image’s alt text as the content text of a heading.

<h1><img src=“logo” alt=“Acme Garage Homepage”></h1> (on the home page, because on inner pages usually other text is more appropriate as the h1 and this should fall back to a div or a p like in the example above)

The alt text is real content and if it’s inside a heading tag, then it’s now a heading as well.

The only reason I prefer the image-replacement method mentioned above is because browsers suck at showing alt text if the image, for whatever reason, doesn’t load. Users with screen readers or without CSS, and search spiders, they’ll all still get that text, but anyone sighted using any (non-Gecko) graphical browser may not get any alt text if the image doesn’t appear.

Gecko is the only engine to get it right.

Opera shows the text but lets the unloaded image dimensions cut the text off. Or, that was Opera under Presto. Under Blink it probably does what Blink does: not show any text unless the image dimensions were already big enough to show ALL the text. Bleh.

In Gecko (Firefox/Iceweasel/SeaMonkey/otherWeirdAnimals) images are inline elements and if the file they call to replace them with never comes, it remains an inline element and has text inside. The text flows like any other inline element and is always visible.

</rant>

never use h1 for logo
h1 if you are seo conscious should have the keyword of the page = main header for your page should be in h1
there should be one h1 for each page
use a img attribute and dont forget title and alt tags