Should I include my logo text using 'alt' or CSS?

Richard M. from Australia asks:

"If you have a company logo on your site, what is the best way to include the text of the logo for SEO purposes? ALT tag, CSS hiding, or does it matter?"

Recorded on April 23, 2009.

[ashconnor]

You can find the answer on this very page.

In Chrome, right click the YouTube logo and click inspect element. They use an `a` element with a title attribute and a `img` element with an alt attribute.

[gordongoodfellow]

So does that mean that the ALT tag becomes <H1>Title of Website</H1> ? In the source code that becomes alt="&lt;H1&gt;Title of Website&lt;/H1&gt;" Are you saying that this is a satisfactory substitution for the H1 text of 'Title of Website', whatever the title of the website is? Surely not! In which case, how do I assign what was previously the H1 tag (and all the authority which that carried) to the logo image which bears the name/title of the website?

[texxs]

The ALT attribute was NOT built for Google or any search engine. It was built for visually impaired people.

[Iodine]

I agree with Matt, but think it's also an issue of semantics. It makes sense to have your logo be an img tag. It's an important image to the document (opposed to images used for your background textures/gradients etc).

If someone turns off CSS on the page, they'll still see the logo.. the rest of the page will just look like a poorly "styled" Word Doc. But it's all "important" content.

[texxs]

LOL you may me faceplam! Let me help you:
For people who are visually impaired, their use a special browser that NEVER loads the images (because the can't see), instead, it reads the alt tag out loud. In regular browser sometimes the alt tag is displayed if the browser can't load the images for some reason.
The title tag is visually displayed in regular browsers when a user hovers his cursor over the element with the title tag.

It's okay, everyone makes mistakes. I still love ya!

[jwxapp]

He said do not use CSS to 'Hide' text. I interpret using text-indent, display:none as 'hiding' but using css to position an image over text that is still inside of the viewport is not hiding...

[Iodine]

BTW... was referring to the fact that most URLs represent the same text (or a variation) presented in the logo.

[TerminatorFiles]

Though I love the vids, this time its not accurate. The ALT tag is made to place an ALTernate text for images that are not displayed (ie text-readers for blind people). Their browser needs to see the alternate tag and read out its contents. For HTML Strict, the alt IS mandatory, but its better to user the title= tag for text. Soo.. I have logo and add alt=Company name title=Click for the Company name homepage" to the code. Good for SEO, user friendly and the best coding.
(from a moderate CSSr)

[dennisnedry]

It's illogical to do the same thing twice without reason. What added value are you anticipating?

[Iodine]

I don't agree on wasting an H# tag on your logo... definately not an H1 or H2. Typically you're URL is going to give you some strength for your logo anyway. Spend the h1 and h2's on important stuff related to that particular document.

[dennisnedry]

Thank you! No idea why folks overlook the alt tag and opt for -9999 hackish solutions in the name of "better SEO". It's always bugged me.

[konorokingdom]

Does the same apply for CSS Spriting? Correct me if I'm wrong but the question is directed at doing this for just one image. Recently many sites around the internet use CSS Sprites to improve web loading speed and it seems the only two ways to get any sort of SEO benefit from these is by doing a text-indent to hide original text or a transparent gif with alt tag on top of the sprited image.

It would be better to have quicker pages than worry about Google penalising us. Apple.com does this also

[texxs]

They should adapt to us, not the other way around. He's also being dishonest in his answer. CSS hiding works great for SEO purposes and if they have images turned off they'll see the text.

[EricKatz]

How come sites like google analytics and youtube don't have img's with alt text if it is supposed to be best practice?

What I mean to say is - how come you are emphasizing images with alt tags over css solutions when you dont have images + alts for your own logos and implement css to display them the way they are now. Or are you just saying that if we are going to have text there with the logo it is preferable to do it with img + alt rather than negative indentation?

[TerminatorFiles]

I guess you did not see that my original reply was made 4 years ago?! Sure we now have HTML5, but the techniques aren't yet fully supported on all browsers. Its only a matter of time that someone refutes this post... lets say... in another 4 years time?! ;).

[texxs]

4 years ago! I'm living in a bubble of the now I guess. Weird that it was still on the first page of the comments though. It's interesting to think what some yahoo will post on my comment about html5. Probably something like "HTML5? Why are you using telepathic html like everyone else!"

[jcm_dev]

People use Over Nine Thousands Pixels!

[vegetaway]

matt, i know that in theory this is the best practice. but wouldn´t my results be better if I hide my text with CSS? I know that I could be punished for that, but if it there was no punishment for this?

[dennisnedry]

How is "CSS hiding" relevant if alt achieves what's required?

[texxs]

The 9 votes is what I was talking about. Doesn't seem like a lot does it? Of course I see the video only has 77 likes in the many years it's existed...
Why so angry?