Replacing text links with images via CSS

[minorgod]

I'm working on optimizing the internal links on my site. I have a list of products with a "view details" link next to each and am considering using CSS techniques to include keyword-rich text in my links instead, but then replace that text with a standard "view details" button image. The technique involves wrapping the link text in a tag such as a <span> and then using CSS to hide that <span> using the "display:none" attribute. So my link code would look something like this:

<span>Keyword rich link text.</span>[img]somegraphic.gif[/img]

If I set up a style to hide the contents of the <span>, then only the graphic will show up. My question is, is this a bad thing? Will this technique help or hurt my rankings?

[minorgod]

Bump.

[Webnauts]

Hidden text or hidden links are SPAM!

More about this: http://www.google.com/support/webmas...y?answer=35769

You can use the alt attribute for your images though.

[minorgod]

If hidden text is always counted as spam, then why is it common practice in CSS designs to replace headings with images using the method I've described? It seems like most of the CSS layouts I've seen recently would be automatically flagged as spam if that were the case. Please check out the link above if you don't know what I'm talking about.

The way I'm doing it, The hidden link text will still be pointing to relevant target pages and is not being used as an attempt to trick the search engines, it's just a way of putting more descriptive/relevant text into a link, while offering the user a more pleasing display. Is the alternate method of using CSS padding and overflow to hide the text any better? Anyone else have an opinion on this?

[Webnauts]

Minor God there are endless of techniques using CSS, but that does not mean that they are legal for Search Engines.

And to go further, that technique is not semantically correct, and it violates accessibility. PERIOD!

You can solve that problem, adding a title attribute in you link or an alt and or title attribute in your image tag, if the graphic is meaningful and describes the graphic.

For example: [img]somegraphic.gif[/img]

It is up to you. ;)

[minorgod]

And to go further, that technique is not semantically correct, and it violates accessibility. PERIOD!

Again, thanks for your comments, I really do appreciate you taking the time to answer. I'm still a bit confused as to how the page is not sematically correct or how it violates accessibility. The whole reason we're using that heading tag is to provide structure to the page in a way that an alt or title attribute can not. If you validate the page in outline mode you can see why. You are correct, there are many ways to use CSS and not all of them are legal, however I see many top ranked sites that use hidden text for a variety of reasons that are definitely not semantically correct, and I don't see how the search engines determine what is good and what is bad. For instance, there are many sites that put a short description in a DIV and then give you a javascript button to expand the DIV and display the complete text. This often involves hiding entire paragraphs of text until the user has clicked a particular button. Should that get them banned from search engines? So, when is it acceptable to use hidden text? How would a site that hides text as I've just described be okay, but my site which hides only 4 words of a header and then replaces them with a graphic of the exact same 4 words not be okay? I mean seriously, I'm hiding the phrase "The Real Estate School, Inc." and then replacing it with a logo that reads "The Real Estate School, Inc.". If I just used the logo, then the structure of every page omits our company name. That's why, after reading a myriad of articles on XHTML and CSS, I decided to add that header. It makes the stucture of the page a bit more sensible. It ensures that our company name is included as the first heading on every page, nothing more.

For the record, I didn't just pull this idea out of a hat, our site has ranked among the top sites in our industry for over 5 years with zero use of any questionable SEO. That's no small feat for any site related to real estate as many of you probably know. I only added this header to our homepage a few months ago when we started converting our site to standards-compliant XHTML. The homepage is the only converted page we've made live so far, so I'm glad we're discovering this potential problem before we mess up the rest of our rankings.

At any rate, there is obviously a consensus among those who have replied to this thread that any hidden text is bad. "PERIOD!" Though I think this is not such a black and white issue (seeing our homepage still #1 for other keyword searches and we added this tag several months ago) I will probably end up removing the hidden <h1> tag it if I don't hear any comments to dispute this consensus. Thanks again.

[Webnauts]

I must correct or clarify my previous post, which was just a copy and paste from the Google QA guidelines.

There is nothing wrong with hidden text if you aren't trying to trick search engines. Plenty of coders employ hidden text for css dropdown menus and skip links.

But you are hidding keywords, which the SE can pick up easily, comparing with the keywords in your url, title or meta description and keywords tag, etc.

Check your page with this excellent tool, and you will see what I mean: http://tool.motoricerca.info/spam-detector/

That is all I can tell so far. If you are so sure that it is OK, then leave that as it is.

Good luck buddy. :)

[minorgod]

Originally Posted by Webnauts

There is nothing wrong with hidden text if you aren't trying to trick search engines. Plenty of coders employ hidden text for css dropdown menus and skip links.

That's exactly the point I was trying to make. It seemed to me that replacing "The Real Estate School, Inc." heading with a graphic reading "The Real Estate School, Inc." would not be an offense to Google, but it does seem like this technique is too controversial to continue using until I see some comments on it from someone like GoogleGuy (Matt Cutts) who can provide the official search engine perspective on this specific use of a hidden heading. I've also been considering using this technique to replace text links on my site with graphic buttons, but I think I will scrap that idea in light of this discussion.

I did notice something on this Google page that was interesting. They say:

If you site is blocked from our index because it violates our quality guidelines, we may alert you about this using our webmaster tools.

