Ce înseamnă valorile: noopener, noreferrer și nofollow care pot fi date atributelor rel din HTML?

Dacă te ocupi cu practici de optimizare sau de dezvoltarea website-urilor, este imposibil să nu fi întâlnit până acum termenii: noopener, noreferrer și nofollow, atribute pe care le poți folosi pentru link-urile din articolele tale. Dar ce înseamnă mai exact toate aceste elemente, care este rolul lor și cum se folosesc?

În limbajul HTML atât noopener, noreferrer, cât și nofollow sunt niște valori ale atributului rel pe care ar trebui să le cunoască orice expert SEO.

Tag-ul <a> se folosește în general, pentru a defini un link, în felul următor:

<a href="https://cristi.blog"> Apasă aici ca să vizitezi website-ul cristi.blog! </a>

Prescurtarea href vine de la Hypertext REFerence, iar valoarea acestui atribuit este link-ul website-ului de față, iar ceea ce se află între <a href="https://cristi.blog"> și </a> este textul pe care îl pot vedea cititorii.

În funcție de elementele de limbaj CSS folosite și browserul de pe care cineva citește articolul pe care îl scrii, acest text poate fi subliniat, colorat, aplecat și așa mai departe. Dar pe lângă aceste elemente vizuale, un tag ancoră poate avea și atribute rel cu valori precum: noopener, noreferrer și nofollow despre care vom discuta în continuare.

Pentru a le explica mai pe larg însă, ne vom referi la următorul segment de cod:

<a href="https://cristi.blog" rel="noopener noreferrer nofollow" target="_blank"> Apasă aici ca să vizitezi website-ul cristi.blog! </a>

Din segmentul de cod de mai sus, cu siguranță ai observat cele trei valori ale atributului care fac subiectul acestui articol, dar și atributul target, cu valoarea _blank care instruiește browser-ul să deschidă acest link într-un nou tab și care este de fapt motivul principal pentru care se folosesc valori precum noopener sau nofollow.

Ce înseamnă noopener?

Când folosești valoarea "_blank" într-un segment de cod, se întâmplă un lucru foarte interesant. Pagina către care ai făcut legătura primește un acces parțial la pagina care face legătura. Acest lucru se întâmplă datorită proprietății: window.opener. Și atunci, pagina pagina care face legătura poate folosi window.opener pentru a deschide un website periculos. Iar ceea ce face valoarea noopener este să spună browser-ului să blocheze acest acces prin returnarea unei valori nule a proprietății window.opener.

Dacă nu înțelegi utilitatea acestei valori, încearcă să-ți imaginezi pe cineva care vrea să fure date de logare pe Facebook și creează un website periculos, cu conținut viral și apoi îl distribuie pe celebra rețea socială. Un utilizator curios, dar inconștient, poate accesa link-ul către noul website de pe Facebook, iar website-ul primește acces temporar la tab-ul Facebook, creând o pagină care imită pagina de logare în platforma Facebook, cu mesajul: Datele dumneavoastră de logare au expirat, vă rugăm să vă logați din nou pentru a continua. Și atunci, utilizatorul neștiutor își introduce din nou datele, iar răufăcătorul i le "fură". Acesta este bineînțeles un scenariu pur ipotetic deoarece Facebook folosește deja valoarea noopener pentru toate link-urile postate de utilizatori pe platformă. Dar, cred că ai înțeles ce s-ar putea întâmpla dacă nu ar proceda așa.

Ce înseamnă noreferrer?

În mod similar cu noopener funcționează și noreferrer, care manipulează proprietatea window.opener astfel încât să nu acorde website-ului către care se face legătura acces la website-ul care face legătură. Dar, în plus, spre diferență de noopener, noreferrer ascunde pentru website-ul către face legătura și datele de identificare, precum adresa, ale website-ului care face legătura.

Cu alte cuvinte, dacă tu ai un website și cineva face trimitere către tine folosind această valoare, nu vei ști de unde au ajuns pe pagina ta cei care au accesat link-ul respectiv.

Ce înseamnă nofollow?

Din punct de vedere SEO, este important să obții cât mai multe link-uri de calitate către website-ul tău. Dar nu toate link-urile sunt create egal. În general, când o pagină face trimitere către pagina ta, acesta îți împrumută din autoritatea ei, semnalând motoarelor de căutare faptul că website-ul tău este unul valoros. Dar există și situații, ca de exemplu atunci când realizezi legături interne sau când faci legătura către un comentariu postat pe un forum, când nu vrei ca autoritatea să fie transferată de la o pagină la alta și atunci poți folosi valoarea nofollow.