Contents

noopener, noreferrer, nofollow 의 차이점과 사용 방법

개요

웹 개발 시, 보안과 SEO(Search Engine Optimization) 측면에서 중요한 요소 중 하나가 바로 링크(link)이다. 하지만 링크에는 이용자를 다른 웹사이트로 이동시키는 것뿐만 아니라 보안상 문제를 유발할 수 있는 링크가 있다. 이에 링크의 보안 및 SEO 측면을 고려하여 링크 속성 중 noopener, noreferrer, nofollow 속성을 사용할 수 있다. 이 글에서는 noopener, noreferrer, nofollow 속성의 차이점과 사용 방법에 대해 살펴보겠다.

noopener

noopener란?

noopener는 웹사이트에서 링크를 클릭할 때, 링크를 새로운 브라우저 탭에서 열 때 새로운 탭에서 열린 페이지가 기존 페이지를 조작하지 못하도록 하는 보안 속성이다.

noopener 사용 방법

다음은 noopener를 사용하는 방법이다.

<a href="http://www.example.com" target="_blank" rel="noopener">Example</a>

위 예시 코드에서 rel=”noopener”는 noopener를 적용한 것이다.

noreferrer

noreferrer란?

noreferrer는 링크를 클릭했을 때, 새로운 페이지가 이전 페이지의 정보를 전송하지 않도록 하는 보안 속성이다.

noreferrer 사용 방법

다음은 noreferrer를 사용하는 방법이다.

<a href="http://www.example.com" target="_blank" rel="noreferrer">Example</a>

위 예시 코드에서 rel=”noreferrer”는 noreferrer를 적용한 것이다.

nofollow

nofollow란?

nofollow는 링크를 클릭했을 때, 검색 엔진이 해당 링크를 크롤링하지 않도록 하는 SEO 속성이다.

nofollow 사용 방법

다음은 nofollow를 사용하는 방법이다.

<a href="http://www.example.com" rel="nofollow">Example</a>

위 예시 코드에서 rel=”nofollow”는 nofollow를 적용한 것이다.