HTML, rel 속성 (noopener, noreferrer, nofollow)

2022-05-12

date

May 12, 2022

slug

html-rel

summary

HTML, rel 속성 알아보기

thumbnail

status

publish

HTML, rel 속성

rel 속성은 relation 의 줄임말입니다.

주로 a , link 등의 태그에서 사용되는 속성으로, 말그대로 현재 문서와 외부 리소스 및 문서 사이의 관계 를 명시합니다!


<!-- 스타일 파일 -->
<link href="style.css" rel="stylesheet" />

<!-- 파비콘 -->
<link href="favicon.png" rel="icon" />

<!-- 검색엔진 추적 차단 -->
<a href="/login" rel="nofollow">로그인</a>

해당 속성에는 다양한 값이 존재 할 수 있습니다.

속성 값 상세 링크

다양한 속성 값중에서 아래와 같은 속성은 조금 특별합니다.

단순히 관계를 나타내주기보단 관계에 대한 행동을 정의할 수 있습니다.

✨ noopener, noreferrer, nofollow

noopener


<a href="https://site.com" target="_blank" rel="noopener">새 창</a>

일반적으로 새 창으로 페이지를 띄우고 싶을 때, target="_blank" 라는 속성을 이용합니다.

하지만, 해당 속성을 사용해서 이동된 페이지는 window.opener 를 통해서 원래 페이지의 window 객체를 알 수 있게 됩니다. 🥲

만약 이동될 페이지가 신뢰할 수 없는 페이지라면 해당 속성을 이용해서 현재 페이지의 정보를 은닉할 수 있게됩니다.

noreferrer


<a href="https://site.com" target="_blank" rel="noreferrer">이동</a>

noreferrer를 사용하면 링크를 클릭했을 때, HTTP 리퍼러 헤더(referer header)를 넘기지 않을 수 있습니다. 이를 통해 이동된 페이지에서 사용자가 어디에서 왔는지 알 수 없게 됩니다.

SEO 측면에서 문제는 없지만 Goolge Analytics 같은 통계 분석에서 Referral 접근이 아닌 Direct 접근으로 수치화하기 때문에

방문 통계시 조금의 수치상 오류가 생길 수 있습니다!

nofollow


<a href="/login" rel="nofollow">로그인</a>

nofollow의 경우는 검색엔진 이 해당 링크를 타고 SEO를 수행하지 않도록 지정할 수 있습니다.

자유 게시판, 방명록과 같은 페이지는 원래 목적에서 벗어난 스팸 콘텐츠들이 존재 할 수 있습니다. 해당 페이지로의 링크는 SEO 가 필요 없기 때문에 해당 속성을 사용합니다.