Logo images and accessibility/SEO

Ye' old general discussion board. Basically, for everything that isn't covered elsewhere. Come here to shoot the breeze, shoot your mouth off, or whatever suits your fancy.
This forum is not for asking programming related questions.

Moderator: General Moderators

User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
Post Reply