Logo – Image, Heading or Div?

[james_birkett]

When adding a logo to my site, should I be using image HTML (img), applying it to a heading as a background image or applying it as a background image to another element, such as div?

Just curious, I see all of these methods.

[AndrewHipp]

Here’s the system I use. This one still gives the browser the text to use.

html:

 




Company Name


Tagline

css:

 #logo {

background:url(logo.png) no-repeat top left;

width:200px;

height:200px;



text-indent:-9999px;

}

[Arvid]

I am no css pro, but unless I am mistaken the above would hide the text from the visitor, something google can punish you for doing, again, if I am not mistaken.

[james_birkett]

Yeah I understand the different methods, I’m just wondering which one is the best method to use in general.

[TheDoc]

Something like that will have no negative SEO impact.

[AndrewHipp]

@Arvid : I am pretty sure that this won’t get you in trouble with the search engines. Ideally you would use an image that includes what ever text you are indenting -9999px;. Also if you use it sparingly it shouldn’t raise any red flags.

@james_birkett: I would recommend this because it lets you load you’re pretty image, you still get the text on the page which is good for SEO and if the CSS fails to load it has text as a fall back. (If the image doesn’t work it wouldn’t matter which one you use. Both fail.)

[noahgelman]

@wolfcry911, while it’s true that it would read the text anyway, the h1 tag has a different weight of importance than Alt-Image text. Even though the Alt-Text is in the H1 tag, I don’t know if Google says:

“This text is Alt Image text” or
“This text is H1 text” or
“This is Alt Image text and H1 text”

All 3 could have a different weight of Importance to the Google search engine. How it reads it or how it treats them is beyond me. Maybe it’s all the same and is irrelevant. Only Google really knows.

[Author]

Posts