<a> 태그의 rel 속성

HTML의 <a> 태그를 사용할 때 우리는 주로 href와 target 속성만 사용하는 경우가 많다. 하지만 rel 속성은 보안, SEO, 접근성, 링크 의미 전달까지 담당하는 중요한 요소이다. 특히 target="_blank"와 함께 사용할 경우에는 반드시 알아야 할 필수 속성이다.

---

🔍 rel이란 무엇인가?

rel은 relationship의 줄임말로,
현재 문서와 링크된 문서 간의 관계를 명시하는 속성이다.

<a href="https://example.com" rel="noopener">Example</a>

---

🛡️target="_blank"와 함께 반드시 기억해야 할 이유 (보안 이슈)

많은 개발자들이 새 창을 띄우기 위해 아래처럼 코드를 작성한다.

<a href="https://example.com" target="_blank">사이트 방문</a>

하지만 이렇게 하면 보안 문제가 발생할 수 있다.
새 창에서 열린 페이지가 window.opener를 통해 원본 페이지를 조작(탭 납치 공격)할 가능성이 있기 떄문이다.

✅ 따라서 아래처럼 rel="noopener noreferrer"를 함께 사용하는 것이 권장된다.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">사이트 방문</a>

값	효과
noopener	새 창이 원본 페이지에 접근하지 못하도록 차단
noreferrer	참조 URL(Referrer) 정보를 숨김

---

📈 SEO에서 중요한 rel 속성값들

Google은 링크가 어떻게 생성되었는지를 이해하기 위해 rel 속성값을 참고한다. 특히 아래 세 속성은 SEO에 중요한 역할을 한다.

값	의미	언제 사용하면 좋을까?
nofollow	검색 엔진에 “이 링크를 신뢰하지 말라”고 전달	광고나 의심스러운 링크
ugc	User Generated Content (사용자 생성 콘텐츠)	댓글/포럼/블로그 댓글
sponsored	광고/협찬 링크임을 명시	배너 광고, 제휴 링크

<a href="https://ads.com" rel="sponsored">광고 보기</a>
<a href="https://unknown.com" rel="nofollow">추천하지 않는 사이트</a>
<a href="https://user-link.com" rel="ugc">사용자 댓글 링크</a>

---

📁 그 외 자주 쓰이는 rel 값들

값	설명
external	외부 사이트 링크임을 의미적으로 표시
prev	이전 문서로 연결됨을 표시 (페이지네이션)
next	다음 문서로 연결됨을 표시
alternate	문서의 대체 버전을 제공할 때 (다국어 페이지 등)

---

✅ 실무에서 가장 많이 쓰는 패턴 정리

상황	추천 코드
새 창에서 보안 강화	rel="noopener noreferrer"
광고 링크	rel="sponsored"
댓글/포럼 링크	rel="ugc"
의심스러운 링크	rel="nofollow"

---

🎯 마무리

• 단순 링크 같지만, rel은 보안 사고를 막고 SEO 신뢰도를 높이며, 브라우저와 검색 엔진에 정확한 의도를 전달하는 중요한 속성이다.
• 특히 target="_blank"를 사용하는 경우에는 rel="noopener noreferrer"를 함께 사용하는 것을 습관화하자.