PageSpeed, Background images, Hidden Links
Robbo - W3C Rocks!
I've recently been working hard to implement PageSpeed recommendations
on some of my sites.
I am now using the following to display the site banner (for example):
<div><a class="bbg" href="/" title="TESOL courses"></a></div>
In the externall CSS, the a.bbg is defined as a block-level element
(instead of the default inline element) about 450px x 70px and has a
highly visible background image attached that covers the full height
and width.
The page validates successfully as XHTML Strict both by W3C and WDG.
My anxiety is that in the XHTML coding itself, the <a ...></a> looks
"empty" and therefore "hidden".
But then it occurred to me that the following link does not look empty
or hidden even though the image could be a 1px x 1px transparent .jpg
and hence not visible, thus in effect hidden:
<div><a href="/"><img src="/images/x.pg" alt="TESOL courses" /></a></
div>
So the bottom line question is whether my way of using a background
image with a block-level A tag is "safe" regarding google crawling,
indexing and ranking or might it be seen negatively as a "hidden"
link.
<div><a class="bbg" href="/" title="TESOL courses"></a></div>
I would be interested to know if this 100% valid XHTML Strict
technique which is entirely non-deceptive, could be misinterpreted by
googlebot.
Any ideas anyone?
webado
a href="/">stuff</a> is not an empty nor a hidden link. That's a link
to the root of the site, the homepage.
However you style it is up to you. Of course if it ends up being
invisible or almost ... that's different :)
Yes, a 1px image is practically invisible, so such a link is in fact
hidden. If it's a link to an internal page it's pretty useless to do
that, if it's a link to another site, then yes, there's a problem, as
soon as the trick is found.
It's not a question of misinterpreting ... what's to misinterpret? if
the image in the img tag is invisible (clear) and/or very tiny, and
hence there's no visible anchor then it is a deceptive practice.
Something I have done at times however is set a div of some dimensions
(e.g. 100px by 100 px) with a background image that fills it out. I
overlay a clear.gif over this, dimensioned also 100 by 100, and used
as anchor for a link. This is fine, because you can tell the entire
background image of that div is clickable (though it's the clear gif
that is the anchor).
On Sep 20, 7:35 pm, "Robbo - W3C Rocks!"
Robbo - W3C Rocks!
Hi Webado
I think that I didn't make myself very clear.
I want to use the following:
<div><a class="bbg" href="/"></a></div>
There is no link text ("stuff" as you called it). There is no <img
src= ... in place of link text.
At the HTML code level I think it looks like a hidden link.
It is not a hidden link because the A block-level element is 400px x
70px and has a large image attached as background.
~~~~~~~~~~~~~~
In the thread recent thread (20 Sept)
http://www.google.com/support/forum/p/Webmasters/thread?tid=0627529de09f6d30&hl=en&start=40
JohnMu recently referred to the following as a "hidden link" that
should be "cleaned up".
<a href="http://www.abc-awards.com"></a>
So my worry is if/how does google algo detect the difference between
the method that I am using and a "hidden link".
Christina S
You are not able to click on anything that way - are you? Regardless of how
big an area the <a ..> tag occupies. There's no indication to the browser
that a hyperlink is there.
Only robots - which don't click - follow blindly any url found in an href
attribute of a an <a ..> tag they find. But the smarter robots Google sues
recognize that it is a hidden link and take whatever action the algorithm
dictates: raise flags of hidden links or close their eyes benevolently. My
money's on the former ;)
> --
> You received this message because you are subscribed to the Google Groups
> "Only Validation + Navigation = Crawlability" group.
> To post to this group, send email to only-va...@googlegroups.com.
> To unsubscribe from this group, send email to
> only-validati...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/only-validation?hl=en.
>
Robbo - W3C Rocks!
The browser is very much aware that it is a link. If you mouse over
the 470 x 70 background image and the link, you will see the mouse
cursor change, and if you click it, you will be taken to the correct
page.
You can see it in action: it's the top banner "TESOL-direct" on
http://www.tesol-direct.com/
In use, there is nothing "hidden" about this link. The image is
prominent. The active area is large. The browser handles it
perfectly.
It is 100% compliant with W3C and WDG validation as XHTML Strict.
It is also entirely non-deceptive - the target destination of the link
is entirely consistent with the image displayed and the context.
But my fear is that it will be wrongly detected by google as hidden,
and affect the site negatively.
Do you think it would be a good idea to ask JohnMu how googlebot would
regard this?
Christina S
Still I'd have used a clear gif as an anchor with alt text as well, because
the robot does not check the css (especially if it's external) so it does
look like a hidden link. Sort of like the way the spam detector considers
black text on a white image on a white page as hidden text if there's no
dark background color to fall back on.
----- Original Message -----
From: "Robbo - W3C Rocks!" <vince....@btopenworld.com>
To: "Only Validation + Navigation = Crawlability"
<only-va...@googlegroups.com>
Robbo - W3C Rocks!
OK I'll do that. Thanks very much.
By reducing the number of separate http calls, and using compression,
caching etc, I have got my PageSpeed score up to 93/100 and I'm aiming
for 97 so every little helps!