Page 2 of 2

Posted: Wed May 23, 2007 1:46 am
by Ollie Saunders
I emailed Roger Johansson who writes this blog on this exact issue.
I wrote:Hi Roger,

I want to get your opinion on the correct mark-up for overall site
identity. Very often I want the site identity to be a logo, this of
course means I either need to make use of the img tag or background
CSS rule. So far I've always just gone with img because I consider the
logo to be an image in its own right rather than a background styling.
So I use this:

<h1><img src="siteLogo.gif" alt="Site Name" /></h1>

The alt attribute text is critical here as in the absence of image
support I want this mark-up to be treated as:

<h1>Site Name</h1>

Is this a reliable strategy? I've read other designers recommend
something more akin to:

<h1>Site Name</h1>

h1 {
height:100px; /* height of logo */
width:100px; /* width of logo */
background:url(logo.gif) no-repeat;
text-indent:-9000px;
}

But I'm not convinced.

Many thanks,

ole
Roger wrote: In my opinion the logo should definitely be an image in the markup.

Whether it should be in an h1 element is a bit more tricky. If the
logo is the most important, or top level, heading on a particular
page it probably should. Most site only have one such page - the home
page. What I do is put the logo in an h1 element on the home page,
but not on any other pages since they have more relevant headings.

I hope that answers your question.

Posted: Wed May 23, 2007 4:58 am
by matthijs
Well, Roger is certainly a knowledgeable guy, but I think your question wasn't entirely clear. You didn't ask specifically about SEO and the way you posted your question already contained the answer:
Very often I want the site identity to be a logo, this of
course means I either need to make use of the img tag or background
CSS rule. So far I've always just gone with img because I consider the
logo to be an image in its own right rather than a background styling.
Depending on who and how you ask the question, you will get different answers.

- What is the most semantic way to mark up my logo?
answer: probably an image
- What is the best way to markup my page's main title?
answer: use <h1>.
Want a special font for that h1? use some image replacement technique.

The main question in this thread is, if I'm not mistaken, whether or not using an image replacement technique can have a negative effect on search rankings.

Google is clear about this: do not show visitors something else then the google bot.
Make pages for users, not for search engines. Don't deceive your users or present different content to search engines than you display to users, which is commonly referred to as "cloaking."
So using hidden text full of mortgage related words while showing the visitor something about toys (or visa versa) is wrong. But using an image replacement technique to show a nicer "Myincrediblesite" header/title? Why would that be wrong? The visitor sees exactly the same as the search engine. Google can not and will not penalize that. Might as well forbid CSS altogether and only allow plain text sites to be ranked ;)

There's a lot of talk about this issue on the google webmaster forums.

Posted: Wed May 23, 2007 6:51 am
by Ollie Saunders
Depending on who and how you ask the question, you will get different answers.
Yes.
So using hidden text full of mortgage related words while showing the visitor something about toys (or visa versa) is wrong. But using an image replacement technique to show a nicer "Myincrediblesite" header/title? Why would that be wrong?
I think it would be.

Personally to me <h1><img... is semantic and therefore also good SEO. It is also easier to do, less likely to go wrong and has better browser support. If you guys decide you want to use some text-indent trickery or something then that is up to you but I know where my preference lies.

Posted: Wed May 23, 2007 8:15 am
by matthijs
ole wrote:
So using hidden text full of mortgage related words while showing the visitor something about toys (or visa versa) is wrong. But using an image replacement technique to show a nicer "Myincrediblesite" header/title? Why would that be wrong?
I think it would be.
But why?
ole wrote: Personally to me <h1><img... is semantic and therefore also good SEO. It is also easier to do, less likely to go wrong and has better browser support. If you guys decide you want to use some text-indent trickery or something then that is up to you but I know where my preference lies.
If <h1><img> is more semantic then <h1>Title can be argued about forever. Let's not ;)

If you decide that using an img element is easier for you, then that's ok. My preference is using plain text and put everything decorative in my stylesheets. So that whenever I want to redesign I only have to touch the css. I've also never seen a browser problem with text-indent.