Search Engine Overload
This little spiel is a lengthy commentary on a discussion that has been taking place over at Devil’s Details. What began as an entry about an interesting menu placement choice has turned into a discussion on SEO abuse.
The site in question is Servus. While it is reasonably well-designed visually, it is what is under the hood that draws concern. A quick look at the source code reveals an enormous pack of what appear to be keywords, but they’re not contained in the HEAD’s META tags. They’re placed in the BODY of the document, hidden to visual browsers by CSS.
As I see it, this is not unlike the late-1990’s SEO-spamming tactic wherein a slew of text was placed at the bottom of a page and hidden by matching the color of the text to the color of the background. This new trick doesn’t strike me as much different except that instead of being appended to the end of a webage, the extraneous text preceeds the page’s content. Naturally, this raises some concerns.
Can you say “Biggie-Size?”
While it may be true that the world is moving ever more swiftly to broadband internet connections, the fact of the matter is that the smaller a webpage’s filesize is, the better. This applies with even more emphasis to the Home page. This is one of the reasons we use web standards in the first place. We want to trim down filesizes and streamline the user experience.
I had no trouble opening or downloading the page, thanks to my broadband connection. Still, I was curious to see just how much of this page’s weight was attributed to this hidden text. I saved the Home page to my desktop and checked the filesize: 249kb. I opened my text editor and deleted the hidden DIV and all its keywords. The result? The page came down—way down—to 10kb. Wow.
Semantics, Semantics, Semantics.
A webpage is a document, and is meant to follow an informational hierarchy. Menus and the main headline usually reside at the top of the page, with content and lesser page elements falling below it. Semantically, placing the keywords in a DIV at the top of the BODY tag is incorrect. Doing so implies that the keywords are content. Not only that, but the placement implies that the keywords are the most important content on the page: loaded first, appearing first, and making up the vast majority of the visible content. But that’s the intended perception, isn’t it?
Granted, CSS conveniently hides this massive brick of keywords to visual browsers, but we’re not all visual, are we?
Picture This (or not).
Accessibility is quickly becoming non-optional. Websites that offer information to the public owe it to their readers to make sure that as many people as possible can access the information they need. Thankfully, the DIV brick o’ words only appears on the Servus homepage, but just imagine the quagmire that text browsers, screen readers and other CSS-disabled devices could find themselves in upon loading that page. There is no “skip to navigation” link or any other reasonable way to get past the mass of keywords except scrolling. And even scrolling is a pain.
Final Thoughts
I’m not trying to single out or villanize the persons responsible for building this website. I’m sure this method has been employed before. Certainly there is pressure for designers and developers to get their clients’ sites ranked high. Not everyone can afford to be a purist. That being said, I can’t see that there’s much of a defense for this kind of practice, even considering all the defending that has already taken place. My concern is the impact this practice has on usability, accessibility and semantic value.
Given my lack of expertise in SEO, I’d be interested to hear what optimization-saavy folks think of this. Is it a common practice? And do you, as a designer or developer, think this is a legit method of attempting to boost a pagerank?