rel=”noopener noreferrer” 태그는 무엇을 의미합니까? (& SEO에 영향을 미칩니까?)

게시 됨: 2022-04-14

웹 사이트의 보안을 관리하는 것은 사이트 소유자가 되는 가장 중요한 측면 중 하나입니다. URL 접두사에 HTTPS를 포함하는 것의 중요성 또는 SSL 인증서가 필요한 이유를 이해할 수 있습니다. 그러나 noopener noreferrer HTML 태그 속성이 무엇을 의미하며 언제 사용해야 하는지 알고 있습니까?

이 기사에서는 rel=”noopener noreferrer” 가 의미하는 바, 사용해야 하는 시기, SEO 관점에서 사이트에 미치는 영향에 대해 알아보겠습니다. 바로 뛰어들어봅시다.

rel="noopener noreferrer"란 무엇입니까?

rel="noopener noreferrer" HTML 속성은 외부 하이퍼링크에 나타납니다. 특히 noopener 및 noreferrer 속성을 모두 사용하면 다음을 방지할 수 있습니다.

링크를 클릭한 동일한 탭에서 링크의 대상 로드
대상 사이트의 분석에서 추천 트래픽으로 나타나는 백링크

태그 속성이 작동하는 모습은 다음과 같습니다.

<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">

WordPress는 새 창에서 열리도록 설정한 외부 링크에 이러한 속성을 자동으로 추가합니다. 그것들을 분해하고 각 속성이 하는 일을 살펴보겠습니다.

누누이

외부 링크가 사용자의 원래 브라우저 창을 제어하지 못하도록 하려면 noopener 속성을 추가해야 합니다. MDN에 따르면,

“[ noopener ]는 브라우저가 대상 리소스를 연 문서에 대한 새 탐색 컨텍스트 액세스 권한을 부여하지 않고 대상 리소스를 탐색하도록 지시합니다. [...] 이것은 원본 문서를 변조할 수 없도록 하기 위해 신뢰할 수 없는 링크를 열 때 특히 유용합니다..."

간단히 말해서, noopener 는 악성 링크가 사용자의 브라우저에 액세스하는 것을 방지하기 위한 보안 수단입니다(탭내빙으로 알려진 피싱 공격). 과거에는 링크에 target=”_blank” 만 남겨두면 이 보안 취약점이 발생했습니다. 이제 target=”_blank” 를 사용하여 새 브라우저 창에서 열리도록 외부 링크를 설정할 때마다 대부분의 검색 엔진과 SEO 전문가는 noopener 를 함께 사용하는 것이 모범 사례라고 생각합니다.

(Mozilla 개발자 네트워크(MDN)에 따르면 target=”_blank” 속성 "이제 암시적으로 동일한 <rel> 동작을 제공" noopener . 모든 사용자가 최신 보안 브라우저에서 링크를 클릭하는 것은 아니기 때문에 noopener 를 포함하고 두 배로 안전할 가치가 있다고 생각합니다.)

rel="nofollow"와 함께 사용

rel=”noopener noreferrer” 가 포함된 링크에 nofollow 속성을 추가하면 콘텐츠나 관점을 승인하는 것처럼 보이지 않고 다른 웹사이트에 연결할 수 있습니다. Google은 이 속성을 "페이지에 링크하고 싶지만 순위 크레딧을 다른 페이지로 전달하는 것을 포함하여 어떤 유형의 보증도 암시하지 않으려는 경우"에 사용해야 한다고 말합니다.

기본적으로 nofollow 는 사용자가 특정 사이트에 링크한다는 이유만으로 특정 사이트를 지원하는 것으로 인식하지 않도록 Google에 알립니다. 스폰서 및 사용자 생성 콘텐츠에 레이블을 지정하기 위한 속성을 포함하여 Google이 링크의 의도를 이해하는 데 도움이 되는 유사한 링크 속성이 많이 있습니다(대부분 스키마 마크업을 통해 추가할 수 있음).

간단히 말해서 세 가지 속성( noopener , noreferrer 및 nofollow )을 모두 링크에 추가하면 Google에 사용자가 다음과 같이 알 수 있습니다.

