[지식루프의 웹개발공부] HTML <link> 태그의 rel 속성

HTML <link> 태그의 rel 속성

---

1. rel 속성이란?

• **rel**은 <link> 태그에서 현재 문서와 외부 리소스(링크)의 관계를 정의하는 속성입니다.
• **Relationship(관계)**의 약자입니다.
• CSS, 아이콘, RSS 피드 등 다양한 외부 파일을 문서에 연결할 때 사용됩니다.

---

2. 기본 문법

 

<link rel="stylesheet" href="style.css">

• rel="stylesheet": 외부 CSS 파일을 문서에 연결합니다.
• href="style.css": 연결할 파일의 경로입니다.

---

3. rel 속성 값과 의미

Rel	값 설명	예시
stylesheet	CSS 스타일시트 연결	<link rel="stylesheet" href="style.css">
icon	브라우저 탭 아이콘 (파비콘) 연결	<link rel="icon" href="favicon.ico">
apple-touch-icon	iOS 홈 화면에 추가되는 아이콘 설정	<link rel="apple-touch-icon" href="icon.png">
manifest	웹 앱 매니페스트 파일 연결	<link rel="manifest" href="manifest.json">
preload	특정 리소스를 미리 불러와 페이지 로딩 속도 개선	<link rel="preload" href="font.woff2" as="font">
dns-prefetch	특정 도메인을 미리 DNS 조회해 네트워크 지연 시간 단축	<link rel="dns-prefetch" href="//example.com">
canonical	중복 URL에서 표준 URL을 명시
alternate	페이지의 대체 버전(언어, 형식) 제공	<link rel="alternate" hreflang="en" href="page-en.html">
prev / next	페이지 간의 앞/뒤 관계 설정	<link rel="next" href="page2.html">
nofollow	검색 엔진이 해당 링크를 따라가지 않도록 설정
noopener	보안 목적 – 새 창에서 링크를 열 때 부모 페이지와의 관계 차단	<a href="page.html" rel="noopener" target="_blank">
noreferrer	링크 클릭 시 참조 정보(referrer) 전달 차단	<a href="page.html" rel="noreferrer">
sitemap	사이트맵을 명시하여 검색 엔진에 사이트 구조 제공	<link rel="sitemap" href="sitemap.xml">
license	저작권 정보 링크	<link rel="license" href="license.txt">

---

4. 주요 rel 값 예시

1. CSS 스타일 연결
    
   <link rel="stylesheet" href="style.css">
   
   
2. 파비콘(favicon) 설정
    
   <link rel="icon" href="favicon.ico" type="image/x-icon">
   
   
3. 웹사이트의 표준 URL 설정 (canonical)
    
   <link rel="canonical" href="https://example.com/article">
   
   
4. 웹앱 매니페스트 설정
    
   <link rel="manifest" href="site.webmanifest">
   
   
5. DNS 사전 조회
    
   <link rel="dns-prefetch" href="//cdn.example.com">

---

5. rel 속성의 중요성

• SEO 최적화: canonical, alternate를 통해 페이지 중복 방지 및 다국어 페이지 설정이 가능합니다.
• 성능 개선: preload, dns-prefetch를 사용해 페이지 로딩 속도를 향상시킬 수 있습니다.
• 사용자 경험(UX): icon 및 apple-touch-icon을 통해 브라우저와 모바일에서 적절한 아이콘이 표시됩니다.
• 보안 강화: noopener, noreferrer로 링크 보안을 강화하고 클릭으로 인한 참조 정보를 차단할 수 있습니다.

---

6. 정리

• <link>의 rel 속성은 HTML 문서와 외부 리소스의 관계를 정의합니다.
• 페이지 로딩 속도, SEO, UX 향상에 필수적인 요소입니다.
• 목적에 따라 적절한 rel 값을 사용하여 웹사이트의 성능과 사용성을 높일 수 있습니다.