28 replies to this topic

[mktgnut]

Hi, all,

We are optimizing a site that will use graphic headers. The development firm
is suggesting the following coding for the graphic nav buttons:

<div class="textnav"><a href="navtextbutton.html">Nav Text Button</a></div><a href="navtextbutton.html"><img src="../images/navtextbutton.jpg" width="144" height="24" alt="" border="0"></a>

and this coding for the headline (so we can use the <h1> tag):

<h1 class="textnav">Headline</h1><img src="../images/header.jpg" width="262" height="35" alt="" border="0">

I've spidered it using the SIM spider and it's working, so assume code is OK. Any comments?
Btw, any other tools out there to check for spidering that are better than SIM spider?

Thanks.

[qwerty]

I'm confused. This pair of tags:

<h1 class="textnav">Headline</h1><img src="../images/header.jpg" width="262" height="35" alt="" border="0">

indicates that you'll have a heading followed by a graphic. Is the "textnav" class formatting the heading tag in such a way as to make it invisible, or are both the text heading and the graphic going to be on the page?

[Jill]

Like, Bob, I'm not quite sure what it is you're trying to do.

Are you saying that the graphics will be on top of the text, so that the text won't be seen by the average browser? If so, I wouldn't recommend it. It's doubtful it would be caught or penalized by the search engines, but it may be something they would consider to be some sort of trick.

Of course, if the words under the graphic were the same as the words contained within the graphic, then I think it would be perfectly fine. It would only be a problem if you were saying one thing on the graphic, and then something else underneath them.

But I may be totally misunderstanding what you're planning to do, so please explain further.

BTW, welcome mktgnut!

Jill

[qwerty]

I read an article months ago about using CSS to make text the background for graphics. The idea was that you could have control over the look of the page by using graphics instead of text, so you could use a font that you couldn't expect your users to have. For spiders, and for users with graphics turned off, the image would not load, so the text would be there.

I thought it was an interesting idea, but a bit risky. I worried that the spiders would view it as hidden text, so I didn't try it.

Now, if I'm reading this right, mktgnut wants to do something like this, but take it a step further by putting the semi-hidden text in a heading tag. I think that only adds to the risk. If a SE sees this as hidden text, the fact that it's in a heading tag is likely to make them view it as even worse than hiding normal text, in my opinion.

[Jill]

That's true, Bob, if the text is different than is being used on the graphics, but if it's the same as the graphic, I see nothing wrong with helping to overcome the search engine's short-comings of not being able to read graphics.

Granted, the image alt attribute would also serve that purpose, but perhaps there's some other good reason for having the text underneath the graphic? I'm not very familiar with the technique, so I'm not really sure. If there are other good usability reasons, it seems like a good idea, in general.

Obviously, it's open to abuse, just like so many HTML coding techniques. That doesn't mean people should use techniques in the manner to which they were intended. Things like comment tags and noscript tags, all have good uses and people should never, ever be afraid to use them as they were intended.

Search engines don't dictate HTML coding. They never have, and they never will.

Jill

[qwerty]

I agree, Jill... the only problem is that (and of course, I'm not sure if this is what the original question in the thread was really about) using CSS adds another element to the question of whether something is "hidden". If a spider can't read it, but your intentions are good, then is it OK? I hope so, but I'm not so design-conscious that I'd try something like this despite any risk I might think it might have. That is to say, I'm not skilled enough to make a page look so good using this method that I'd fight to keep it that way.

But if anyone is interested, I found the article I was talking about. It's at http://www.stopdesig...s/replace_text/

[added] And I had this backwards: the article suggests using the image as the background for the text, but using the CSS to format the text not to display. So for spiders and users with CSS turned off, the instructions from the CSS to display the image instead of the text will not fire, and the text will be displayed.

Edited by qwerty, 08 September 2003 - 07:17 PM.

[Jill]

Wow, what a wonderful article! So much of HTML that I have no clue about any more.

From reading that article, it's a great way to keep sites beautiful, but also accessible to all, and would conform to all standards. I think it's great, and as long as it's used correctly, there won't be any problems for the search engines with it. In fact, it's great for the search engines, and they would certainly welcome the ability to be able to read images they might not otherwise be able to read.

I liked that they even wrote the following caveat:

This replacement method needs to be exercised with a certain amount of responsibility. Care should be taken in matching the text of each replacing image with the same raw text in the HTML. Otherwise, it wouldn’t be fair to give visitors seeing full-blown stylesheets different textual content than visitors seeing, hearing, or feeling content without the same stylesheet applied.

Great article. Thanks for sharing it, Qwerty!

Jill

[Mel]

This type of CSS formatting can be used (not sure if this is the case here) to put a bit of spiderable text over a graphic for visual effect (nav buttons etc) in which case it works fine.


PS love the spell checker Scottie, great help to those whose typing speed and skill does not match thier thinking speed.

[mktgnut]

Hi, guys,

Thanks for all the advice. Yes, I had never seen this coding either and was concerned that it would appear to be deceptive.

We need to use graphic headlines since the font used for branding purposes is not a common one. But the developers suggested using the code I noted for the headline to insert an <h1> tag and text that would not be visible to viewers, but would be spiderable.

The "invisible" text is exactly the same as the headline. So, Jill, you sound as though that may be acceptable. Or should I go the safe route and use the <h1> tag and just use a graphic and alt tag?

Mktgnut

[qwerty]

So the "invisible" heading text would never be visible to any users -- just to spiders? I would have a problem with that. In other words, you're not talking about using the method described in that article, in which the heading text is visible to anyone not using CSS, but instead formatting your H1 tag in such a way as to make it invisible, by making it small, the same color as the page background, or setting it in the CSS not to display.

The way I see it, anything that's done exclusively for SE spiders is risky, even if they don't yet have the technology to understand either how or why you've done it.

[Jill]

The "invisible" text is exactly the same as the headline. So, Jill, you sound as though that may be acceptable.

Absolutely! If you're using the same text as the graphics, it's a wonderful, elegant solution.

So the "invisible" heading text would never be visible to any users -- just to spiders?

No, Bob, I don't think that's true. It would be available to all who use text-only browsers such as Lynx, etc. Text-to-speech readers too, from what I understand from that article.

Jill

[qwerty]

I'm not sure the plan is the same as the one described in the article, Jill. That's what I'm trying to get clarified. Besides, text set to 0px or white on white is visible to Lynx users, but I'd still call it hidden text.

[Jill]

I'm not sure the plan is the same as the one described in the article, Jill.

Really, why do you say that? Sounds the same to me, but maybe I'm missing something.

They're using the same copy as what's in the images in both cases. Not a problem, great use of coding and design, usability and accessability as far as I can tell.

What am I missing?

Jill

[qwerty]

You might not be missing anything. Perhaps I'm just being overly careful here. My concern is based on my reading of this:

But the developers suggested using the code I noted for the headline to insert an <h1> tag and text that would not be visible to viewers, but would be spiderable.

Maybe I'm just reading it from a paranoid perspective, but I'd need some clarification to be certain. My question is, does "text that would not be visible to viewers, but would be spiderable" mean text that is not visible to users with CSS turned on, or text that is never visible to users?

...Let me clarify my concern. If the plan in the article is used, then most users will see the graphic, and those with CSS or images turned off (including spiders) will see the heading text. However, if the plan is to format the heading text to be invisible, users with images turned off (with the exception of those who use a browser like Lynx) will see neither the graphic nor the heading text.

[Jill]

What's wrong with making the site Lynx compatible/accessible? Seems like doing so also makes it handicapped accessible, and should actually be the standard all should use when they use graphical headers.

Jill