• Door naar de hoofd inhoud
  • Spring naar de eerste sidebar
  • Home
  • Websiteontwikkeling
  • ZZP’en
  • Fysiek fit
  • Over mij

W.S. Spoelstra

Learning through blogging

Verborgen tekst en links, niet slecht voor SEO!

23 juni 2014 by Willem-Siebe Spoelstra 4 Reacties

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.

Lees meer link niet erg voor SEO
Lees meer link niet erg voor SEO

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!

Gerelateerd

Dit delen:

  • Tweet
  • E-mail

Gerelateerd

Categorie: Websiteontwikkeling Tags: Webdevelopment, WordPress

Lees Interacties

Reacties

  1. Rory zegt

    11 juli 2016 om 10:48

    Leuk artikel! Wij hebben de teksten weggezet via “visual composer” onder extra menu’s. (Zie onderaan http://poloshirtstore.nl/). Zo creeër je geen lappen tekst.

    Beantwoorden
  2. Yordi zegt

    27 mei 2016 om 18:29

    Dit vroeg ik me al even af, bedankt!

    Beantwoorden
  3. Jan zegt

    26 juni 2014 om 11:25

    Goed artikel en zeer nuttig.
    Bedankt

    Beantwoorden
    • Willem-Siebe Spoelstra zegt

      27 juni 2014 om 23:46

      Dat is fijn om te horen!

      Beantwoorden

Geef een reactie Reactie annuleren

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Primaire Sidebar

Waar wil je wat over weten?

Meest gelezen berichten laatste 48 uur

  • Winkelwagen buttons verwijderen in WooCommerce
  • Het verschil tussen b, strong, i & em plus tips voor WordPress en SEO
  • Sterren in Google: de complete uitleg!

Meest recente berichten

  • Zakelijke kosten, investeringen en afschrijvingen
  • Affiliate disclosure voorbeelden
  • Websiteontwikkeling links
  • Lijstje: recepten zonder pakjes & zakjes
  • Gewicht: doel versus realiteit

Recente reacties

  • ramona op Hoe je in Gmail autoresponder e-mails maakt
  • ramona op Hoe je in Gmail autoresponder e-mails maakt
  • Rob Stolk op Klassieke opzet (web)server, simpele uitleg!
  • Willem-Siebe Spoelstra op Klassieke opzet (web)server, simpele uitleg!
  • Henk op Klassieke opzet (web)server, simpele uitleg!

Categorieën

  • Fysiek fit (2)
  • Websiteontwikkeling (42)
  • ZZP'en (2)

Mis niks, volg mij via Facebook!

Mis niks, volg mij via Facebook!

Tags

Boekhouden (1) HTML (3) Webdesign (1) Webdevelopment (6) WooCommerce (2) WordPress (11) Zoekmachine optimalisatie (SEO) (4)

Mis niks meer…

Meld je aan op mijn e-mail lijst en je krijgt simpelweg een mailtje als ik weer wat gedeeld heb over webdevelopment, WordPress of SEO!

Aanmelden

Copyright © 2023