Dag 21: Zoekmachine-vriendelijke (SEF) URL's en breadcrumbs

Zoals uitgelegd in dag 9 geeft Drupal aan elke content item (lees: node) een unieke id. Het resultaat kun je zien in de adresbalk van je browser wanneer je een willekeurige pagina bezoekt. Leuk en aardig, maar het is natuurlijk mooier, en beter voor zoekmachines, wanneer je een URL pad als http://www.voorbeeld.nl/diensten/ krijgt te zien in plaats van www.voorbeeld.nl/node/178.

Vandaag gaan we ervoor zorgen dat al onze standaard URL’s automatisch worden omgezet naar een zogenaamde SEF URL. SEF staat voor Search Engine Friendly, oftewel zoekmachinevriendelijk. Zoekmachines hebben namelijk een sterke voorkeur voor dit soort “mooie” urls, aangezien het nuttige, semantische informatie geeft over de inhoud van een pagina.

Ook het begin adres van een website is voor zoekmachines een wegende factor. Stel je hebt twee precies dezelfde websites die kattenbrokken verkopen, maar de ene heet www.voordekat.nl en de ander www.kattenbrokken.nl dan zal de laatste het beter doen in de zoekresultaten met betrekking tot bezoekers die heel gericht op zoek zijn naar kattenbrokken.

Benodigde modules installeren

Gelukkig hoeven we niet alle URL’s zelf om te zetten naar een SEF URL. De Pathauto module gaat het meeste werk voor ons doen. Download en installeer deze module volgens de aanwijzingen op dag 4. Pathauto is afhankelijk van de Token module, mocht je dit op dag 4 nog niet hebben gedaan, installeer dan nu ook deze module. En nu je toch bezig bent kun je ook alvast de Custom breadcrumb module downloaden en activeren, waarover straks meer.

Schone URL’s activeren

Zijn alle modules geïnstalleerd en ook geactiveerd? Klik dan in de menubalk bovenaan op Instellingen. Via deze pagina kun je de configuratie van geïnstalleerde modules, en van de website zelf, veranderen. Je ziet dat alles op onderwerp is gesorteerd, ga naar het kopje Zoeken en metadata en klik eerst op de link Schone URL’s. Waarschijnlijk zijn Schone URL's al geactiveerd, maar voor de zekerheid moet je dit nog even controleren.

Hier vink je Schone URL’s activeren aan, als dit nog niet is gebeurt.

URL patterns veranderen

Ga terug naar de Instellingen pagina en kies nu onder hetzelfde kopje, Zoeken en metadata, voor URL-alliasen.

Deze pagina bevat een lijst van alle automatisch gegenereerde aliassen, met daarachter de originele systeem URL. Links zie je de URL-alias die bezoekers krijgen te zien, en onder systeem de originele URL. Ben je niet helemaal tevreden met een bepaalde alias dan kun je deze handmatig bewerken.

De aliassen worden nu nog opgebouwd op basis van het ID nummer van een node. Dit is niet helemaal hoe wij het willen. Voor diensten willen wij dat het URL er uitziet als "/diensten/naam-van-de-dienst" en voor het facturen als "/mijnfactuur/factuurnummer".

Om aanpassingen te maken aan de manier waarop URL aliassen worden opgebouwd ga je naar Patterns, het tweede tabblad in het menu rechtsboven.

Op de volgende pagina, onder het kopje Content Paths zie je een aantal velden om standaard alias structuur op te geven, voor elke content type één. Als je bijvoorbeeld wilt dat alle URL’s voor items die onder diensten vallen beginnen met /diensten/, dan vul je dit achter het veld Pattern for all Diensten paths in. Erachter zet je [node:title] om ervoor te zorgen dat de URL eindigt met de titel van de desbetreffende dienst.

Een snelcode zoals [node:title] noem je een token. De Token module zorgt voor een lijst van snelcodes die je kunt inzetten op het moment dat een actie afhankelijk moet zijn van de node die op dat moment actief is. In dit geval zou de URL dynamisch worden gegenereerd naargelang de titel van de dienst die wordt bezocht.

