[SEO/CSS] Content "verantwoord" verbergen?

[geert1]

De meeste front-end-ontwikkelaars weten dat het niet hoort om tekst in een webpagina uit het zicht te verbergen om zo te proberen te scoren in Google. Helaas zijn er wel een aantal (naar mijn idee legitieme) situaties waarbij content onzichtbaar moet zijn, voornamelijk in het geval van carousels of tabbladen in je pagina die je toont / verbergt via javascript, en in het geval van dropdown-menu's e.d. Ik vraag me af of hier goede suggesties of best practices voor zijn. En dan met het oog op SEO, accessibility én de gebruikerservaring.

Verbergen via CSS
Een optie is bijvoorbeeld om een div via css simpelweg te voorzien "display: none". Hoe verhoudt dit zich tot het verbergen van content via "position: absolute; left: -9001px;"? Zouden google of de schermlezer-software voor blinden hier onderscheid in maken, of is het praktisch hetzelfde?

Verbergen via JS
Een goede optie kan ook zijn om eerst alle content zichtbaar te tonen, en pas met javascript de blokken te verbergen die niet nodig zijn. Dit is "eerlijker" en wellicht beter voor zij die geen javascript toestaan, maar er is een nadeel: Vaak wordt dan tijdens het laden veel content eerst een seconde of twee zichtbaar, waardoor het laden niet elegant loopt.

Ik weet dat Google dit soort zaken in principe afraadt, maar tegelijkertijd worden dropdown-menu's, carousels en tabbladen in een groot deel van de websites gebruikt, ook door Google zelf en zo ongeveer alle andere gerespecteerde bedrijven. Hoe gaan jullie hier mee om?

[Mike2k]

In plaats van dat je de content verbergt, zou je misschien ook eens kunnen kijken naar de content pas ophalen als dat nodig is dmv. AJAX...

[Bosmonster]

Een optie is bijvoorbeeld om een div via css simpelweg te voorzien "display: none". Hoe verhoudt dit zich tot het verbergen van content via "position: absolute; left: -9001px;"?

De reden dat die laatste optie gekozen wordt is voor accessibility. Screen readers negeren namelijk net zo goed elementen die verborgen zijn met display:none (een van de meest gemaakte fouten door frontenders die denken een site toegankelijk te maken). Elementen die je dus toevoegt voor toegankelijkheid, maar uit het zicht van de normale gebruikt wilt houden, doe je over het algemeen op zo'n manier buiten de viewport verplaatsen.

Mike2k schreef op donderdag 16 juni 2011 @ 15:54:
In plaats van dat je de content verbergt, zou je misschien ook eens kunnen kijken naar de content pas ophalen als dat nodig is dmv. AJAX...

Vergeet dan niet dat je een niet-JS fallback verzorgt.

Vaak wordt dan tijdens het laden veel content eerst een seconde of twee zichtbaar, waardoor het laden niet elegant loopt.

Dit probleem heb je eigenlijk alleen in oude IE's en zelfs dan is het een fractie van een seconde als je het doet on documentready. Het spreekt voor zich dat je hiervoor geen window.onload wilt gebruiken.

Dit is een van de meest gebruikte methodes om JS-based controls toegankelijk te houden. Vergeet dan wel wederom niet dat je standaard versie geen gebruik maakt van display:none

Verder heeft dit mijns inziens weinig met SEO te maken. SEO is maar een bijzaak en veel meer een content-issue. Een goed gebouwde toegankelijke website heeft geen verdere optimalisatie nodig.

[Voor 53% gewijzigd door Bosmonster op 16-06-2011 16:15]

[OkkE]

Zulke dingen hangen in mijn ogen heel erg van de soort content af, en is eigenlijk meer accessibility en niet SEO.

Voor een dropdown is het over het algemeen juist fijn dat screenreaders (en Google) wél bij de content kunnen, dus is een left:-999em; geschikt. Voor tabs die je toch met Javascript laat werken is in mijn ogen display:none; beter.

Ik ben zelf niet zo'n voorstander van dingen verbergen met Javascript. Wanneer het zwaar op Javascript leunt, voeg ik het liefst de extra elementen ook toe via Javascript. En natuurlijk de default behavior (van bijv. <a>) ook afvangen met Javascript.

[Anoniem: 96523]

Ik denk dat je je eerst moet afvragen waarom je iets wilt verbergen;

Wanneer je het doet om zoekmachines te misleiden (meer content in HTML dan zichtbaar voor bezoeker) dan werkt geen één methode, omdat spiders op meerdere manieren de pagina bekijken.

Wanneer je het doet om de gebruiker een betere ervaring te geven (menu's, carrousels, etc.) dan is dit geen probleem, omdat alle content (uiteindelijk) gewoon zichtbaar is. Zorg er ook voor dat de verborgen elementen, met name bij tabbladen, ook dmv een URI onderscheiden kan worden.

Of er een grijs gebied is weet ik niet, behalve het gebruik van flash sites, maar daar zou ik me niet druk over maken.

Het hoe en waarom zoekmachines dit allemaal kunnen zien is de grote vraag in de wereld van SEO.

[geert1]

@Terminal13: Helemaal met je eens wat betreft tekst verbergen voor zoekmachinemisbruik, dat is nergens voor nodig en helpt ook niet echt. Ik heb het hier over legitieme situaties voor het verbergen.

@Bosmonster: Oké, dus via positionering verbergen om tekst voor slechtzienden beschikbaar te houden, display:block als het echt niet hoeft te worden gelezen door wie dan ook. En verbergen met javascript vind ik nog steeds wat discutabel. Indien mogelijk plaats ik elementen juist met javascript, zoals de controls van een carousel, wanneer die geen functie hebben voor de niet-JS-gebruiker.

Mike2k schreef op donderdag 16 juni 2011 @ 15:54:
In plaats van dat je de content verbergt, zou je misschien ook eens kunnen kijken naar de content pas ophalen als dat nodig is dmv. AJAX...

Mja, AJAX heeft ook zeker zijn plaats in dit alles, maar die content kan de zoekmachine natuurlijk niet zondermeer terugvinden. Dus hangt van de situatie af.

Dank allen, tot dusver

[Bosmonster]

En verbergen met javascript vind ik nog steeds wat discutabel. Indien mogelijk plaats ik elementen juist met javascript, zoals de controls van een carousel, wanneer die geen functie hebben voor de niet-JS-gebruiker.

Das dan weer een andere functie en inderdaad goed om toe te voegen met javascript.

Maar als het andersom is, bijvoorbeeld FAQ met uitklapbare vragen, om maar iets simpels te noemen, dan verberg je de antwoorden met javascript, zodat in de niet-JS versie vragen gewoon zichtbaar zijn.

Dit valt allemaal in de categorie progressive enhancement.

[Voor 5% gewijzigd door Bosmonster op 16-06-2011 17:12]

[boontje88]

De HTML5 boilerplate heeft een aantal verschillende CSS classes voor het hiden van content. Ziet er redelijk doordacht uit met verschillende situaties:

Cascading Stylesheet:

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/ ; &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden