Link rel 속성 생성기

Link rel 속성 생성기 사용 가이드

블로그 협찬 글의 제휴 링크, 댓글 속 링크, 새 창으로 여는 외부 링크는 각각 다른 rel 값을 붙이는 것이 권장됩니다. 검색엔진은 sponsored로 유료 링크를, ugc로 사용자가 쓴 링크를 구분하고, 새 창 링크에는 보안을 위해 noopener가 필요합니다.

이 생성기는 링크 글자와 주소, 옵션(sponsored=yes, ugc=yes, nofollow=yes, new-tab=yes, external=yes)을 받아 완성된 a 태그를 만듭니다. 한국어로 광고=예, 사용자=예, 새창=예처럼 적어도 됩니다.

새 창 링크에는 target="_blank"와 함께 화면에는 숨겨지고 화면 낭독기만 읽는 '(새 창)' 안내를 붙입니다. 링크 글자가 '여기', '더보기'처럼 목적지를 알 수 없으면 주석으로 알려 줍니다.

사용 방법

1. 1'링크 글자'에 화면에 보일 글을 적습니다. 목적지를 알 수 있게 쓰는 것이 좋습니다.
2. 2'링크 주소'에 전체 주소를 넣습니다.
3. 3'옵션 (sponsored=yes 유료·제휴 · ugc=yes 사용자 글 · nofollow=yes · new-tab=yes 새 창)' 칸에 필요한 옵션을 한 줄씩 적습니다.
4. 4'실행'을 누르고 a 태그를 글 본문에 붙여 넣습니다.

링크 글자: 제휴 상품 보러 가기
주소: https://partner.example.com/item/123
sponsored=yes
new-tab=yes

<a href="https://partner.example.com/item/123" rel="sponsored noopener noreferrer" target="_blank">제휴 상품 보러 가기<span class="visually-hidden"> (새 창)</span></a>

이럴 때 쓰면 좋아요

• 블로그 협찬·제휴 글의 링크를 표시할 때
• 커뮤니티 댓글 링크에 ugc를 붙이는 규칙을 정할 때
• 외부 사이트를 새 창으로 열 때 안전한 속성을 챙길 때
• 공정위 표시 의무가 있는 광고 링크를 정리할 때

문제가 생겼을 때

활용 팁

• 광고 표시는 rel 속성과 별개로 본문에도 '협찬', '광고'처럼 사람이 볼 수 있게 적어야 합니다.
• 내 사이트 안 링크에는 nofollow를 붙이지 않는 것이 좋습니다.
• 새 창 링크는 꼭 필요할 때만 쓰세요. 사용자가 뒤로 가기로 돌아올 수 없어 불편할 수 있습니다.

자주 묻는 질문