• 목록
• 답변

 

<a> 태그의 rel 속성은 현재 문서와 링크된 문서 사이의 연관 관계(relationship)를 명시하기 때문에 검색엔진에게 어떤 종류의 링크인지를 알려주는것은 중요 할 수 있습니다.

* 이 속성은 반드시 href 속성이 설정되어 있어야만 사용할 수 있습니다.

기본문법: <a rel=“속성값”>

 기본 문법은 a 태그 안에 링크를 나타내는 href 속성이 있어야 사용할 수 있습니다.

 

속성값 설명

각 속성값마다 의미하는 것이 다르기 때문에 다음을 참고 하면 됩니다.

우리가 가장 많이 접혀 익숙한 속성값은 아마도 rel='noreferrer noopener' 일 것입니다.

보안 링크라는 꼬리표가 붙을 정도로 많은 분들이 외부링크 걸때 꼭 필요하다고 하니 일반적인 외부링크를 표시할때는 반드시 rel='noreferrer noopener'  속성을 표기하는 것이 좋습니다.

 

그 다음으로 내가 개인적으로 필요한 속성은 스폰서/광고/출처를 나타낼때 사용하는 속성값 입니다.

- rel="sponsored" : 해당 링크가 광고,스폰서 나 별도의 보상을 받는 경우

- rel="ugc" : User Generated Content. 코멘트나 포럼의 글처럼 사용자가 작성한 콘텐츠 내에 있는 링크일 경우 명시

- rel="license" : 해당 문서의 저작권 정보에 대한 링크를 나타냄

 

rel="noreferrer noopener" 처럼 복합사용도 가능 합니다.

속성값		설명
alternate		프린트 페이지나 번역된 페이지와 같이 해당 문서의 대체 버전에 대한 링크를 나타냄.
author		해당 문서의 저자에 대한 링크를 나타냄.
bookmark		즐겨찾기(bookmarking)에 사용하는 고유 주소(Permanent URL)를 나타냄.
external		링크된 문서가 현재 문서와 같은 사이트 내에 있지 않음을 나타냄.
help		도움말 문서에 대한 링크를 나타냄.
license		해당 문서의 저작권 정보에 대한 링크를 나타냄.
next		연관된 문서들의 모음 중 다음 문서에 대한 링크를 나타냄.
nofollow		유료 링크와 같이 검색 엔진이나 봇(bot) 등이 추적해서는 안 됨을 나타냄.
noreferrer		사용자가 하이퍼링크를 클릭할 때 브라우저가 HTTP 리퍼러 헤더(referer header)를 전송해서는 안 됨을 나타냄.
noopener		하이퍼링크를 따라 연결되는 어떠한 브라우징 컨텍스트(browsing context)도 오프너(opener)여서는 안 됨을 나타냄.
prev		문서들 중에서 이전 문서를 나타냄.
search		해당 문서를 위한 검색 도구를 나타냄.
tag		현재 문서를 위한 키워드(tag)를 나타냄.

 

 

참고 사이트

- <a> 태그의 rel 속성