Een select element spiderbaar maken

lijst.gif

In een aantal gevallen kan het zo zijn dat je op je site gebruik maakt van een zogenaamde <select> box om naar diverse onderdelen te navigeren. Helaas zijn deze elementen oorspronkelijk alleen bedoeld voor formulieren die verstuurd kunnen worden, waardoor ze standaard geen navigeer functionaliteit gekregen hebben. Dit gebeurt dan ook altijd met Javascript wat niet te spideren is door de zoekmachines.

Om dit op te lossen heb ik in eerste instantie de volgende oplossing bedacht: plaats links om de tekst van de option heen zodat zoekmachines die kunnen gebruiken. Dat ziet er als volgt uit:

<option value="http://www.url.nl"><a href="http://www.url.nl" >Url</a></option>

Zoekmachines negeren de option en lezen de link, en browsers negeren de link en zullen keurig alleen de option laten zien. Alleen tijdens een open vragen sessie aan Matt Cutts (mannetje van Google) heb ik gevraagd of dit een mooie oplossing was. En zijn antwoord: "It could raise some flags". Met andere woorden: hij zou het niet aanraden.

Op zoek naar een andere oplossing dus, en die schoot me vandaag te binnen. Ik maak nu gebruik van een <ul> met een aantal <li>'s er in die na het laden omgezet worden naar een <select> box. Heb je geen Javascript of ben je een zoekmachine dan krijg je keurig een lijst met links te zien. Ondersteund je browser wel Javascript dan krijg je keurig een ruimtebesparende select box te zien.

Het voorbeeld is hier te bekijken, bekijk de broncode en je ziet 3 lijsten staan. Maar op je scherm worden keurig selectboxen getoond.

Click to activate social bookmarks

 
  • Blaise

    Kan je dan niet gewoon beter een DHTML selectbox maken?

  • Misschien wel, zolang de originele bron maar plain HTML is zodat die gespiderd kan worden.

  • Marcel

    Hoi,

    Ik vind het een fantastisch ding maar als ik de hele code in een table laat draaien of in een andere tag (div) dan zet ie de code OOK als platte tekst onder de pulldownbox. Heb je enig idee hoe dat komt of hoe dat op te lossen is?

  • Ik heb het idee dat er dan een fout in je code zit, heb je iets online staan? Mail dat even zodat ik kan zien of ik het kan oplossen.

  • Patrick N.

    @Andre: Ik vind t, net zoals Marcel, ook een mooi ding, maareh, heb ook net zoals marcel t zelfde prob. met div's en tables. Werkt prima buiten de table, maar in helaas niet. Zou t tof vinden als je ff kan kijken:

    Feedback

    BTW: lijkt wellicht een kansloze pagina, maar op deze manier goed voor zoekwoordrijkheid.

  • Patrick, ik heb het probleem gevonden. Het script probeerde de oude li elementen uit de body te verwijderen, dus zodra ze in een ander element (zoals een table) stonden ging het fout. Ik heb het nu zo aangepast dat de li elementen vanuit hun parent verwijderd worden 🙂

    En inderdaad, het is wel een kansloze pagina zo: dit noem ik geen keywordrijkheid maar keyword spam 😉 Er staan ongeveer 16.000 links in naar Google, en ik kan je verzekeren: dat gaat je niet veel opleveren. Maak gewoon groepen woorden en plaats die samen in 1 themapagina. Die pagina's zijn veel geloofwaardiger aangezien ze niet vol staan met allerlei keywords en maar over 1 onderwerp gaan.

  • Patrick N.

    Bedankt voor je snelle respons. T is idd kw-spam, wil eens kijken hoe het gaat me deze woorden in de index, aangezien ze erg goed deden in de Google adwords campagne (en ze zijn wel allemaal van t zelfde onderwerp / niche-markten van dat onderwerp). Maareh, het dient ook wel een hoger doel 😉 Mensen kunnen zo gericht weer van mijn pagina weg-navigeren.

    Anyhow, tnx 4 the code :). Hoop dat je je niet misbruikt voelt.....

  • Michiel B.

    Even een tip: in IE zie ik de list items nog voordat deze naar een SELECT worden "omgebouwd". Dit geldt uiteraard voor een lange lijst die door Javascript omgezet moet worden (zoals op de pagina van Patrick N.) maar ik zie het ook in jouw voorbeeld. In het geval van het voorbeeld lijkt dit alleen zo te zijn als de pagina niet gecached is; daarna is het niet meer merkbaar.

    Wat hierbij het probleem is, is dat het event window.onload pas wordt getriggerd wanneer de browser klaar is het met laden/weergeven van de pagina. Wat ik in gevallen als deze doe om het "op-/ombouwen" te verbergen is de functie benoemen en deze aanroepen tijdens het laden van de pagina. Op deze manier wordt de code uitgevoerd voordat de pagina klaar is met laden en valt het effect van Javascript niet op.

    Overigens heb ik geen idee of het eerder aanroepen van Javascript functies invloed heeft op het "spiderbaar maken" van die pagina.

  • @Michiel: dat is inderdaad een betere oplossing aangezien je dan minder last hebt van het later omzetten naar een select.

    Over je laatste zin: dat heeft geen invloed, zoekmachines negeren de javascript.