잠재적으로 악의적인 외부 링크( noopener )로부터 사이트 사용자를 보호합니다.
웹사이트의 분석 데이터에 추천 트래픽( noreferrer )으로 표시되는 것을 꺼림
링크하는 콘텐츠 또는 제작자를 지지하지 않음( nofollow )

nofollow 속성은 상당히 구체적인 것 같으므로 일반적으로 사용하지 않고 사례별로만 사용하고 싶을 것입니다. 많은 블로그에서 댓글 섹션을 nofollow 로 설정하여 대화에 참여하지 않는 봇과 사람들의 댓글 스팸을 방지합니다.

"noopener noreferrer"를 사용하는 경우

귀하는 귀하의 웹사이트가 방문자에게 최대한 안전하기를 원합니다. 강력한 백링크 전략을 구축하고 활용하기를 원하기 때문에 항상 rel=”noopener noreferrer” 를 사용하지 않을 것입니다. 예를 들어 사이트 내의 내부 페이지에 연결할 때 사용하지 않아야 합니다.

rel="noopener noreferrer" 를 사용하면 Google에 링크 보안에 관심이 있음을 알립니다. 그리고 특정 사이트가 귀하의 사이트를 추천으로 인식하는 것을 원하지 않습니다.

SEO에 대한 "noopener noreferrer"의 전반적인 영향

외부 링크에서 rel=”noopener noreferrer” 속성을 사용할 때 이는 SEO 백링크 전략에 직접적인 부정적인 영향을 미치지 않아야 합니다. 어느 속성도 기술 SEO 순위에 영향을 미치지 않습니다. 사실, target="_blank" 와 함께 noopener 를 사용하면 사용자가 다른 사이트로 이동하더라도 사이트에 남아 있기 때문에 더 나은 페이지 SEO를 제공합니다.

그러나 noreferrer 는 귀하가 다른 사람의 사이트에 링크할 때 Google이 인식하지 못하게 합니다. 그리고 다른 웹사이트 소유자는 귀하가 링크할 때 볼 수 없습니다.

이는 상호 링크의 가능성을 차단하고 있음을 의미합니다. 결국 사이트 소유자가 분석을 검토할 때 추천 트래픽을 볼 수 있는 옵션을 사이트 소유자에게 제공하지 않으면 그것이 귀하로부터 온 것인지 알 수 없습니다.

다른 곳에서 귀하의 웹사이트로의 백링크는 보장되지 않습니다. 그래도 좋아하는 사이트와 콘텐츠에 연결하기 위해 최대한 많은 일을 하는 것은 나쁘지 않습니다. 그러나 일반적으로 외부 링크에 rel=”noopener noreferrer” 를 사용하면 아무런 해를 끼치지 않습니다. 내부 링크를 사용할 때 자신의 웹사이트 페이지에서 사용하지 않도록 하십시오. 그렇게 하면 자체 사이트 분석과 Googlebot이 사이트 구조를 크롤링하고 색인을 생성하는 데 문제가 발생할 수 있습니다.

결론

이제 웹사이트에서 rel=”noopener noreferrer” 를 사용하는 방법을 알았으므로 이에 따라 계획을 세울 때입니다. 필요한 경우 사이트에 포함된 외부 링크의 스프레드시트를 만드는 것이 좋습니다. 또한 그들이 있는 페이지와 적용한 속성을 추적하십시오. 이렇게 하면 나중에 변경해야 하는 경우 빠른 참조에 도움이 될 수 있습니다.

하이퍼링크에 rel=”noopener noreferrer”를 사용합니까? 그 이유는 무엇? 의견을 남기고 어떻게 생각하는지 알려주십시오.

Sammby/Shutterstock.com을 통한 추천 이미지

rel=”noopener noreferrer” 태그는 무엇을 의미합니까? (& SEO에 영향을 미칩니까?)

rel="noopener noreferrer"란 무엇입니까?

누누이

추천인

rel="nofollow"와 함께 사용

"noopener noreferrer"를 사용하는 경우

SEO에 대한 "noopener noreferrer"의 전반적인 영향

결론