WPLounge
Wat is rel="noopener" bij links in WordPress?
Home » WordPress Algemeen » Wat is rel=”noopener” en “noreferrer” bij links in WordPress?

Wat is rel=”noopener” en “noreferrer” bij links in WordPress?

We komen regelmatig vragen tegen over de zogenoemde rel = noopener noreferrer-tag. Wanneer je een link in een nieuw tabblad opent, wordt de tag noopener- of noreferrer eraan toegevoegd. In dit artikel leggen we je uit wat rel = “noopener noreferrer” nog meer inhoudt en of het valt onder het brede scala aan SEO-rankingfactoren.

Noopener noreferrer link

Wat betekent rel = noopener noreferrer?

De basis van het aanmaken van links

Om bij de basis te beginnen; wanneer je een link toevoegt aan je content, ziet de HTML code er zo uit:

<a href=”URL”>Linktekst</a>

of

<a href=”URL” target=”_blank”>Linktekst</a>

Het verschil zit ‘m in het target-element target = ”_ blank”. Dit zorgt ervoor dat de desbetreffende link in een nieuw tabblad wordt geopend, terwijl jouw website open blijft in een ander tabblad. Nu duiken we enigszins de codes in. Dit element zal je, zonder enige codeerkennis, ook niet onbekend zijn als websitebezoeker of contentschrijver:

URL openen in een nieuwe tab
In de visuele WordPress editor hoef je slechts dit aan te vinken, en de link wordt in een nieuwe tab geopend. De HTML code wordt automatisch gewijzigd naar <a href=”URL” target=”_blank”>Linktekst</a>

Het rel attribuut

Het rel attribuut specificeert de relatie tussen de huidige content en de gelinkte content. Nu komen we bij rel=”noopener”.

Het rel=”noopener” attribuut is van toepassing wanneer een link is geselecteerd om te openen in een nieuw browsertabblad. Dezelfde kan ook worden gerealiseerd met een rel=”noreferrer”. Deze code is geïntroduceerd om beveiligingsaspecten aan te pakken die kunnen worden misbruikt door kwaadaardige websites. Met behulp van JavaScript-functies kunnen we toestaan ​​dat een nieuw tabblad wordt beheerd via het verwijzende venster.

Wanneer je linkt naar een externe website die mogelijk is aangetast door een schadelijke code, kan die website gebruikmaken van de window.opener functionaliteit (JavaScript) om digitale informatie van jouw bezoekers te stelen door hetzelfde proces van uw pagina uit te voeren.

Dus door rel=”noopener” of rel=”noreferrer” aan de link toe te voegen, voorkom je dat het nieuwe tabblad gebruik kan maken van de JavaScript functie window.opener.

Als je target = “_ blank” gebruikt voor externe sitelinks in je content, neem dan ook het kenmerk rel = “noopener” of rel = “noreferrer” erin op:

<a href=”URL” target=”_blank” rel=”noreferrer noopener“>Linktekst</a>

  • Het kenmerk rel=”noopener” beschermt de nieuwe pagina waartoe window.opener toegang heeft en zorgt ervoor dat deze in een losstaand proces wordt uitgevoerd.
  • Het attribuut rel=”noreferrer” heeft een vergelijkbare werking, maar voorkomt ook dat de verwijzende informatie wordt doorgegeven aan de nieuwe pagina.

Zijn er SEO invloeden van rel=”noopener noreferrer” voor je WordPress site?

De kenmerken rel =”noopener” en rel =”noreferrer” verbeteren de beveiliging van je WordPress website. Ze worden echter vaak niet toegepast omdat er een vooroordeel bestaat, dat het ten koste kan gaan van de SEO-optimalisatie van je site.

Dat is een fabeltje.

Het heeft geen invloed op de zoekmachine optimalisatie (SEO) van je website evenals de algehele prestaties. In feite beschermt het juist het vertrouwen van je bezoekers en voorkomt het simpelweg dat externe websites kwaadaardige codes kunnen verspreiden.

Heeft een rel=”noopener noreferrer” link dezelfde linkkracht?

Vaak stelt zich deze vraag bij een off-page SEO proces, oftewel linkbuilding. Wanneer jouw website backlinks ontvangt van autoritaire sites, kun je je afvragen of deze links wel even sterk zijn en dus van toegevoegde waarde voor je linkprofiel. Het antwoord luidt als volgt:

