Ano ang talagang ginagawa ng rel=noopener, noreferrer at nofollow

Ang maikling bersyon

Inilalarawan ng rel attribute sa isang link ang ugnayan sa pagitan ng kasalukuyang page at ng naka-link na page. Parang abstrakto iyon, pero may tatlong value na palaging lumilitaw sa pang-araw-araw na web work:

<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">
  External resource
</a>

Madalas na kinokopya ang tatlong token na iyon na parang iisang bagay ang ginagawa nila. Hindi ganoon.

• Ang noopener ay kontrol sa seguridad ng browser.
• Ang noreferrer ay kontrol sa privacy at analytics.
• Ang nofollow ay signal para sa search engine.

Puwede silang pagsamahin, pero dapat mong alam kung bakit naroon ang bawat isa. Hindi laging mali ang pagdaragdag ng tatlo sa bawat outbound link, pero kadalasan ay tamad na paraan iyon.

Pinipigilan ng rel=noopener ang reverse tabnabbing

Sinasabi ng rel="noopener" sa browser na huwag bigyan ang bagong bukas na page ng access sa orihinal na page sa pamamagitan ng window.opener.

Mahalaga ito lalo na kapag nagbubukas ka ng link sa bagong tab o window gamit ang target="_blank":

<a href="https://external.example" target="_blank" rel="noopener">
  Open external site
</a>

Kung walang noopener, maaaring makapagpatakbo ang destination page ng JavaScript na ganito:

window.opener.location = 'https://phishing.example';

Karaniwang tinatawag ang pag-atakeng iyon na reverse tabnabbing. Nagki-click ang user ng lehitimong link, napupunta sa ibang site, at tahimik na inililipat ang orihinal na tab sa pekeng login page o ibang mapaminsalang destinasyon.

Mas naging maayos na rito ang mga modernong browser. Sa kasalukuyang asal ng browser, ang target="_blank" ay karaniwang itinuturing na parang naroon ang rel="noopener". Maganda iyon, pero hindi nito ginagawang walang saysay ang tahasang attribute. Kapaki-pakinabang pa rin ang explicit na noopener dahil:

• idinodokumento nito ang iyong intensyon;
• pinoprotektahan nito ang mas luma o hindi karaniwang browsing environment;
• iniiwasan nitong umasa sa bawat embedded web view na kikilos tulad ng modernong desktop browser;
• pinapadali nito ang code review.

Para sa mga external link na nagbubukas sa bagong tab, makatuwirang default ang rel="noopener".

Nakaaapekto ba ang noopener sa SEO?

Hindi, hindi sa anumang makabuluhang paraan. Ang noopener ay para sa asal ng browser. Hindi nito sinasabi sa mga search engine kung ine-endorse mo ang isang page, kung dapat maipasa ang link equity, o kung bayad ang link.

Kung itinuturing ng iyong SEO policy ang noopener bilang ranking directive, kailangan ng policy na iyon ng pag-edit.

Itinatago ng rel=noreferrer ang referring page

Sinasabi ng rel="noreferrer" sa browser na huwag ipadala ang Referer HTTP header kapag sinundan ng user ang link.

Oo, ang header ay makasaysayang mali ang baybay bilang Referer. Ang attribute ay binabaybay na noreferrer.

Karaniwan, kapag nag-click ang user ng link mula sa iyong page papunta sa ibang site, maaaring makatanggap ang destinasyon ng referrer value na nagpapakita kung saan nanggaling ang pagbisita. Depende sa Referrer-Policy ng iyong site, maaaring iyon ay ang buong URL, ang origin lang, o wala.

Halimbawa, maaaring makita ng destinasyon ang:

Referer: https://www.example.com/pricing?plan=enterprise

o kaya ay:

Referer: https://www.example.com/

Sa rel="noreferrer", hindi dapat ipadala ng browser ang header na iyon para sa navigation na iyon.

<a href="https://external.example" rel="noreferrer">
  External site
</a>

Sa praktika, ang noreferrer ay kumikilos din tulad ng noopener sa mga modernong browser. Kung gumagamit ka ng noreferrer, karaniwan ay hindi mo na kailangan ang noopener para sa seguridad sa parehong link na iyon. Maraming team pa rin ang nagsusulat ng pareho para sa linaw:

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External site
</a>

Ayos lang iyon. Redundant ito, pero madaling basahin.

Kailan kapaki-pakinabang ang noreferrer

Gamitin ang noreferrer kapag hindi dapat malantad sa destinasyon ang URL ng kasalukuyang page.

Karaniwang halimbawa:

• mga link mula sa pribadong dashboard;
• mga link mula sa hindi pa nailalathalang preview environment;
• mga link mula sa mga URL na may sensitibong query parameter;
• mga link sa admin tool, moderation queue, CRM screen, o customer support system;
• mga link kung saan hindi dapat malaman ng destinasyon ang eksaktong source page.

