HTML rel 속성
HTML의 rel 속성은 링크된 리소스와 현재 문서 사이의 관계를 지정하는 데 사용되는 속성입니다.
rel은 "relationship"의 줄임말이며, 링크된 리소스와 현재 문서 간의 관계를 설명하는 목적으로 사용됩니다. rel 속성은 a, area, link 태그에서 사용됩니다. rel 속성은 사용자에게 직접적인 혜택을 주지는 않지만, 브라우저나 검색 엔진에게 링크 관계에 대한 정보를 제공하여 사용자의 요청에 더 정확하게 대응할 수 있도록 합니다.
rel 속성의 개요
"팀 버너스리"에 의해 1989년 고안된 월드 와이드 웹(World Wide Web, WWW, W3)의 하이퍼텍스트 시스템을 우리는 간단히 "웹"이라 부릅니다. 현재 우리의 일상에서 대중화된 것 이상으로 절대적 위치를 차지하고 있습니다.
하이퍼텍스트 시스템은 웹 문서에서 다른 웹 문서로 즉시 접근할 수 있는 텍스트로 ,정보습득의 새로운 장을 인류에게 가져다 주었습니다. rel 속성은 하이퍼텍스트 스스템, 즉 웹 문서와 웹 문서간의 링크 관계를 명확히 하고, 더 잘 이해할 수 있도록하기 위해 고안된 것입니다.
rel 속성의 도입배경
rel 속성은 1999년에 처음으로 도입되었습니다. 당시에는 브라우저가 링크된 리소스를 적절하게 처리할 수 있도록 하기 위해 도입되었습니다. 이후 2000년대에 들어서면서 검색 엔진이 링크된 리소스를 더 잘 이해하고, 검색 결과에 반영하기 위해 rel 속성이 사용되기 시작했습니다.
rel 속성은 웹 개발자와 검색 엔진 운영자 모두에게 중요한 속성
rel 속성은 웹 개발자와 검색 엔진 운영자 모두에게 중요한 속성입니다. 웹 개발자는 rel 속성을 사용하여 링크된 리소스와 현재 문서 사이의 관계를 명확하게 표현하여, 브라우저와 검색 엔진이 링크를 더 효율적으로 처리하고 이해할 수 있도록 할 수 있습니다. 검색 엔진 운영자는 rel 속성을 사용하여 링크된 리소스를 더 잘 이해하고, 검색 결과에 반영할 수 있습니다. rel 속성은 웹 사이트의 SEO(검색 엔진 최적화)를 개선하는 데에도 도움이 됩니다. 웹 사이트에 rel 속성을 적절하게 사용하면, 검색 엔진이 웹 사이트의 콘텐츠를 더 잘 이해하고, 검색 결과에 더 높은 순위로 노출시킬 수 있습니다.
rel 속성의 목적
요약하자면, rel 속성의 도입배경은 링크 관계의 복잡성을 다루기 위해 도입된 것으로 볼 수 있으며, 링크 관계의 명확한 표현과 웹 도구에게 관계 정보를 전달하기 위한 목적을 가지고 있습니다.
이를 통해 웹 문서의 의미 전달과 검색 엔진 최적화를 향상시킬 수 있습니다. rel 속성을 도입함으로써 개발자는 링크된 리소스와의 관계를 명확하게 표현할 수 있습니다. 이를 통해 브라우저와 검색 엔진 등의 웹 도구는 링크를 적절하게 처리하고 문서의 의미를 더 잘 이해할 수 있습니다. 따라서, rel 속성은 링크 관계의 복잡성을 다루기 위해 도입된 것으로 볼 수 있으며, 웹 페이지의 구조와 의미를 명확하게 전달하는 데 도움을 주는 중요한 도구입니다.
rel 속성의 역할과 중요성
HTML의 rel 속성은 링크된 리소스와 현재 문서 사이의 관계를 지정하는 역할을 합니다. rel은 "relationship"의 줄임말로, 링크된 리소스와 현재 문서 간의 관계를 명시적으로 나타냅니다.
rel 속성은 링크된 리소스와의 관계를 설명하고 문서의 구조와 의미를 명확하게 전달하는 데 중요한 역할을 합니다. 이를 통해 브라우저와 검색 엔진 등의 웹 도구는 링크를 적절하게 처리하고 문서를 더 잘 이해할 수 있습니다. rel 속성은 다양한 값을 가질 수 있으며, 주로 <a> 태그에서 사용되지만 <area> 태그와 <link> 태그 등 다른 태그에서도 적용할 수 있습니다.
rel 속성의 중요성은 다음과 같습니다.
- 검색 엔진 최적화 (SEO):
rel속성을 사용하여 링크 관계를 명시하면 검색 엔진은 문서를 더 잘 분석하고 관련 리소스를 인식하여 검색 결과에 더 적합한 링크를 제공할 수 있습니다. - 사용자 경험 향상:
rel속성을 활용하여 링크된 리소스와의 관계를 명시하면 브라우저는 해당 링크를 적절하게 처리하여 사용자에게 더 나은 경험을 제공할 수 있습니다. - 웹 접근성 개선:
rel속성을 사용하여 대체 버전의 문서와의 관계를 지정하면 접근성을 향상시킬 수 있고, 사용자는 보조 기술을 활용하여 적절한 버전의 문서에 접근할 수 있습니다. - 관리 용이성:
rel속성을 활용하여 문서 간의 관련성을 명시하면 웹 사이트의 구조와 관리가 용이해지고 유지보수가 편리해집니다.
rel 속성의 사용법
<a>, <area>, 그리고 <link> 태그에서 사용되는 rel 속성은 각각 다른 용도와 관계를 나타내는 방식이 있습니다. 이들의 중요한 차이점은 다음과 같습니다.
| 태그 | 태그의 사용 목적 | 관계 지정 방식 |
|---|---|---|
<a> |
하이퍼링크 생성 | 링크된 리소스와의 관계를 명시적으로 표현 |
<area> |
이미지 맵 영역 정의 | 영역과 링크된 리소스 간의 관계를 명시적으로 표현 |
<link> |
문서와 외부 리소스 간의 관계 정의 | 문서와 링크된 리소스 간의 관계를 명시적으로 표현 |
이 표를 통해 각 태그에서 rel 속성의 사용 목적과 관계 지정 방식이 다르다는 것을 확인할 수 있습니다. 이들은 각각의 태그에서 rel 속성을 사용하여 다른 유형의 관계를 표현하고 브라우저와 검색 엔진에게 의미를 전달합니다.
다음은 태그별로 주로 사용되는 rel 속성의 값들에 대해 알아보겠습니다.
주의하세요! rel 속성은 유연하게 사용될 수 있으며 실제로 사용 가능한 값은 이에 국한되지 않습니다.rel 속성 값은 표준화되어 있지 않기 때문에 각각의 웹 사이트나 애플리케이션에서 독자적으로 정의할 수 있습니다. 따라서, 실제로 사용 가능한 rel 속성 값은 웹 사이트, 애플리케이션, 혹은 개별적인 사용 목적에 따라 다를 수 있습니다. 웹 개발자는 필요에 따라 새로운 rel 속성 값을 정의하거나 사용자 정의 값들을 사용할 수 있습니다. 앞으로 나열된 값들은 일반적으로 사용되는 rel 속성 값들의 예시일 뿐이며, 모든 가능한 값을 나열한 것은 아닙니다. rel 속성은 표준화되지 않았기 때문에 사용자 정의 값들이 추가되거나 다양한 목적에 맞는 값들이 사용될 수 있습니다.
rel 속성 서식
rel 속성의 값은 띄어쓰기를 구분으로 하여 여러 값을 사용할 수 있습니다.
<a> 태그에서 주로 사용되는 rel 속성 종류 및 값
rel="author" |
링크된 문서는 현재 문서의 저자입니다. |
|---|---|
rel="bookmark" |
링크된 문서가 북마크임을 나타냅니다. |
rel="external" |
링크된 문서가 외부 리소스임을 나타냅니다. 검색 엔진에서도 링크가 외부 리소스에 있음을 나타내는 데 사용할 수 있습니다. 이는 검색 엔진이 외부 리소스의 링크를 내부 리소스의 링크만큼 가치 있는 것으로 간주하지 않기 때문에 페이지의 검색 결과 순위를 높이는 데 도움이 될 수 있습니다. |
rel="home" |
사이트의 홈페이지로 연결하는 링크를 나타냄. 이 링크는 사용자가 웹 사이트의 홈페이지로 돌아갈 수 있는 방법을 제공함. 검색 엔진은 이를 통해 사용자의 탐색을 지원할 수 있음. |
rel="help" |
링크된 문서가 현재 문서에 대한 도움말을 제공하는 문서임을 나타냅니다. 이는 브라우저나 검색 엔진이 링크된 문서를 이해하는 데 도움이 됩니다. |
rel="me" |
링크된 리소스와 현재 문서의 작성자 또는 소유자 간의 관계를 나타냄. 주로 소셜 미디어 프로필, 개인 웹사이트 또는 블로그 등에서 사용되며, 링크된 리소스가 현재 문서와 연결된 개인의 공식 프로필이거나 소유한 웹 자산임을 나타낼 수 있음 |
rel="nofollow" |
검색 엔진이 해당 링크를 따라가지 않도록 지정. Google에서 내 사이트와 링크된 페이지를 연결하지 않기를 바라거나 링크된 페이지를 크롤링하지 않기를 바라는 경우 nofollow 값을 사용함. |
rel="noopener" |
링크된 문서가 열리는 새 창이나 탭이 열리는 창에 자바스크립트로 액세스할 수 없도록 방지하는 데 사용됩니다. 이는 사용자의 보안과 개인 정보를 보호하는 데 도움이 될 수 있습니다. |
rel="noreferrer" |
링크된 문서가 새 창이나 탭에서 열릴 때, 새 창이나 탭이 원래 창의 리퍼러 헤더를 전송하지 않도록 하는 데 사용됩니다. 이는 보안상의 이유로 사용되며, 원래 창의 리퍼러 헤더를 전송하지 않음으로써 악성 웹사이트가 사용자의 활동을 추적하는 것을 방지할 수 있습니다. |
rel="sponsored" |
광고 링크나 유료 게재 링크(일반적으로 유료 링크라고 함)를 sponsored 값으로 표시함. Google에 의해 제안됨 |
rel="tag" |
링크된 문서가 현재 문서와 관련된 태그임을 나타냅니다. 이는 브라우저나 검색 엔진이 링크된 문서를 이해하고 정렬하는 데 도움이 됩니다. |
rel="license" |
링크된 문서가 현재 문서에 대한 라이센스를 제공하는 문서임을 나타냅니다. 이는 브라우저나 검색 엔진이 링크된 문서를 이해하고 정렬하는 데 도움이 됩니다. |
rel="next" |
링크된 문서는 페이지 시리즈의 다음 페이지입니다. |
rel="prev" |
링크된 문서는 페이지 시리즈의 이전 페이지입니다. |
rel="search" |
링크된 문서가 검색 엔진에 대해 특별한 의미를 가진 문서임을 나타냅니다. 이는 브라우저나 검색 엔진이 링크된 문서를 이해하고 정렬하는 데 도움이 됩니다. 이 링크를 이용해서 검색 엔진의 결과 페이지를 제공합니다. |
rel="ugc" |
댓글 및 포럼 게시물과 같은 사용자 제작 콘텐츠(UGC) 링크 관계를 나타냄 |
<link> 태그에서 주로 사용되는 rel 속성 종류 및 값
rel="alternate" |
대체 버전의 문서와의 관계를 나타내는 링크를 의미함. 다국어 버전, 인쇄용 버전, 모바일 버전 등과 같이 동일한 콘텐츠의 다른 버전 사이의 관계를 명시적으로 표현할 때 사용됨. |
|---|---|
rel="canonical" |
문서의 본질적인 버전을 나타내는 링크를 의미합니다. 이 속성은 주로 중복 컨텐츠 문제를 해결하기 위해 사용되며, 검색 엔진에게 주요한 페이지 버전을 알려줍니다. |
rel="stylesheet" |
HTML 문서에 CSS 스타일 시트를 연결하는 데 사용됩니다. CSS 스타일 시트는 HTML 문서에 스타일을 적용하는 데 사용됩니다. |
rel="icon" |
HTML 문서에 아이콘을 연결하는 데 사용됩니다. 파비콘(favicon)으로 알려진 이 아이콘은 브라우저의 탭이나 주소 표시줄에 표시됩니다. 파비콘은 웹 사이트의 브라우저 탭, 북마크 목록, 웹 사이트 아이콘 등에서 표시되는 작은 이미지입니다. |
rel="preconnect" |
문서와 사전 연결(preconnect)되는 리소스와의 관계를 나타내는 링크를 의미합니다. 즉, 리소스의 서버와 연결을 설정하는 데 사용됩니다. 이 속성은 웹 페이지의 로딩 시간을 최적화하기 위해 사용됩니다. 이는 HTML 문서가 로드되는 시간을 단축하는 데 도움이 됩니다. |
rel="prefetch" |
사전 로드(prefetch)되는 리소스와의 관계를 나타내는 링크를 의미합니다. 이 속성은 브라우저에게 특정 리소스를 미리 가져와 캐시에 저장해두라고 지시합니다. 이를 통해 브라우저는 사용자가 해당 리소스에 액세스할 때 로딩 시간을 단축시킬 수 있습니다. 그러나 리소스가 웹 페이지에 사용되지 않으면 리소스가 낭비될 수 있으므로 주의해서 사용해야 합니다. 페이지의 렌더링은 필요하지 않지만 사용자에게 유용할 수 있는 리소스를 미리 로드하는 데 사용합니다. |
rel="preload" |
리소스의 사전 로드(preload)를 나타내는 링크를 의미합니다. 이 속성은 브라우저에게 특정 리소스를 사전에 가져와 캐시에 저장해두라고 지시합니다. 이를 통해 브라우저는 해당 리소스를 미리 다운로드하여 로딩 시간을 단축시킬 수 있습니다. rel="preload"는 페이지의 렌더링에 필요한 리소스를 미리 로드하는 데 사용되는 반면, rel="prefetch"는 페이지의 렌더링은 필요하지 않지만 사용자에게 유용할 수 있는 리소스를 미리 로드하는 데 사용된다는 점에서 차이가 있습니다. |
target="_blank"에서는 rel="noopener noreferrer" 사용
rel="noopener noreferrer" 속성은 새 창이나 탭에서 링크를 열 때, 새 창이나 탭이 열리는 창에 액세스할 수 없도록 하는 데 사용됩니다. 이는 보안상의 이유로 사용되며, 새 창이나 탭이 열리는 창에 액세스할 수 없도록 함으로써 악성 웹사이트가 사용자의 활동을 추적하는 것을 방지할 수 있습니다.
rel="noopener": 이 속성은 보안 상의 이유로 새 탭이나 창에서 링크를 열 때 원래 문서와의 관계를 끊음을 나타냅니다. 이는 링크된 리소스가 원래 문서에 액세스할 수 없도록 함으로써 보안 취약점을 방지합니다. 예를 들어, 원래 문서에 악성 스크립트가 포함되어 있을 경우,rel="noopener"를 사용하여 링크된 리소스가 원래 문서에 영향을 미치지 못하도록 보호할 수 있습니다.rel="noreferrer": 이 속성은 참조하지 않도록 브라우저에 지시합니다. 이는 링크된 리소스가 원래 문서의 URL을 알지 못하도록 방지하는 데 사용됩니다. 일반적으로rel="noreferrer"를 사용하면 브라우저는 링크된 리소스로 HTTP Referrer 헤더를 보내지 않습니다. 이는 원래 문서의 URL을 보호하고 개인 정보를 보호하기 위한 조치입니다.
rel="noopener noreferrer"는 두 가지 보안 및 개인 정보 보호 목적을 함께 충족시키기 위해 사용됩니다. 이를 사용하여 링크된 리소스와의 관계를 설정하면서 동시에 보안 취약점과 개인 정보 유출을 방지할 수 있습니다.
예를 들어, 다음 코드는 noopener 속성을 사용하여 웹사이트에 대한 링크를 생성합니다.
사용자가 이 링크를 클릭하면 웹사이트가 새 창이나 탭에서 열립니다. 그러나 새 창이나 탭은 열리는 창에 액세스할 수 없습니다. 즉, 웹사이트는 열리는 창의 쿠키, 세션 데이터, 또는 기타 정보를 액세스할 수 없습니다.
rel="noopener noreferrer" 속성은 표준 HTML 속성이 아닙니다. 그러나 대부분의 최신 브라우저는 이를 지원합니다. 특히 신뢰할 수 없는 웹사이트에 대한 링크를 생성할 때 rel="noopener noreferrer" 속성을 사용하는 것이 좋습니다.
rel="noopener noreferrer" 속성은 보안을 강화하는 데 도움이 됩니다. 새 창이나 탭이 열리는 창에 액세스할 수 없도록 함으로써 악성 웹사이트가 사용자의 활동을 추적하는 것을 방지할 수 있습니다.
rel 속성에 대한 명세서
| 명세서 사양 | |
|---|---|
rel
|
HTML Standard #linkTypes |
rel="noopener"에 대한 브라우저 호환성
| 속성 |
Chrome
|
Edge
|
Firefox
|
Safari
|
|---|---|---|---|---|
re="noopener"
|
49 | 79 | 52 | 10.1 |
rel="noreferrer"에 대한 브라우저 호환성
| 속성 |
Chrome
|
Edge
|
Firefox
|
Safari
|
|---|---|---|---|---|
re="noreferrer"
|
16 | 13 | 33 | 5 |