Google heeft geen interactie met de rel=”noopener”-tag. Het is slechts een instructie voor de browser om een nieuwe tab te openen en om het gebruik van het window.opener Javascript-object te stoppen.

Wat is het verschil tussen rel=”noopener” en rel=”nofollow”?

Soms wordt direct een associatie gelegd tussen noopener en nofollow, maar ze zijn volledig verschillend. Cross-site hacking wordt voorkomen door het noopener-kenmerk en het verbetert ook de veiligheid van je WordPress website. Zoekmachines beschouwen noopener of noreferrer niet als een on-site SEO ranking-signaal.

Wanneer er sprakt is van het kenmerk rel=”nofollow”, is het een ander verhaal. Dan is er inderdaad een blokkade voor de link juice. De linkkracht wordt bij een nofollow-link dus niet doorgegeven aan de gelinkte website.

Verschil tussen nofollow en noopener noreferrer links

Hebben noopener en noreferrer tags invloed op affiliate links?

Ook op koppelingen voor partnerprogramma’s (affiliate links) heeft rel=”noopener” en/of rel=”noreferrer” géén negatieve invloed.

De meeste affiliate-links bevatten een unieke URL met jouw unieke affiliate-ID. Wanneer iemand op de link klikt, wordt je partner-ID doorgegeven met de URL-parameter die de andere website moet bijhouden.

Mogelijk knelpunt voor affiliate links

Het enige mogelijke obstakel zit ‘m in de gemaskeerde links, dus wanneer je er een redirect op instelt naar de uiteindelijke lange URL met de partner-ID en al. Op die manier laat je de URL beter ogen voor de bezoeker.

Advies: monitor nauwlettend hoe je affiliate programma’s presteren. Indien je een plotselinge daling ziet is het tijd om in actie te komen:

  • Laat je affiliate links niet openen in een nieuwe tab.
    Hoewel mensen je pagina zullen verlaten en je je zorgen maakt over de mogelijke schade aan je inkomsten, is dit de beste manier om weer op de rails te komen qua linkfunctionaliteit.
  • Verwijder de noreferrer noopener tag.
    Of je deze tags in jelinkattribuut wilt hebben, is aan jou. We raden wel af om rel=”noopener” te verwijderen, omdat dit het risico van de kwetsbaarheid van je WordPress website vergroot.

Hoe verwijder je rel=”noopener” in WordPress?

Het verwijderen van het rel=”noopener noreferrer”-kenmerk kan een uitdaging zijn omdat het geïntegreerd is in de broncode van de WordPress teksteditor. Wanneer je het uit de HTML-code verwijdert, wordt het opnieuw toegevoegd wanneer je het document opslaat of bijwerkt.

Gelukkig is er wel een oplossing voor. Voeg de onderstaande code toe te onderaan het functions.php-bestand van je WordPress-thema.

// Deze code verwijdert een security feature uit TinyMCE.
// Het wordt dan ook afgeraden om deze code te gebruiken.

.add_filter('tiny_mce_before_init','tinymce_allow_unsafe_link_target');
function tinymce_allow_unsafe_link_target( $mceInit ) {
    $mceInit['allow_unsafe_link_target']=true;
    return $mceInit;
}

Wanneer je deze code hebt toegevoegd aan het functions.php bestand, zal dit verhinderen dat rel=”noopener”automatisch wordt toegevoegd aan je links. Het zal echter geen bestaande noopener tags verwijderen; die zul je handmatig moeten verwijderen uit de HTML-code.

Tot slot

Ik hoop dat dit artikel je heeft geholpen meer te weten te komen over noopener & noreferrer-tags. Je hoeft je dus geen zorgen te maken wat betreft de impact op je SEO en linkkracht. De tag vormt juist een bescherming voor je websitebezoekers tegen mogelijke kwaadaardige links die hun tabbladen zouden kunnen kapen.

Dit tagkenmerk wordt automatisch toegevoegd aan alle interne en externe links wanneer je ze opent in een nieuw browservenster.

Verwijder de tag alleen als je wilt profiteren van de JavaScript window.opener-functie.

Mis je een vraagstuk omtrent rel=”noopener noreferrer” of heb je andere vragen over dit artikel, aarzel dan niet om een comment te plaatsen

Beoordeel dit artikel

Roger.Overdevest

Roger is een SEO specialist met veel passie voor WordPress

2 reacties