Please Do Not Kick the Leviathan (SEO vs. Design)
This website shows the general statistics for the percentage of users who use the Google search engine versus other "top five" engines. As we've always suspected, Google is the great Leviathan rising out of the deep, lidless eyeball fixed upon all it surveys. No one can escape the Leviathan. No should fear the Leviathan, apparently, because the Leviathan is a helpful beast who wishes only to increase the flow of information in this world.
The road to SEO mastery is a long road, frought with frustration and despair. Aside from the lack of complete rules and regulations, which is done to avoid exploitation, various tricks and work-arounds that legitimate web-designers use (as opposed to, say, spammers) could get your site red-flagged by the great Leviathan, which in and of itself doesn't mean anything. At least until you get too many red flags, in which case it means a great deal.
Unless "red-flags" by itself, is simply a bogeyman in the Leviathan's closet, but that's another post for another day…
WD Weems and I broached this in conversation last week, when we were talking about how to microformat Mindfly's usual calling card on the sites we design. Barest minimum, we have an organization name (org), which also doubles as a full name (fn), and a url. The tag itself tends to look as simple as this: site by Mindfly
The question stemmed from where to put the URL. If we were to look at the tag in markup, it would look something like this (a generality, as sometimes the markup around it will change):
<cite>
site by <a href="http://www.mindfly.com" title="Our Beautiful Design and Development">Mindfly</a>
</cite>
As is easily seen, there's our FN and ORG in Mindfly, but what about URL? Microformatting doesn't look at the addresses written in the markup itself, so this leaves us with a little bit of a quandary. Adding the URL to the cite link would make it entirely too text-heavy, and just adding a URL in place of the rest of it makes it mean less to your average viewer. We're not in it to make them think! At least, not in the distracting, take time out to figure out a website sort of way.
My theory, as posed to Kyle during this discussion, was to place a display: none on a span surrounding the URL we'd add below the "site by Mindfly" bit. This, to me, is not violating any sort of spam rules, since the URL is already in the information (just hidden beneath an anchor link)and is only for the purpose of microformat sniffers, anyway. However, a search on how Google crawls its way through pages revealed a great deal of warnings and speculation and shrug-offs about using such techniques. The conversation went something like this:
Me: "What if we use display:none on the url?"
Him: "Then you get red-flagged by Google for hiding content."
Me: "Does that mean every page with every display:none gets dinged?"
Him: "Yes."
Me: "But we use it all the time for other stuff like js and rollover menus!"
Him: "And we probably get flagged for it."
Me: "That's stupid!"
Him: "Maybe, but it's all because of the spammers."
Me: "Well, fine, if that's the case, we don't use display:none on rollovers and stuff on every page. What's one more?"
Him: "You don't want too many red flags for hiding content, or you'll get dropped from the ranks."
Me: "But we're not hiding content."
Him: "Yes, we are."
Me: "No, we're not! It's right there!"
Him: "It's hiding it and Google will flag it."
Me: "But it's right there. Under the <a> markup. That's technically hidden, for all Google cares, but it's not, because right there is the url for all to see."
Him: "But it's hidden."
Me: "No, it's not! That's STUPID!"
Him: "If you're going to yell, I'm going back over there."
And so on.
I did a little more research on the matter and re-acquainted myself with yet another gem by the great Andy Clark, who is and will remain my benchmark until I get awesome enough to make my own. Unfortunately, a thorough read-up of his microformat examples don't offer any immediate of answer for this quandary.
Therefore, it looks like it's up to me to be awesome.
My thoughts are this: as a web designer, novice though I may be, it's my job to take information, assimilate its use and need, and then arrange it in such a way that provides both interest and functionality to you, the web site viewer. Cluttering up a design or site with too much information (or worse, identical information, such as a link to a site with its url right beside it) is only going to be frustrating for me and annoying for you. So with that said, I think that there's nothing wrong with sprinkling your random hCard with display: none in order to force the information into a agreeable and design-friendly interface.
And I'll hope that the Leviathan that is Google isn't going to be a pain in the CSS about it.
… -kick-