HTML, SEO와 보안을 위한 a 태그의 rel 속성 (feat. nofollow, noopener, noreferrer)

HTML 코드 중에서 링크를 걸 때 사용되는 <a> 태그의 rel 속성에 대해서 알아보겠다.

웹사이트를 운영하는 사람은 물론, 블로그를 운영하는 사람도 필수적으로 알아야 할 내용이다.

일단 결론부터 말하자면, 내 블로그에서 외부 사이트의 링크를 걸 경우에는 기본적으로 a 태그에 rel="nofollow noopener noreferrer" 속성을 넣어야 한다.

하지만 경우에 따라서는 nofollow를 넣지 않는 것이 더 적절할 때도 있다.

지금부터 정리하는 내용을 보고 앞으로 상황에 따라 적절한 rel 속성을 넣도록 하자.

rel="nofollow"

nofollow는 SEO와 연관이 있다.

nofollow는 검색 엔진의 로봇에게 "이 링크를 따라가지 마세요"라고 말하는 것과 같다.

내 블로그가 가진 가치를 외부 사이트로 전달하지 않도록 차단하는 역할은 한다.

언제 사용해야 할까?

• 신뢰할 수 없는 사이트: 댓글에 달린 스팸 링크나 검증되지 않은 사이트
• 유료 광고 및 제휴 링크: 돈을 받고 올리는 홍보성 링크에는 필수다.
• 단순 소셜 채널 링크: 페이스북, 인스타그램처럼 내 글의 '출처'라기보다 단순 '채널 안내'일 때 사용한다.

언제 뺄까?

내가 정말 추천하고 싶은 유익한 사이트, 공신력 있는 뉴스 기사, 교육적인 유튜브 영상의 링크를 걸 때는 이 속성을 빼는 것이 좋다.

그래야 검색 엔진이 "이 블로그는 권위 있는 정보를 인용하는 좋은 글이구나!"라고 판단하여 내 블로그의 점수를 높여준다.

rel="noopener"

이 속성은 a 태그에 target="_blank" 속성을 넣어서 링크를 새 탭으로 열 때 반드시 필요한 보안 장치다.

새 탭에서 열린 페이지가 자바스크립트를 이용해 원래 페이지(내 블로그)를 조작하는 것을 막아준다.

만약 이 속성이 없다면, 악의적인 사이트가 내 블로그가 열려 있던 탭의 주소를 피싱 사이트로 바꿔버리는 탭 내빙^{Tab Nabbing} 공격을 할 수 있다.

링크하는 사이트가 구글처럼 신뢰할 수 있는 곳이라 하더라도, 혹시 모를 해킹 사고를 대비해 새 창 링크에는 무조건 넣는 것이 원칙이다.

rel="noreferrer"

noreferrer는 사용자가 어디서 왔는지에 대한 정보를 숨겨주는 역할을 한다.

링크를 타고 넘어간 사이트가 "어떤 URL을 거쳐서 우리 사이트에 왔는지" 알 수 없게 차단하는 역할은 한다.

하지만 상대방 사이트에 내가 보낸 트래픽임을 알려주고 싶다면(좋은 링크 관계를 맺고 싶다면) noreferrer는 빼고 noopener만 사용하는 것이 SEO와 웹 생태계 측면에서 더 좋은 방법이 될 수 있다.

Photo by Markus Spiske on Unsplash

정리를 하자면, 내부 링크(내 블로그에 내 블로그의 다른 글을 링크하는 것)에는 rel 속성을 넣지 않는다.

rel 속성을 넣으면 오히려 데이터가 꼬일 수 있기 때문에 넣지 않도록 주의하자.

새 창(_blank)으로 외부 링크를 걸 때는 보안을 위해 noopener noreferrer를 기본으로 가져가자.

내가 쓴 글의 내용이 외부 링크와 밀접한 관계가 있을 경우에는 nofollow를 과감히 제거하자.

권위 있는 사이트를 소개하는 것은 오히려 내 블로그의 점수를 높여준다.

반면, 광고나 단순 소셜 링크에는 nofollow를 넣어 내 블로그의 가치를 지키자.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.