Archive for the 'Grey Hat' Category

Hidden text that works for everyone!

Thursday, July 10th, 2008

So hidden text on the web is a BAD THING, we all know that. Gone are the days when it was considered cool to stick loads of words on a page — usually at the bottom — in the same colour as the background, possibly in 5px type.

Of course the search engines got wise to this “keyword loading”: it contributed nothing to the content of the page, after all. It got dumped into that category of “Blackhat technique”.

Good content is all about value to the reader and every word should count, so stuffing lots of “invisible” text on a page is simply wasted pixels. If you want to increase the keyword densities of your pages, simply write more (or at least write better).

But hang on. Never say never. There is a very good reason for including “invisible” text on your page, and not just the correct use of alt- and title-tags.

Those with a visual impairment rely on the text on a page completely: pretty pictures make no difference to them, so make the page work for people who can only read text. That means fully explaining text links and adding blocks of text to substitute for images.

This is all achieved using the CSS attribute display: none;

Create a style called .accessible (or .ted or .jarvis or whatever, it’s not important) thus …

.accessible {display: none;}

Now, any time you want to add “hidden” text, you can do it simply by wrapping it inside this class.

That means that the phrase …

The <span class=”accessible”>cat sat on the </span>mat

renders to an ordinary browser as …

The mat

but to a screen reader as …

“The cat sat on the mat”

Of course it’s a frivolous example but you might use this technique to improve a list-based navigation.

One site I worked on had a left nav where the code was a horrible table-based affair …

<table width="180" border="0" cellpadding="0" cellspacing="0"  class="bgrleftmenu"> <tr> <td width="20"> <img src="../images/default/spacer.gif"width="20"   height="36"></td> <td colspan="2" class="headerleft">Menu</td> </tr> <tr> <td colspan="3"> <img src="../images/default/spacer.gif"width="20"   height="8"></td> </tr> <tr> <td>&nbsp;</td> <td width="13"> <img src="../images/default/spacer.gif"width="4"  height="7"></td> <td width="147"> <a id="ctl00_LeftUserMenu1_LeftMenu1_hlinkHome" class="linkyellow12"  href="default.aspx">Home</a></td> </tr> <tr> <td>&nbsp;</td> ... <td>  <img src="../images/default/spacer.gif"width="4"  height="7"></td>  <td> <aclass="linkyellow12"   href="../en/help.aspx">Home</a></td> </tr> <tr> <td colspan="3"> <img src="../images/default/spacer.gif"width="1"  height="12"></td>
 </tr> </table>

However, the Semantic alternative was not only much more elegant, it worked better in terms of accessibility AND in terms of SEO!

<h2><span class="accessible">Site </span>Menu</h2> <ul>
 <a href="./." title="Go to the Home Page"> <li> <span class="accessible">Go to the </span>Home<span class="accessible">Page</span> </li> </a>  ... <a href="../en/help.aspx" title="Need Help? Get it here!"> <li> <span class="accessible">Need </span>Help<span class="accessible">? Get it here!</span> </li></a> </ul>

In a common or garden web browser both of these would produce a standard vertical navigation …

:: Home

:: Help

But via a screen reader you get ..

:: Go to the Home Page

:: Need Help? Get it here!

“But what’s the point of all this?” I hear you cry. “Are you just being nice to blind people?”

Well, yes — and remember that a MAJORITY of the world’s population has some sight impairment — but there’s one “blind” individual that’s important to everyone interested in content and SEO: your local search engine.

Search engines, whatever flavour (but we’re all thinking Google, aren’t we) are effectively “blind”. That text-light, image-heavy page may look good to humans with perfect eyesight and a true sense of colour dynamics, but to Google it’s just a load of source code.

Make your site more accessible to those with a visual impairment and you also make it more accessible to the search engine spiders, but use a technique like this and you actually get more keywords on your page with no penalties!

Five ways to damage your SEO with content

Monday, August 27th, 2007

1. Write Rubbish

If your content makes no sense, if it’s dull and irrelevant, if not even your mother would make it all the way through, then you can be sure it will be bad for SEO. Make content interesting, make content readable, make content fun!

2. Duplicate It

There’s nothing quite so annoying as content repeated again and again. I mean, there is NOTHING so annoying as content which is repeated time after time. Really, repeating content again and again and again is really, REALLY, really annoying. The search engines don’t like it either, you might even describe it as SEO’s worst nightmare. Don’t use content which is duplicated (or even just summarized) elsewhere on the internet — even if it’s your own copyright, especially if it’s duplicated on the same site. Check for originality on if you’re not certain, and even if you are. Even if the content is your copyright and has been copied by someone else, it can hit your SEO if the copying site has a higher Page Rank than yours.

3. Make It Invisible

For search engines, invisible text equals SEO scam. Technically, making content invisible to the naked eye — for example, making it the same colour as the background or making it transparent or putting it in comment tags — comes under the heading of “Black Hat SEO”, or cheating. It’s a way of artificially loading content with keywords [SEO, content, search engine, timeshare, cialys, pre5cription5] to bump up the density, and the search engines got wise to it years ago. It will hurt your SEO.

4. Use JavaScript To Present It

Search engines just won’t index content which is provided by JavaScript. There have been too many SEO scams using scripts in the past and Google and the rest aren’t taking chances any more. If all you can see in the content source code is a ton of JavaScript, then you can be sure that the search engines won’t be seeing it either.

5. Make It Chaotic

Content should make sense. Part of that is how it is organised. One of the best ways to ruin your SEO is to order content in an illogical, inconsistent fashion so that the reader doesn’t know whether they are at the beginning, middle or end. This extends to your <h> tags: use them in the order <h1>, <h2>, <h3> … <h6>. Keeping content organised means the search engine spiders can crawl it, index it and rank it to the best effect.