<link> 태그는 페이지와 외부 리소스의 관계를 선언하는 가족이다. canonical은 워낙 중요해서 별도 카드로 다루지만, link rel은 그 외에도 다국어 SEO, 성능 최적화, PWA, 아이콘 등 여러 역할을 담는다. 각 rel 값이 작은 다른 기능을 한다.
hreflang — 다국어 SEO의 핵심. 같은 콘텐츠의 한국어·영어·일본어 버전이 있을 때 — 각 페이지에서 다른 언어 버전을 명시적으로 연결한다. <link rel="alternate" hreflang="en" href="https://example.com/en/page">. 양방향이어야 한다 — 한국어 페이지에서 영어를 가리키고, 영어 페이지에서도 한국어를 가리켜야 구글이 인정한다. 잘못 박힌 hreflang은 언어별 검색 결과에서 잘못된 페이지가 노출되는 결과를 만든다.
preload — Core Web Vitals 최적화. LCP(Largest Contentful Paint)에 사용되는 핵심 이미지·폰트를 미리 로드. <link rel="preload" href="/hero.jpg" as="image">. LCP 점수 개선에 직접 효과. 다만 남용하면 첫 로드가 무거워져 역효과 — 진짜 중요한 1-3개 리소스에만 적용.
icon — 멀티 디바이스 식별. favicon, apple-touch-icon, mask-icon 등을 같이 박는다. 브라우저 탭·iOS 홈 화면·Android 바로가기 모두에서 사이트가 인식된다. 한 종류만 박으면 — iOS에서 흐릿한 favicon이 보이거나 안드로이드에서 깨진다.
manifest — PWA의 진입점. <link rel="manifest" href="/manifest.json">로 PWA 매니페스트 연결. 매니페스트에서 a11y와 관련된 display, orientation, theme_color 등을 정의 가능.
SEO 관점에서 hreflang과 preload가 직접적 영향. hreflang은 다국어 사이트의 언어별 인덱싱을 정상화. preload는 Core Web Vitals(LCP) 점수를 직접 개선해 페이지 평가에 기여.
GEO 관점에서 hreflang이 가장 중요. AI는 사용자의 언어 설정에 맞는 페이지를 인용해야 한다. "한국어로 답해줘"에 영어 페이지를 인용하면 사용자 경험이 깨진다. hreflang이 정확하면 AI도 올바른 언어 버전을 선택.
A11y 관점에서 icon은 시각 사용자에게 어느 사이트의 탭인지를 알려주는 식별자. 시각 약자에게는 favicon이 큰 시각 단서가 된다. manifest의 display와 theme_color는 PWA 모드에서 시스템 다크모드와 통합되어 시각 피로 감소에 기여.
자주 보는 안티패턴: favicon 한 종류만, hreflang 양방향 깨짐, preload 남용, manifest 누락. PWA를 만들지 않더라도 icon과 manifest는 디바이스별 식별을 위해 챙기는 게 표준이 됐다.