Jul 28th 2010 × using mootools pseudo selectors to SEO check for hidden page elements
This is an interesting one. Basically, there’s a school of thought in SEO that says, you should not apply a display: none CSS property to elements without a valid reason. By valid, it is understood that the hidden content it is somehow interacting with the user based upon events. For example, flyout / foldout menu systems, mouse tips and so forth are acceptable. Hidden text for the purposes of increasing keyword density and SEO relevance is NOT ok.
There are some sites that claim to check what is detectable and what is not but the bottom line is, only one thing will give you a 100% guarantee and control over what your page is hiding and that is reading it from the DOM directly.
I wrote a little snippet through mootools (as all my sites use mootools) that uses a pseudo selector to search for particular style settings.
*UPDATE* if you found this through some SEO tag/search, you should know that this will only work on pages that utilise the mootools javascript framework (link is on the right handside) and in a browser with a console (chrome, safari or firefox with the firebug plugin). With my “usual” type of readers being web developers, I tend to take this for granted.
// for mootools 1.2
Selectors.Pseudo.style = function(key) {
var styles = key.split("=");
return styles.length == 2 && this.getStyle(styles[0]) == styles[1];
};
// output all elements with display: none to console
$(document.body).getElements(":style(display=none)");
Just open your page, open up firebug and the larger command line console and paste (or make a bookmarklet).
Neat or not? You can also look for visibility: hidden or other tricks you can think of (positioning and so forth may need some changes to the code).
note: for mootools 1.3 and slick (still in beta), you need to change this to:
Slick.definePseudo('style', function(key) {
var styles = key.split("=");
return styles.length == 2 && this.getStyle(styles[0]) == styles[1];
});
I hope it helps you – it’s a useful trick anyway, you can use this to select all elements with color: red, for example.
