noopener vs noreferrer vs nofollow: koja je razlika?

Ako se bavite web developmentom ili search engine optimizationom odnosno SEO-om, velika je šansa da ste naletjeli na pojmove noopener, noreferrer i nofollow. Što je zapravo noopener noreferrer? A što nofollow? U ovom članku objašnjavam sva tri pojma i njihov utjecaj na SEO i web sigurnost.

Uvod

Sva tri pojma, noopener, noreferrer i nofollow, vrijednosti su rel atributa anchor taga u HTML-u. Vjerojatno je nofollow najpoznatiji među web developerima i SEO stručnjacima.

Anchor tag <a> u HTML-u se u pravilu koristi za definiranje URL-a odnosno linka. Primjerice:

<a href="https://www.goranstimac.com">
   Kliknite ovdje da posjetite GoranStimac.com.
<a>

Možete vidjeti href atribut čija je vrijednost web adresa početne stranice GoranStimac.com. Nakon toga slijedi tekst koji se prikazuje korisniku. Ovisno o CSS-u i browseru, taj tekst može biti podcrtan, drukčije obojen ili oboje.

Anchor tag može imati mnogo različitih atributa, a jedan od njih je rel, što dolazi od relationship. Upravo su noopener, noreferrer i nofollow vrijednosti tog atributa.

Pogledajmo još jedan primjer:

<a href="https://www.goranstimac.com" rel="noopener noreferrer nofollow" target="_blank">
   Kliknite ovdje da posjetite GoranStimac.com.
</a>

Sada jasno vidite tri vrijednosti rel atributa. Uz to, tu je i target atribut s vrijednošću _blank, što browseru govori da link otvori u novoj kartici.

To je ujedno i glavni razlog zašto se koriste vrijednosti poput noopener i noreferrer. U tome ujedno leži i izvor mogućih sigurnosnih i phishing problema.

Pogledajmo svaku od njih detaljnije, kao i njihov značaj za SEO i sigurnost te kada ima smisla koristiti rel, nofollow ili rel noopener.

Što je noopener?

Kada koristite target="_blank", događa se jedna zanimljiva stvar. Stranica na koju linkate dobiva djelomičan pristup stranici s koje link dolazi putem window.opener objekta.

Zatim linked stranica može koristiti window.opener.location da bi otvorila zlonamjernu web stranicu u izvornom tabu.

To se može iskoristiti za phishing napade. Zamislite sljedeći scenarij.

Napravite zlonamjernu web stranicu i na nju stavite viralni sadržaj. Zatim je dijelite na društvenim mrežama ili drugim izvorima koji otvaraju vanjske linkove koristeći target="_blank". Facebook je dobar primjer.

Korisnik klikne na link i vaša se stranica otvori u novoj kartici. U tom trenutku zlonamjerna stranica dobiva kontrolu nad prethodnim tabom, primjerice onim s Facebookom. Kroz window.opener.location može ga preusmjeriti na novu stranicu, recimo lažnu Facebook login formu s porukom: “Your previous Facebook session expired. Please log in again to continue using Facebook”.

Korisnik tada unese svoje podatke i postane žrtva phishing napada.

Ovo je hipotetski primjer jer Facebook koristi rel="noopener" na target="_blank" linkovima. Ali poanta je jasna.

Više detalja

Korištenje noopener vrijednosti govori browseru da otvori link u novoj kartici bez davanja pristupa novom kontekstu prema stranici koja je link otvorila. To se postiže tako da se window.opener ne postavlja, pa njegova vrijednost ostaje null.

Drugim riječima, browser otvara link bez davanja pristupa dokumentu koji ga je otvorio.

rel="noopener" nema nikakav izravan utjecaj na search engine optimization. SEO-u je neutralan, ali ga treba koristiti kada radite s linkovima koji koriste target="_blank".

Što je noreferrer?

Slično kao noopener, noreferrer također sprječava novo otvorenu stranicu da manipulira window.opener objektom. No uz to, noreferrer sprečava browser da pri prelasku na drugu stranicu pošalje adresu stranice s koje korisnik dolazi.

Jednostavno rečeno, noreferrer skriva referrer informacije kada se klikne na link. Primjerice, ako netko objavi vaš link na svojoj stranici i koristi noreferrer, a korisnici kliknu na taj link, vi nećete moći vidjeti odakle su došli. U analytics alatu poput Google Analyticsa taj će promet izgledati kao direct traffic, a ne referral.

Ni noreferrer nema izravan utjecaj na SEO, ali može iskriviti podatke u analytics alatima jer prikazuje više direct prometa.

Postoje i određene affiliate marketing implikacije povezane s noreferrer, ali to izlazi iz okvira ovog članka. U praksi većina affiliate sustava danas koristi metode koje ne ovise o toj vrijednosti.

Kada koristiti noreferrer, a kada noopener? Moj prijedlog je da u pravilu razmotrite korištenje obje vrijednosti. Većina modernih browsera podržava noopener, ali u starijim slučajevima noreferrer može poslužiti kao dodatna zaštita.

To praktično znači da ima smisla koristiti oba kako biste podržali i starije browsere. No najbolji pristup često je jednostavno izbjeći target="_blank" osim kada imate vrlo dobar razlog da ga koristite.

Pogledajte i dobre i loše razloge za korištenje _blank vrijednosti.

Što je nofollow?

U SEO-u je važno dobiti mnogo kvalitetnih linkova koji vode prema vašoj stranici. Ti linkovi nazivaju se backlinkovima. No nisu svi linkovi jednaki.

Kada jedna stranica linka prema vašoj, ona u pravilu prenosi dio svojeg link juicea, odnosno daje vašoj stranici više kredibiliteta i šalje signal tražilicama da tu stranicu smatra vrijednom. To se može promatrati kao svojevrsna preporuka. Ako na vas linka visoko autoritativna stranica, Google i Bing to mogu uzeti kao ranking signal. Google pritom koristi koncept PageRanka kao mjeru količine i kvalitete linkova.

No ponekad ne želite prenijeti link juice. To može biti slučaj i kod internih linkova, primjerice kada ne želite prenositi vrijednost s najvažnijih stranica na manje važne.

Tu ulazi rel="nofollow". Kao i noopener i noreferrer, i nofollow je vrijednost rel atributa. Kada ga dodate, tražilicama signalizirate da ne želite prenijeti svoj link juice odnosno PageRank na stranicu na koju linkate.

<a href="https://www.goranstimac.com" rel="noopener noreferrer nofollow" target="_blank">
   Kliknite ovdje da posjetite GoranStimac.com.
</a>

U ovom primjeru koristimo sve tri vrijednosti. Dodavanjem nofollow vrijednosti signaliziramo Googleu da se PageRank odnosno link juice ne prenosi na stranicu goranstimac.com.

Kada koristiti nofollow?

Opće je pravilo da nofollow koristite na linkovima u komentarima ili na forumima. User-generated content lako postaje izvor spama i nekvalitetnih linkova, a ne želite da vaš blog ili forum prenosi autoritet na takve stranice.

Također, Google i druge tražilice traže da koristite nofollow na svim sponsored linkovima i oglasima. Isto vrijedi i za linkove u press releaseovima i razne druge paid linkove.

Kratko o terminologiji

Ponekad ćete vidjeti da ljudi govore o noopener tagu ili noreferrer tagu. U drugim slučajevima spominjat će rel noreferrer atribut. Iako većina web developera razumije o čemu je riječ, vrijedi pojasniti nekoliko stvari.

• noopener, noreferrer i nofollow nisu tagovi ni atributi, nego vrijednosti atributa
• rel nije tag, nego atribut anchor taga
• <a> je HTML tag i on ima atribute poput rel, a ti atributi imaju vrijednosti poput noopener noreferrer nofollow

Zaključak

Postoje tri temeljne vrijednosti rel atributa anchor taga: noreferrer, noopener i nofollow.

• rel="noopener" koristite na svim linkovima koji se otvaraju u novim tabovima pomoću target="_blank"; ako ga ne koristite, postoje sigurnosne implikacije jer zlonamjerni napadač može koristiti window.opener objekt za promjenu sadržaja i lokacije izvorne stranice
• rel="noreferrer" može služiti sličnoj svrsi kao noopener, posebno u starijim browserima, pa često ima smisla koristiti oba; uz to, noreferrer može utjecati na analytics i promet prikazati kao direct umjesto referral
• rel="nofollow" govori tražilicama da ne prenose link juice odnosno PageRank na linked stranicu; možete ga promatrati kao vrijednost koju koristite kada želite linkati neku stranicu bez da je “preporučite”; to je jedina rel vrijednost s ove liste koja ima konkretan SEO učinak