Then on this page they talk about what will show up in your webmaster tools account if your site has been removed for some kind of violation. So I checked my account and there are no issues with my site (other than a few broken links) according to their reports.

In short, I'm still confused about why we disappeared for a single keyword search phrase, but I will probably err on the side of caution. I think we've beat this one into the ground enough and I'll just have to try reverting to the old version of our page and then if that doesn't work, I'll remove the questionable heading and request reinclusion just to be on the safe side.

[Webnauts]

Aha! My posts were approved by Google! You have many pages in their supplemental results, waiting for the day of judgment!

Do you still have questions?

By the way, try to fix your endless broken links too.

[minorgod]

Originally Posted by Webnauts

Aha! My posts were approved by Google! You have many pages in their supplemental results, waiting for the day of judgment!

I have no idea what you are referring to. Please clarify what posts you are talking about Google approving and what you mean by "waiting for the day of judgement".

[Webnauts]

Minorgod see here: http://www.webproworld.com/viewtopic.php?t=68675

And the day of judgment is the day Google re-builds its index, and gets rid of the spammers sites.

We predict that shall be sometime in November.

And please don't feel pissed off, as I think I did my best to help you.

[minorgod]

Apparently you missed the post where I went out of my way to thank you profusely, so here you go again:

Again, thanks for your comments, I really do appreciate you taking the time to answer.

I guess you must have interpreted that as some kind of "thankyou spam" or something. I don't know why you insist on talking to me like I'm an idiot. All I wanted was some clarification on a few things you said, but if it's too much to ask then by all means, go "help" someone else and I'll wait for someone who actually wants to read my posts and answer the questions I've asked without the attitude.

[Webnauts]

Minorgod, I possibly have misunderstood you. And my apologies for that.

I thought that you had doubts about my advises, as I never give advises if I have even 1% doubts about it, as I have a very good reputation, and I can not take any risks to spoil that for any price.

So can we smoke the pipe of peace now?

If yes, I will explain you the rest. Is that a deal?

And by the way I feel an urge to tell you that I am a half Cherokee Indian, the most peaceful Indians race of North America. I am just stressed out man.

[minorgod]

Deal! I am sorry this thread took such a nasty turn. Again, thank you, thank you, thank you for your help. And while I'm at it, let me apologize for what my anscestors did to your anscestors (I think we'd all be better off today if native americans were running this country). Seriously. Thanks. Peace pipe passed, hit, repacked and passed back.

[minorgod]

I have removed the questionable <h1> tag and replaced it with a standard image link, title tag and alt text. I will now submit a reinclusion request with full details of what I did and why, and hopefully this will all work out. Never again will I use "display:none" on any of my pages until I see proof that it won't end in disaster.

How's that peace pipe hitting? You need a refill?

;)

[bj]

minorgod, I think it's a matter of degree. It's pretty standard to use an image replacement technique for one h1 header, and will most likely not be construed as spam. However, when you go above that number that's when things get dicey. I know Matt Cutts talked about this on his blog, though I don't have it bookmarked. You might try searching there.

Also, the css-discuss list archive and wiki have a lot of info on image replacement techniques, including which are more accessible.

[G[dot]com]

ok. I say: I can´t foresee if you will be get penalized or not for such kind of hidden texts in your website. Perhaps you won´t. But that´s not the problem, the main question here is: is it necessary to run such risk? What would be the benefit in case all goes alright?

Don´t you already have enough to play with using as mentioned above by John, the "alt" attribute for images, keywording the file names of those menu images themselves, and adding the "title" attribute to the <a> tags?

I think that, eventhough it is not genuine "anchor text" as you want to include it hidden, it´s a lot and worth enough to work with and hope for good rankings. And it is semantically correct and perfect regarding accesibility issues. And a whitehat technique.

Perhaps you could make one menu with images (the "cute" one) and add a menu at the bottom of the page made of text alone?

Well, just my 2 cents.

Peace ;-)

[meinking22]

I have a better method for you that is perfectly legit. Instead of black hatting with CSS, why don't you just use the <a title=""> parameter. You can say anything that you want (although you shouldn't) and make it as long as you want (not recommended).

Steve

Orange County Real Estate

[Peter (IMC)]

<span>Keyword rich link text.</span>[img]somegraphic.gif[/img]

That´s a very complicated way to get the same results as an Alt atribute.. :)

And why use an image to put text? Just use the correct font family. If it doesn't look exactly like what you had designed,.. then get the closest thing to it. No visitor will complain about it.

[craigmn3]

Okay beside the fact that I don't know why you'd walk away from text anchors , unless style means more than SERPs it seems simple to me that if your hidden text is one of your keywords that is going to key the stupid little spider crawling your site.
I don't mean to disparage the little bugs but they are not hugely bright. They do not discern layers of gray or textures....they literaly see black and white and their little difference data engines will jump at certain criteria. One being....if you have key worded phrase and you have hidden it -spam.

The bottom line is stop complaining. What is, is. Adapt, adjust, overcome or.....die


Craig
Web Geek
Edited by mod Webnauts. You may have links to your web site only in your signature.

[weslinda]

I've always found the best question to be, "How does it help my visitor?" If it doesn't, then don't do it.