Ang huling puntong iyon ay hindi laging tungkol sa paglilihim. Minsan, tungkol ito sa data minimization. Kung hindi kailangang malaman ng destinasyon ang referring URL, huwag itong ipadala.

Umaayon ito sa mas malawak na direksyon ng privacy-aware na web design. Ang mga browser, user at regulator ay pawang kumilos patungo sa pagpapadala ng mas kaunting ambient data bilang default. Kung binabalikan mo ang bahaging ito, tinatalakay ng aming artikulo tungkol sa ano ang nagbago para sa cookies noong 2026 at ano ang gagawin tungkol dito ang parehong pangkalahatang pagbabago: mas kaunting hindi nakikitang tracking, mas sinasadyang daloy ng data.

Ang kapalit sa analytics

Maaaring sirain ng noreferrer ang attribution para sa site na nililinkan mo. Maaaring uriin ng analytics nila ang pagbisita bilang direct traffic sa halip na referral traffic.

Hindi iyon ang pangunahing problema mo, pero maaaring maging mahalaga ito sa partnerships, affiliate relationships, customer journeys, at internal cross-domain ecosystems. Kung inaasahan ng marketing team mo na makakakita ang mga partner site ng referral traffic mula sa iyong domain, maaaring magdulot ng kalituhan ang blanket na noreferrer.

Para sa maraming ordinaryong editorial link, mas mabuting approach ang magtakda ng site-wide na Referrer-Policy header kaysa magdagdag ng noreferrer saanman. Halimbawa:

Referrer-Policy: strict-origin-when-cross-origin

Ipinapadala ng policy na iyon ang buong URL para sa same-origin navigation, ipinapadala lamang ang origin sa secure na cross-origin destinations, at hindi nagpapadala ng referrer kapag lumilipat mula HTTPS patungong HTTP. Praktikal itong default para sa maraming site.

Kung kailangan mong siyasatin kung paano kumikilos ang headers sa production, mas malinaw kadalasan ang raw HTTP check kaysa manghula mula sa analytics dashboards. Direktang naaangkop sa referrer-policy debugging ang workflow sa isang maliit na toolkit para sa pag-debug ng redirects at HTTP headers sa production.

Ang rel=nofollow ay para sa mga search engine, hindi sa mga browser

Sinasabi ng rel="nofollow" sa mga search engine na ayaw mong magpahiwatig ng endorsement sa naka-link na page.

<a href="https://external.example" rel="nofollow">
  User-submitted link
</a>

Noong una, ipinakilala ang nofollow para labanan ang comment spam. Simple ang ideya: kung hindi nagpapasa ng ranking credit ang mga link sa comments, mas kaunti ang insentibo ng spammers na bahain ang blogs at forums.

Ngayon, itinuturing ng Google ang nofollow bilang hint sa halip na absolutong directive. Mahalaga ang pagkakaibang iyon. Ibig sabihin, maaaring gamitin ng mga search engine ang link para sa discovery o ranking systems sa ilang konteksto, pero malinaw mong sinisenyasan na hindi dapat ituring ang link bilang normal na editorial endorsement.

Kailan gagamitin ang nofollow

Gamitin ang nofollow kapag nagli-link ka pero ayaw mong panindigan ang destinasyon.

Mga makatuwirang halimbawa:

• hindi pinagkakatiwalaang user-generated links;
• mga link sa pampublikong comments o profiles;
• mga link sa mga site na binabanggit bilang halimbawa ng masamang asal;
• mga link na isinama bilang sanggunian pero hindi endorsement;
• mga link sa mga lugar kung saan limitado ang moderation.

Para sa bayad o sponsored links, piliin ang rel="sponsored". Para sa user-generated content, piliin ang rel="ugc". Maaari mong pagsamahin ang mga value kung kailangan:

<a href="https://example.com" rel="ugc nofollow">
  User profile link
</a>

Kung nagpapatakbo ka ng pampublikong forms, comments, directories, o profile pages, ang link attributes ay isang bahagi lamang ng problema sa abuse. Karaniwang mas maagang nagsisimula ang spam sa submission flow. May hiwalay kaming breakdown tungkol sa bakit ang iyong contact form ang pinakamalaking spam liability mo, at pareho ang aral dito: huwag asahang babawiin ng nofollow ang mahinang moderation.

Ano ang hindi ginagawa ng nofollow

Hindi pinipigilan ng nofollow ang mga user na i-click ang link. Hindi nito hinaharangan ang browser sa pagpapadala ng referrer. Hindi nito itinatago ang destinasyon mula sa view. Hindi nito sine-secure ang target="_blank".

Hindi rin nito ginagarantiya na ang isang URL ay hindi kailanman ma-crawl. Kung mahahanap ng mga search engine ang URL sa ibang lugar, maaari pa rin nila itong i-crawl. Kung kailangan mong pigilan ang indexing, gamitin ang angkop na robots controls sa destination page, tulad ng noindex, hindi ang nofollow attribute sa link ng ibang tao.

Karaniwang kombinasyon

External link na nagbubukas sa bagong tab

<a href="https://external.example" target="_blank" rel="noopener">
  External resource
</a>

Ito ang baseline. Tinutugunan nito ang isyung panseguridad na nalilikha ng pagbubukas ng bagong browsing context.

Kung ayaw mo ring magpadala ng referrer data:

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External resource
</a>

Bayad na placement

<a href="https://sponsor.example" rel="sponsored">
  Sponsor site
</a>

Maaari mong idagdag ang noopener kung nagbubukas ito sa bagong tab:

<a href="https://sponsor.example" target="_blank" rel="sponsored noopener">
  Sponsor site
</a>

Huwag gamitin ang nofollow bilang malabong kapalit ng pag-disclose ng paid links. May mas tiyak nang value ang mga search engine para roon ngayon: sponsored.

User-generated link

<a href="https://user-submitted.example" rel="ugc nofollow">
  User-submitted site
</a>

Sinasabi nito sa mga search engine na ang link ay iniambag ng user at hindi dapat ituring bilang normal na editorial vote.

Internal links

Karamihan sa internal links ay hindi nangangailangan ng alinman sa mga value na ito.

Huwag magdagdag ng nofollow sa internal links bilang karaniwang sculpting tactic. Karaniwan itong lumilikha ng mas maraming kalituhan kaysa benepisyo. Kung hindi dapat ma-index ang isang page, harapin iyon nang direkta. Kung hindi dapat ma-crawl ang isang page, pag-isipang mabuti ang robots rules, authentication, canonicalization, at site architecture.

Para sa internal links na nagbubukas sa bagong tab, harmless pa rin ang noopener at maaaring angkop. Pero ang mas magandang tanong ay kung bakit kailangan pang magbukas sa bagong tab ang internal link.

Praktikal na policy para sa mga team

Pinipigilan ng simpleng house style ang karamihan sa mga pagkakamali:

1. Idagdag ang rel="noopener" sa mga link na may target="_blank", lalo na sa external links.
2. Idagdag lamang ang noreferrer kapag sinasadya ang pagtatago ng source URL.
3. Idagdag lamang ang nofollow kapag hindi mo ine-endorse ang destinasyon.
4. Gamitin ang sponsored para sa paid links at ugc para sa user-submitted links.
5. Huwag gamitin ang link attributes bilang kapalit ng access control, moderation, o indexing rules.

Ang mahalagang bahagi ay intensyon. Dapat masagot ng bawat token sa rel ang isang partikular na tanong:

• Seguridad: dapat bang ihiwalay ang bagong page mula sa opener?
• Privacy: dapat bang makatanggap ang destinasyon ng referrer information?
• SEO: ine-endorse ba natin ang link na ito bilang editorial reference?

Kung walang sinuman sa team ang makasagot sa mga tanong na iyon, malamang cargo cult HTML ang attribute.

Paano subukan kung ano ang nangyayari

Para sa noopener, buksan ang link at tingnan kung maa-access ng destinasyon ang window.opener. Sa isang controlled test page, dapat null ang window.opener kapag aktibo ang noopener.

Para sa noreferrer, siyasatin ang network request sa destination side o gumamit ng request logger sa test environment. Maaaring ipakita ng Browser DevTools ang outgoing request headers, pero kadalasang mas maaasahan ang server-side logs.

Para sa nofollow, hindi agad-agad ang testing dahil interpretasyon ito ng search engine, hindi asal ng browser. Ang pinakamainam mong check ay source inspection: kumpirmahing ang rendered HTML ay naglalaman ng inaasahang rel value. Kung nire-rewrite ng frontend framework mo ang mga link, siyasatin ang final DOM, hindi lang ang template.

Ang pinakabuod

Maliliit ang mga attribute na ito, pero nasa interseksyon sila ng seguridad, privacy at SEO. Ang pagtrato sa kanila bilang magkakapareho ang gamit ay lumilikha ng masasamang nakasanayan.

Gamitin nang maluwag ang noopener sa mga new-tab link. Gamitin ang noreferrer nang sadya kapag mahalaga ang referrer privacy. Gamitin ang nofollow kapag gumagawa ka ng search-facing statement tungkol sa endorsement. At kapag bayad o user-generated ang link, gamitin ang mas tiyak na modernong values: sponsored at ugc.

Sapat na iyon para sa karamihan ng sites. Ang layunin ay hindi palamutian ang bawat link. Ang layunin ay gawing malinaw sa browser at sa mga search engine ang eksaktong kailangan nilang malaman tungkol sa bawat link.