Verborgen tekst en links, niet slecht voor SEO!

Het verbergen van tekst en links is een veelgebruikte manier van vroeger om de zoekresultaten in Google te manipuleren. Simpelgezegd, in de broncode van de website is allerlei tekst (keyword stuffing) en/of links aanwezig die je niet toont aan de normale bezoeker! Voorbeelden: BMW (2006), Alex Chiu (2007).

Echter, er zijn natuurlijk ook veel situaties denkbaar waarbij het verbergen van tekst en/of links een functie heeft. De tekst en/of links worden op enig moment zichtbaar, vaak na een actie van de websitebezoeker (mouse-over, mouse-click). Geen kwade bedoeligen dus! Denk bijvoorbeeld aan:

• dynamische navigatie;
• lees meer, lees minder link/button;
• diverse tabs, veelgebruikt in ecommerce websites.

Maar je wilt natuurlijk wel dat Google dit allemaal gewoon netjes crawlt en indexeert! Met het misbruik van verborgen tekst en links nog in ons achterhoofd, is het natuurlijk interessant om te weten hoe Google hier mee om gaat.

Verborgen tekst en links, manipulatie versus legitiem…

Google geeft in het artikel Verborgen tekst en links een aantal voorbeelden. Belangrijker is echter dat Google aangeeft dat niet alle verborgen tekst als misleidend wordt beschouwd. Het punt dat gemaakt wordt is dat je site simpelweg geen tekst en/of links mag bevatten die alleen voor de zoekmachine zijn bedoeld (manipulatie) en dus nooit zichtbaar zal zijn voor de bezoeker. Onderstaande mag dus niet.

Tekst (zoals overmatig veel zoekwoorden) kan op verschillende manieren worden verborgen, zoals:

• Witte tekst gebruiken op een witte achtergrond
• Tekst achter een afbeelding plaatsen
• CSS gebruiken om tekst buiten het scherm te plaatsen
• De tekengrootte instellen op 0
• Het verbergen van een link door een link in te stellen via een klein teken, zoals een streepje in het midden van een alinea

In onze eerder genoemde voorbeelden is er geen sprake van dat we de zoekresultaten willen manipuleren, en Google zal deze verborgen tekst dus gewoon crawlen en indexeren. Ben je daarvan nog niet overtuigd? Lees dan eens Eric Enge Interviews Google’s Matt Cutts. Daar geeft Matt Cutts aan dat met gebruikelijke webdevelopement technieken, zoals dynamische navigatie, geen problemen hebben.

Eric Enge: Right. Are there hidden text scenarios that are harder for you to discern whether or not they are spam versus something like showing just part of a site’s terms and conditions on display, or dynamic menu structures? Are there any scenarios where it’s really hard for you tell whether it is spam or not?

Matt Cutts: I think Google handles the vast majority of idioms like dynamic menus and things like that very well. In almost all of these cases you can construct interesting examples of hidden text. Hidden text, like many techniques, is on a spectrum. The vast majority of the time, you can look and you can instantly tell that it is malicious, or it’s a huge amount of text, or it’s not designed for the user. Typically we focus our efforts on the most important things that we consider to be a high priority. The keyword stuffed pages with a lot of hidden text, we definitely give more attention.

Andere voorbeelden waarbij de hoeveel tekst niet past in het design van de website zijn de ‘lees meer’ links of de tabs. Een voorbeeld van de lees meer link met verborgen tekst zie je op onderstaande afbeelding.

Ook hier zijn gerustellende woorden van Matt Cuts te vinden op het World Wide Web, en wel in de vorm van een video.

Techniek voor het verbergen van tekst (toggling content)

Zelf maak ik momenteel gebruik van Twitter Bootstrap 2.3.2, en interessant om te zien is dat zij reeds twee classes beschikbaar stellen voor het tonen en verbergen van tekst, namelijk .hide en .show. Zie het bestand utilities.less.

// Toggling content
.hide {
  display: none;
}
.show {
  display: block;
}

In beginsel is het de juiste manier om via CSS met display: none; de tekst tijdelijk te verbergen. Hiermee verberg je de tekst visueel, voor de normale webbrowser gebruikers. Je verbergt de tekst hiermee ook voor mensen die gebruik maken van AT (afkorting voor Assistive Technology of Adaptive Technology), zoals screenreaders. Ook slechtziende of blinde mensen met een screenreader zullen dus pas de extra tekst lezen als zij op de ‘lees meer’ link geklikt hebben. Zo hebben alle gebruikers dus een zelfde ervaring.

Vanaf Twitter Bootstrap 3.0.1 is .hide vervangen door .hidden.

// Hide from screenreaders and browsers
//
// Credit: HTML5 Boilerplate

.hidden {
  display: none !important;
  visibility: hidden !important;
}

In het artikel How to: Hide Content wordt uitgelegd dat de toevoeging van visibility: hidden noodzakelijk is omdat sommige screenreaders display: none negeren.

Om de tijdelijk verborgen tekst zichtbaar te maken wordt via Twitter Bootstrap gebruik gemaakt van display: block. Ook dit is de juiste methode, maar schijnt volgens Yahoo in het artikel Accessible Solutions For Hiding Content niet voldoende gebruiksvriendelijk te zijn voor de screenreader gebruikers, zie onderstaande quote.

Now that you know how to use display:none to completely hide your panels. You need to do more than convert their display to block for accessibility.

Ian Pouncey’s article on the accessibility built into into the tabbed modules on the Yahoo! Home Page, Accessible Tabs in the new Yahoo Homepage –recreated with YUI3 and WAI-ARIA, shows you how to use YUI3 to handle the different events that hide/display the correct content, as well as allow screen readers to know how the page has changed.

Hebben we toch nog iets om te bestuderen voor een volgend artikel!