Van het weblog

Partners gezocht voor internationaal webconcept

Smeding Concepts zoekt voor de start van een nieuw Europees webconcept ondernemend ingestelde partners.

En loket voor webdesign, cms en online marketing

Een kort artikel over hashbang-URL's

Afbeelding bij Een kort artikel over hashbang-URL's

Steeds meer websites gebruiken het ankerfragment om door dynamische content te navigeren. Is de hashbang (#!) een oplossing om dynamische schermen vaste adressen te geven, of zorgt dit juist voor meer problemen?

Geplaatst op woensdag 1 juni 2011

Technologieën als JavaScript, AJAX en jQuery maken het mogelijk om informatie te laden binnen een webpagina zonder de volledige pagina te vernieuwen. Hierdoor onstaat een snellere interactie met de gebruiker en kunnen websites veranderen in volwaardige webapplicaties. Denk aan grote sociale netwerken als Facebook, Twitter en Hyves die dit soort technieken volop toepassen. Je ziet dat dit soort sites in je adresbalk achter een hekje (#) steeds vaker informatie over de aangeklikte informatie toevoegen.

Opmerking: Dit artikel is vrij technisch van opzet. Het leek me toch de moeite waard om het te schrijven, zowel voor opdrachtgevers als voor ontwikkelaars. Er is momenteel flink wat discussie op het internet, maar nog weinig informatie in het Nederlands beschikbaar.

Het mooie aan het web is dat je informatie kunt opvragen, linken en uitwisselen doordat webpagina's en bestanden vaste URL's hebben. Maar wat als de weergave op het scherm zich aanpast aan de klikken van een bezoeker, zonder dat dit zich vertaalt naar de inhoud van de adresbalk? Lastig aan het bouwen van websites die informatie toevoegen aan de pagina zonder deze volledig opnieuw te laden is dat de informatie op het scherm op een gegeven moment niet meer overeenkomt met het adres in de adresbalk. De informatie die is opgevraagd en de wijze waarop deze getoond wordt op het scherm heeft geen eigen locatie op het web.

Dynamisch geladen content een plekje geven

Tegelijk met het aanklikken van een link of knop waarmee de weergave van de pagina verandert, zie je dat websites steeds vaker ook de inhoud in je adresbalk veranderen. Het linken naar of opnieuw openen van dit aangepaste adres zal vervolgens telkens automatisch de juiste informatie en weergave oproepen.

Officieel is het fragment ID, het gedeelte in een URL na het hekje, bedoeld om het scherm naar een specifiek stuk tekst van een pagina te laten springen. Dit deel van het adres wordt niet verstuurd naar de webserver, je kunt het dan ook veranderen zonder dat de pagina opnieuw wordt geladen. Het Fragment ID kan met JavaScript worden ingelezen, waarna de juiste informatie asynchroon kan worden geladen (AJAX) en op de gewenste wijze worden weergegeven.

De gemiddelde gebruiker, voor wie dit vrij technische artikel waarschijnlijk voor een groot deel abracadabra is, zal waarschijnlijk weinig verschil opmerken met het laden van een 'gewone', statische webpagina.

De hashbang-standaard van Google

Het tonen van de juiste content aan de hand van het fragment ID maakt het misschien voor internetgebruikers makkelijker om informatie en links binnen dynamische websites uit te wisselen, zoekmachines hebben er niks aan. Zoals gezegd speelt het fragment ID geen rol in de communicatie met en tussen webservers. Ook interpreteren de spiders van zoekmachines geen JavaScript, waardoor ze niet kunnen zien wat de bezoeker wel ziet in zijn browser.

Om dit op te lossen heeft Google een standaard bedacht die, als webbouwers deze toepassen, het toch mogelijk maakt om websites die AJAX gebruiken te indexeren. In de volksmond heeft deze standaard de naam 'hashbang' genoemd, naar de twee karakters die worden gebruikt in URL's (# = hash, ! = bang). De bekendste site die dit op dit moment gebruikt is Twitter.

Lees voor alle informatie het artikel dat wordt gelinkt in de vorige alinea, maar het komt neer op het volgende: Wanneer de spiders van Google op het web een link tegenkomen met een hashbang, wordt deze vervangen door een GET-parameter. Als websites er voor zorgen dat voor deze 'omgebouwde' hashbang-URL de inhoud wordt gerendered die anders door middel van AJAX zou worden getoond, zal Google deze op de juiste manier kunnen spideren en indexeren.

De hashbang-standaard is een interessante oplossing voor een tekortkoming van het web op dit moment. Diverse sites passen het op dit moment toe en zeker als Google deze URL's ook daadwerkelijk gaat opnemen in zoekresultaten is het nut ervan duidelijk. Omdat ook wij graag willen dat websites die wij bouwen en die AJAX gebruiken goed vindbaar zijn in Google, hebben we sinds kort een aantal experimenten lopen.

Voorbeeld

Dynamische URL in de applicatie:
http://twitter.com/#!/smedingconcepts

Statische URL die door Google wordt gespiderd:
http://twitter.com/?_escaped_fragment_=/smedingconcepts

Nadelen van de hashbang

Ondanks de voordelen (uitwisselen van links, vindbaarheid in zoekmachines) heeft de hashbang ook nadelen. Hieronder de twee belangrijkste.

Toegankelijkheid

De hashbang zal uitstekend werken voor bezoekers die JavaScript aan hebben staan in hun browser. Ook Google zal als bedenker van deze standaard goed overweg kunnen met deze URL's. Alle anderen die zo'n link bezoeken zullen echter niet de juiste content krijgen, maar bijvoorbeeld een lege pagina of slechts de homepage van de site.

Veranderingen in websitestructuur

Als je de paginastructuur en links zorgvuldig kiest, hoef je deze waarschijnlijk nooit te veranderen. Toch valt dit niet uit te sluiten. Veranderingen moeten geruisloos verlopen, zonder dat bezoekers hier iets van merken.

Het wijzigen van een websitestructuur is geen probleem wanneer je gebruik maakt van traditionele links. De HTTP-standaard, waarop het web is gebaseerd, biedt allerlei mogelijkheden om browsers en zoekmachines te vertellen dat pagina's zijn verwijderd of verplaatst, al dan niet tijdelijk.

Wanneer je eenmaal kiest voor het gebruik van hashbangs, kun je niet meer terug. Omdat de server van de website die je bezoekt geen weet heeft van de hashbangs in je adresbalk, kan deze ook niet vertellen aan de browser of zoekmachine wat er met een pagina is gebeurd wanneer deze niet meer bestaat. De enige manier om een bezoeker door te sturen naar een nieuwe URL, is door middel van JavaScript. En hierbij kunnen geen SEO-vriendelijke 301-headers e.d. worden meegestuurd.

Hashbangs: wel of niet gebruiken?

De hashbang biedt een oplossing voor beperkingen van het web op dit moment. Wees echter op je hoede, gebruik de techniek niet voor je je goed bewust bent van de nadelen. Sommige ontwikkelaars zijn er volledig op tegen, maar het loont op zijn minst de moeite om per situatie te bekijken of de voordelen op te wegen tegen de nadelen.

De toekomst

In de toekomst behoort dit probleem hopelijk tot het verleden. Diverse browsermakers hebben al nieuwe mogelijkheden ingebouwd om het volledige adres in de adresbalk te veranderen zonder dat de pagina opnieuw wordt geladen. Google maar eens op 'pushState' als je meer wilt weten. Probleem is echter dat Microsoft dwarsligt. In Internet Explorer 9 zijn deze nieuwe mogelijkheden nog niet aanwezig helaas, waardoor het nog jaren gaat duren voor we hier gebruik van kunnen maken.

Meer lezen over dit onderwerp?

Diverse ontwikkelaars, voor- en tegenstanders, hebben de laatste maanden in artikelen op het web hun licht laten schijnen over het gebruik van hashbangs. Lees bijvoorbeeld de volgende artikelen voor meer informatie:

Tags: Internet Explorer, web 2.0, webdesign en zoekmachine.

Lees ook deze gerelateerde artikelen

Reacties bij dit artikel

Er zijn nog geen reacties geplaatst bij dit artikel. Vragen en opmerkingen zijn van harte welkom!

Plaats je reactie bij dit artikel

Omdat dit artikel meer dan een jaar oud is, is het niet meer mogelijk om te reageren.