[SEO] target="_blank" 좀 더 알고 사용하자 (noopener, noreferrer, nofollow 차이점에 대해서)

웹사이트를 개발할 때 종종 외부링크로 보내기 위한 마크업을 할 때가 있습니다. 그때 사용하는 속성이 target="_blank"인데, 이 속성을 사용할 때 같이 사용해야되는 속성이 있습니다. noopener, noreferrer 그리고 nofollow 입니다.

noopener는 무엇인가?

target = "_blank"값을 사용하면 재밌는 증상이 나타납니다. 아래 이미지를 한번 볼까요?

<a href="https://www.naver.com" target="_blank">네이버 웹사이트로 이동<a>

연결중인 페이지는 연결 페이지에 부분적으로 액세스하는 모습

target = "_blank" 속성값을 noopener 속성을 사용하지 않고 사용한다면 연결중인 페이지는 연결 페이지에 부분적으로 액세스 할 수 있습니다. window.opener 객체가 존재하는 모습을 확인할 수 있습니다. 해당 부분은 연결 페이지에서 이전 페이지를 제어할 수 있는 권한이 있다는건데, 최악의 경우 window.opener 객체를 활용해서 악의적인 동작을 일으킬 수 있습니다.

하지만, noopener 값을 rel 속성으로 사용하면 새로 열린 페이지에서 window.opener 객체가 존재하지 않는 것을 확인할 수 있습니다.

<a href="https://www.naver.com" target="_blank" rel="noopener">네이버로 이동</a>

noopener를 사용함으로써 window.opener 객체가 존재하지 않는 모습

noreferrer는 무엇인가?

<a href="https://www.naver.com" target="_blank" rel="noreferer">네이버로 이동</a>

noopener와 유사한 기능으로 noreferrer는 새로 열린 사이트가 window.opener 객체를 조작하지 못하게합니다. 그러나 noreferrer는 다른 페이지를 탐색 할 때 브라우저가 참조 웹 페이지의 주소를 보내지 못하게합니다.

쉽게 말해서 noreferrer 값은 링크를 클릭할 때 참조자 정보를 숨깁니다. 예를 들어, 누군가 자신의 웹 페이지에 링크를 게시하고 noreferrer 값이 포함된 링크를 클릭하면 해당 사용자가 어디에서 왔는지 알 수 있는 방법이 없습니다. 웹 로그 분석 소프트웨어 (예 : Google 웹 로그 분석)에서는 referral가 아닌 direct traffic으로 표시됩니다.

하지만, noreferrer는 SEO에는 영향을 미치지 않지만, direct traffic으로 파악되어 분석 및 추적 소프트웨어의 수치를 왜곡시킬 수 있습니다.

noopener와 noreferrer를 언제 사용할까?

둘 다 사용하는 것이 좋습니다. 최신 브라우저의 대부분은 noopener를 지원하지만 noopener가 지원되지 않는 경우 noreferrer를 사용할 수 있습니다. 이전 브라우저도 지원하기 위해 두 가지를 모두 사용하는 것이 좋습니다.

nofollow는 무엇인가?

SEO(검색 엔진 최적화)에서는 페이지에 연결되는 가치있는 링크들을 얻는 것이 중요합니다. 이를 백링크라고합니다. 그러나 모든 링크가 동일하게 생성되는 것은 아닙니다.

일반적으로 한 페이지가 귀하의 페이지에 링크 될 때 – 링크 주스를 통과하고 – 이는 – 귀하의 사이트에 더 많은 신뢰성을 제공하고 검색 엔진에 귀하의 웹 사이트를 소중하게 여기는 신호를 보냅니다. 본질적으로, 당신은 그것을 보증으로 생각할 수 있습니다. 권위있는 웹 페이지가 귀하에게 연결되는 경우 – 귀하를 승인하는 것이며 Google / Bing은이를 순위 요소로 인식합니다. 

Google은 페이지랭크(PageRank)라는 용어를 링크 수량 및 품질의 척도로 사용합니다.

페이지 랭크 (Google PageRank)란, Google이 보여주는 Web 페이지 중요도의 지표입니다.
Google은 링크를, 출처 사이트  →  링크된 사이트로의 지지라고 인식합니다.
많은 사이트에서 링크를 받는 것은, 많은 사이트로부터 지지되는 것과 같은 것이며, 그것을 나타내는 숫자적인 지표가 바로 페이지 랭크 (PR) 입니다.

그러나 때로는 링크 주스(Link Juice)를 전달하고 싶지 않을 수도 있습니다. 

링크 주스(Link Juice)란, Web페이지의 링크를 타고 흐르는 링크의 가치이며, 검색 순위를 결정하는 요소 중 하나입니다.
그 가치는 양(링크를 받고 있는 개수) × 질(링크 원본 사이트의 품질・관련성)으로 결정됩니다.
페이지 랭크는 링크 주스가 얼마나 모여 있는지의 지표라고 생각하시면 됩니다.

그럼 다시 본론으로 돌아가서, 예를 들어서 페이지를 내부적으로 링크를 생성할 때 링크 주스를 전달하고 싶지 않을 수 있습니다. 그럴 때 rel = "nofollow" 값을 추가하면 됩니다. noopener noreferrer와 마찬가지로 nofollow는 rel 속성의 값입니다. 이 값을 추가하면 페이지로 전달하고 싶지 않다는 것을 검색 엔진에 알립니다.

<a href="https://www.naver.com" target="_blank" rel="noopener noreferer nofollow">네이버로 이동</a>

이렇게 nofollow 값을 추가하면 PageRank / link 주스가 네이버 웹 사이트로 전달되지 않는다는 신호를 Google에 알립니다.

일반적으로 댓글 또는 포럼의 링크에서 nofollow를 사용하는 것입니다. 사용자 생성 콘텐츠는 스팸 및 저품질 링크의 출처가 될 수 있습니다. 블로그나 포럼 웹 사이트가 그 품질을 저품질 페이지에 전달하는 것을 원하지 않습니다.
또한 Google 및 기타 검색 엔진을 사용하려면 모든 스폰서 링크 및 광고에서 nofollow를 사용해야합니다. 보도 자료의 링크와 다른 종류의 유료 링크에 대해서도 마찬가지입니다.