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

개요

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

noopener

noopener란?

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

noopener 사용 방법

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

Example

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

noreferrer

noreferrer란?

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

noreferrer 사용 방법

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

Example

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

nofollow

nofollow란?

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

nofollow 사용 방법

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

Example

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

noopener, noreferrer, nofollow의 차이점

위에서 살펴본 것처럼, noopener, noreferrer, nofollow는 모두 보안 및 SEO 측면에서 링크 속성을 조작할 수 있는 속성이다. 하지만 각각의 속성은 다음과 같은 차이점이 있다.

noopener와 noreferrer의 차이점

• • noopener는 링크를 클릭하여 새로운 탭에서 열린 페이지가 기존 페이지를 조작하지 못하도록 하는 보안 속성이다.
  • 반면,noreferrer는 링크를 클릭하여 새로운 페이지가 이전 페이지의 정보를 전송하지 않도록 하는 보안 속성이다.

noopener와 nofollow의 차이점

• noopener는 링크를 클릭하여 새로운 탭에서 열린 페이지가 기존 페이지를 조작하지 못하도록 하는 보안 속성이다.
• 반면, nofollow는 검색 엔진이 해당 링크를 크롤링하지 않도록 하는 SEO 속성이다.

noreferrer와 nofollow의 차이점

• noreferrer는 링크를 클릭하여 새로운 페이지가 이전 페이지의 정보를 전송하지 않도록 하는 보안 속성이다.
• 반면, nofollow는 검색 엔진이 해당 링크를 크롤링하지 않도록 하는 SEO 속성이다.

언제 어떤 속성을 사용해야 할까?

보안 측면에서, 링크를 클릭하여 새로운 페이지가 열리는 경우, noopener와 noreferrer 속성을 함께 사용하는 것이 좋다. 또한, 이전 페이지의 정보가 전송되지 않도록 하고자 할 때는 noreferrer 속성을 사용할 수 있다.

SEO 측면에서, 검색 엔진이 해당 링크를 크롤링하지 않도록 하고자 할 때는 nofollow 속성을 사용할 수 있다.

마무리

이번 글에서는 noopener, noreferrer, nofollow 속성의 차이점과 사용 방법에 대해 살펴보았다. 링크 속성을 올바르게 사용하여 웹사이트의 보안과 SEO 측면을 개선할 수 있으므로, 개발자는 링크 속성을 사용하는 데 주의해야 한다.