De link
De link is naast goede content het meest belangrtijke element op een website. Ja, want zonder links binnen je site weet google je niet verder te vinden dan je voorpagina. Tijd dus om het een en ander eens uit te leggen
Een eenvoudige link
Een link begin meestal met het element a, gevolgd door href wat de locatie van de link aangeeft.
Een simpel voorbeeld is
WebCijfers
Laten we daar eens verder naar kijken !
Je ziet dat de link is opgebouwd uit een Text (WebCijfers) tussen het a element: <a>WebCijfers</a>
Daarnaast zie je de locatie van de link (dus waar je naar toe gaat als je op de link klikt) in het href element staat "http://www.webijcers.nl"
Een geavanceerde link
Een link kent nog veel meer elementen. Sommige zijn zeer bruikbaar en anderen niet maar daar later meer over. Eerst even een geavanceerd voorbeeld. WebCijfers')
Laten we daar eens verder naar kijken !
| a | Je ziet dat de link is opgebouwd uit een Text (WebCijfers) tussen het a element: <a>WebCijfers</a> |
| href | Daarnaast zie je de locatie van de link (dus waar je naar toe gaat als je op de link klikt) in het href element staat "http://www.webijcers.nl" |
| id | De link heeft nu een id gekregen. Een id is altijd uniek! Dat is erg handig als we de link aan willen spreken met javascrip of met css |
| class | De link heeft ook een class gekregen. Een class betekend dat de link lid is van een verzameling (in dit geval alle elementen met class 'linkclass') Dat is ook handig als we de link aan willen spreken met javascrip of met css |
| rel | Je ziet het rel element in de link. In dit geval geeft de waarde het element (nofollow) aan dat de link niet gevolgd hoeft te worden door zoekmachines. Dit is vooral handig als je niet van te voren weet waar de link naar toe gaat, bijvoorbeeld bij commentaar van bezoekers |
| target | In het target element kun je opgeven hoe de browser de link dient te openen. Bijvoorbeeld in een nieuw vensten, hetzelfde vensten, een (i)frame. |
| hash (#) | Aan het einde van de url zie je #home staan. Dit zorgt er voor dat de browser automatisch naar het element met id="home" springt ! Erg handig !! |
Waar naartoe linken ?
Je kunt maar liefst op 3 manieren naar 1 bestand toe linken. Alle 3 hebben hetzelfde effect maar de ene is beter dan de andere. Ik zal het uitleggen aan de hand van een 3tal voorbeelden. In dit voorbeeld linken we naar deze pagina. Voor alle duidelijkheid: deze pagina staat in de map 'seo-technieken' en het bestand heet 'link'
1. fout: Infomatie over links
2. beter: Infomatie over links
3:best Infomatie over links
Zoals je hierboven ziet linken we in voorbeeld 1 direct naar het bestand maar relatief aan onze huidige locatie. Omdat we al in de map seo-technieken zitten hoef ik alleen maar naar het bestand 'link' te linken. Het nadeel is dat als ik vanaf een pagina link, en ik verplaats deze pagina naar een andere map dan werkt de link niet meer omdat de link in dezelfde map blijft zoeken.
Daarna, in voorbeeld 2 link in vanaf het begin van de website naar het bestand. Je kunt dit zien door de chuine streep: '/' aan het begin van de link. Het voordeel hiervan is dat ik me niet druk hoef te maken over in welke map ik op dit moment zit. Nog een voordeel is dat ik het bestand in de huidige map ongestraft kan verplaatsen en de link werkt nog steeds.
In het derde voorbeeld zie je dat ik de locatie waar ik naartoe link volledig uitschrijf. Dit heeft als voordeel dat er onder geen voorwaarde verwarring kan ontstaat over waar de link naar toe verwijst. Zoekmachines als google beamen dit ook. Ook heb ik volledige controlle over het subdomein (www in dit geval) en heb ik enige bescherming tegen 'proxy aanvallen' maar daarover later meer !
Rel: een element apart
| Het rel element in een link lijkt in eerste instantie iets om te negeren maar dat is het niet. Dit element geeft namelijk extra informatie over de te bezoeken link en wordt door zoekmachines gebruikt. Het kan de volgende handige waarden aannemen (er zijn er meer maar die zijn niet zo interessant !) | |
| nofollow | Geeft aan dat een zoekmachine de link niet moet volgen en dat de webpagina niet instaat voor de inhoud van een link> |
| next | Geeft de volgende pagina binnen een reeks aan. Erg handing bij bijvoorbeeld een forum waarin een topic is opgedeeld in meerdere pagina's |
| prev | Geeft de vorige pagina binnen een reeks aan. Erg handing bij bijvoorbeeld een forum waarin een topic is opgedeeld in meerdere pagina's |
Enkele veelgebruikte elementen die je maar het beste kunt vermijden
Je kunt bij een link opgeven wat er moet gebeuren als je er over heen gaat met je muis (onhover="") of als je er op klikt (onclick="").
Ok dat is duidelijk maar toch erg handig ... waarom dan niet gebruiken ? Omdat de meeste javascript libraries dit helemaal niet meer nodig hebben. Je kunt gewoon een link aanspreken via de class of id en dan een onclick (of onhover) actie definieeren. Een voorbeeld (gabaseerd op jquery) !
Code
WebCijfers
Probeer het zelf: klik op deze link.
WebCijfers
Dit lijkt misschien omslachtig maar met class selectors of zelfs element selectors kun je in 1 keer alle links aanspreken en je javascript kan in de head van je pagina waardoor je code kort en clean blijft !
Waar gaat uw website over ?
| Vul hieronder het domein van uw website in. Wij analyseren dan automatisch de inhoud van de site. |
