<a> 태그의 rel 속성: noreferrer, noopener, nofollow

<a> 태그의 rel 속성은 링크된 리소스와의 관계를 지정하는 데 사용되며, 다양한 값을 가질 수 있습니다. 여러 속성 값 중 noreferrer, noopener, nofollow에 대해 자세히 알아보겠습니다.

---

rel 속성 값

1. rel="noreferrer"

• noreferrer 속성은 사용자가 링크를 클릭했을 때 브라우저가 HTTP 리퍼러(이전 페이지의 주소)를 전송하지 않도록 합니다.
• 보안 이슈: 이는 사용자의 개인 정보를 보호하고, 외부 사이트에 사용자의 방문 기록이 전달되는 것을 방지합니다.

2. rel="noopener"

• noopener 속성은 새로 열린 창이나 탭이 window.opener를 통해 현재 창에 접근하는 것을 방지합니다.
• 보안 이슈: 이를 사용하여 타깃 창이 현재 창을 조작하는 것을 방지함으로써 보안 측면에서 더 안전한 사용자 경험을 제공합니다.

3. rel="nofollow"

• nofollow 속성은 검색 엔진에게 해당 링크를 따라가지 말라고 지시합니다. 이는 검색 엔진이 해당 링크를 무시하고 인덱싱하지 않도록 합니다.
• SEO 관련: 특히 사용자가 생성한 콘텐츠에서 신뢰성을 제어하고 싶을 때 유용하며, 블로그 댓글 등에서 스팸 링크를 방지하는 데 도움이 됩니다.

---

보안 측면 (noreferrer, noopener)

1. 보안 강화

• noreferrer와 noopener를 사용하여 사용자 및 웹 애플리케이션의 보안을 강화할 수 있습니다.
• 예를 들어, 새 창에서 열리는 외부 링크에 대해 이러한 속성을 추가하면 사용자의 개인 정보를 더욱 효과적으로 보호할 수 있습니다.

2. 개인 정보 보호

• noreferrer를 사용하면 사용자의 브라우저가 이전 페이지의 주소를 서버에 전송하지 않으므로 개인 정보를 더 효과적으로 보호할 수 있습니다.

---

SEO 측면 (nofollow)

• nofollow를 사용하면 특정 링크가 검색 엔진 랭킹에 영향을 주지 않도록 할 수 있습니다.
• 예를 들어, 사용자가 생성한 콘텐츠에서 스팸 링크를 방지하거나, 블로그의 외부 링크가 신뢰할만한지 검토하는 데 활용됩니다.

---

사용 예시

<a href="https://example.com" rel="noopener noreferrer nofollow">클릭하세요</a>

이 예시에서는 링크를 클릭할 때 새 창이 열리면서 (noopener) 리퍼러 정보가 전송되지 않게 (noreferrer) 하며, 검색 엔진이 해당 링크를 따라가지 않도록 (nofollow) 합니다. 이렇게 하면 사용자 경험을 개선하면서 보안과 SEO 측면에서도 이점을 얻을 수 있습니다.

(사진 출처: elegantthemes.com/blog/wordpress/rel-noopener-noreferrer-nofollow)