rel 속성 - noopener, noreferrer, nofollow

HTML의 a tag에 rel이라는 속성을 보신적이 있으실 겁니다. a tag는 보통 href에 target=”_blank” 같은 속성만 사용해보고 rel 속성에 대해 잘 모르는 경우가 대부분입니다.

저도 이번에 HTML을 작성하면서 “이 rel 속성의 역할은 뭘까?” 라는 생각이 들어 찾아봤습니다.

rel 속성

rel 속성은 현재 HTML 문서와 링크된 두 문서 사이의 관계를 명시하는 데 사용됩니다. 이 속성은 href 속성과 함께 사용되며, 검색 엔진은 이를 통해 링크에 대한 추가 정보를 파악할 수 있습니다.

rel 속성은 주로 <a>(하이퍼링크), <link>(외부 스타일시트 연결), <area>(이미지 맵 영역), <form>(폼 제출) 태그와 함께 사용됩니다.

1. <a> : 링크를 표현하는 태그입니다.
   • <a href="<https://www.example.com>" rel="nofollow">예시 링크</a>
2. <link> : 외부 스타일시트를 연결하는 태그입니다.
   • <link rel="stylesheet" href="styles.css">
3. <area> : 이미지 맵 영역을 정의하는 태그입니다.
   • <area href="<https://www.example.com>" rel="nofollow" shape="rect" coords="0,0,100,100" alt="예시 링크 영역">
4. <form> : 폼 제출에 대한 관련 정보를 명시하는 태그입니다.
   • <form action="./submit" method="post" rel="nofollow">...</form>

그렇다면 이 rel 속성에 들어가는 값인 noopener, noreferrer, nofollow은 각자 무슨 역할을 할까요?

1. noopener

noopener 속성은 하이퍼링크(a 태그)를 통해 새 창이나 탭을 열 때 사용됩니다. 이 속성을 사용하면 새 창이나 탭에서 열린 문서가 원래 페이지에 대한 참조를 갖지 않도록 방지합니다. 이는 보안상의 이유로 매우 중요합니다.

예를 들어, 다음과 같은 HTML 코드를 살펴보겠습니다:

<a href="<https://www.example.com>" target="_blank" rel="noopener">예시 링크</a>

위의 코드에서 "target" 속성은 링크가 새 창이나 탭에서 열리도록 지정합니다. 그리고 "rel" 속성에 noopener 값을 설정하여 새로 열린 창에서 원래 페이지에 대한 참조를 차단합니다. 이를 통해 악의적인 페이지에서 원래 페이지에 접근하는 것을 방지할 수 있습니다.

2. noreferrer

noreferrer 속성은 noopener과 유사한 목적으로 사용됩니다. 이 속성은 링크를 통해 다른 페이지로 이동할 때, HTTP Referer Header를 전송하지 않도록 설정합니다. Referer Header는 웹 페이지에서 링크를 클릭할 때, 원래 페이지의 URL이 전송되는 정보입니다.

아래의 예시 코드를 통해 noreferrer 속성을 확인해보겠습니다:

<a href="<https://www.example.com>" target="_blank" rel="noreferrer">예시 링크</a>

위의 코드에서 rel 속성에 noreferrer 값을 설정함으로써, 웹 브라우저가 링크를 클릭할 때 HTTP Referer Header를 전송하지 않습니다. 이를 통해 사용자의 개인 정보를 보호하고, 웹사이트 간의 데이터 유출을 방지할 수 있습니다.

3. nofollow

nofollow 속성은 검색 엔진이 해당 링크를 따라가지 않도록 지시하는 역할을 합니다. 이 속성은 링크의 신뢰도와 검색 엔진 최적화(SEO 최적화)에 영향을 미칩니다. 일반적으로 웹 페이지의 링크는 검색 엔진 크롤러에 의해 따라가며, 해당 페이지의 랭킹 및 신뢰도에 영향을 줍니다. 그러나 nofollow 속성이 설정된 링크는 크롤러가 따라가지 않으므로 랭킹에 영향을 미치지 않습니다.

다음은 nofollow 속성을 사용한 예시 코드입니다:

<a href="<https://www.example.com>" rel="nofollow">예시 링크</a>

위의 코드에서 rel 속성에 nofollow 값을 설정함으로써, 검색 엔진이 해당 링크를 따라가지 않도록 지시합니다. 이를 통해 웹 페이지의 랭킹을 조절하고, 검색 엔진 크롤러가 신뢰할 수 없는 링크로 인해 부정적인 영향을 받는 것을 방지할 수 있습니다.

이렇게 noopener, noreferrer, 그리고 nofollow 속성은 HTML 태그에서 링크와 관련된 보안과 SEO(검색 엔진 최적화) 측면에서 중요한 역할을 합니다. 이러한 속성을 적절히 활용하여 웹 페이지의 보안을 강화하고, 검색 엔진에 대한 컨트롤을 유지할 수 있습니다.