Beter nog, je kunt ook onder het Default path pattern aangeven dat standaard voor alle content types het content type eerst moet worden genoemd en daarna de titel van de node. Dit doe je door gebruik te maken van de token [node:content-type]. Vul in het veld onder Default patch pattern "[node:content-type]/[node:title]" in. 

Hoe weet je welke token je moet gebruiken? Onderaan de lijst met content types zie je blauwe link genaamd Replacement Patterns. Wanneer je hier op klikt krijgen we toegang tot alle Tokens die de Token Module voor ons heeft klaargezet. Klik in het lijstje op nodes en je krijgt een hele waslijst.

Zoek de token [node:field-factuurnummer] erbij. Je snapt het, deze token wordt automatisch vervangen met de inhoud van het factuurnummer veld van de geopende factuur.

Gevonden? Plaats dan nu de cursor in het veld achter Pattern for all Facturen paths en type hier /mijnfacturen/. Laat de cursor op de plek staan en klik nu op de [node:field-factuurnummer] token. Deze wordt nu op de plek van de cursor geplakt, achter /mijnfacturen/. Je kunt de token ook gewoon kopiëren en plakken. Controleer of alle velden eruitzien zoals hieronder en sla alles op.

Je zou nog een kijkje kunnen nemen onder het tabblad instellingen, rechtsbovenin. Hier kun je details van je SEF URL’s bepalen zoals welk symbool gebruikt moet worden om spaties te vervangen en of je eventuele lidwoorden niet wilt meenemen in de titel.

Als alles klaar is mag je de links gaan updaten. Dit doet je via Bulk Update.

Selecteer alles en klik op bijwerken. Jouw website heeft nu SEF URL's.

Misschien was je al opgevallen dat niet alleen de URL's voor verbetering vatbaar zijn. Ook het navigatie menu, het zogenaamde breadcrumb menu, behoeft nog wat sleutelen, en dan met name wanneer je facturen bezoekt.

Breadcrumb navigatie aanpassen

Breadcrumbs helpen bezoekers om zich te oriënteren op een website. Vooral websites met veel informatie en webwinkels maken gebruik van deze extra navigatie. In de meeste Drupal thema's zijn breadcrumbs geactiveerd (meestal kun je deze zelf in- of uitschakelen in de thema instellingen), ook ons thema maakt er gebruik van.

Het breadcrumbs systeem is helaas niet zo intelligent dat het automatisch snapt dat klanten altijd via het factuuroverzicht naar een factuur navigeren. We zullen daarom handmatig de broodkruimels moeten overschrijven met behulp van de Custom breadcrumb module zodat we vanaf de factuur pagina snel terug kunnen naar het factuuroverzicht, of de account pagina:

Navigeer hiervoor naar Structuur > Custom Breadcrumbs. Klik daar op Add a new custom breadcrumb.

Selecteer als Facturen als Node Type in.

Vervolgens zijn twee velden maar van belang, Titels en Path. In het eerste veld vullen we de titel in van de handmatige links, in het tweede veld het corresponderende pad. Elke titel en URL moet op een nieuwe regel.

In het voorbeeld hieronder heeft "Mijn account" als link jouwwebsite.nl/user (de profiel pagina) en "Mijn facturen" verwijst naar jouwwebsite.nl/mijnfacturen(het URL pad dat we hebben opgegeven voor de View met het factuur overzicht).

Dat was alles al. Als het goed is kunnen klanten nu via het breadcrumb menu navigeren tussen facturen en het factuur overzicht. Het is maar een kleine aanpassing maar desalnietemin een erg belangrijke voor de gebruikersvriendelijkheid van de website.

Slot

Nu we de website van schone URL’s hebben voorzien gaan we morgen naar een andere factor van belang voor zoekmachine optimalisatie bekijken: de snelheid van onze website. Een snelle laadtijd is bovendien belangrijk als je je bezoekers niet weg wilt jagen.

Laatst gewijzigd op: