rel은 HTML의 <a>나 <link>에 붙이는 부가 정보로, 그 링크가 현재 문서에서 어떤 의미를 가지는지 설명해주는 역할을 합니다. 아마 가장 많이 쓰는 건 CSS를 표시하는 stylesheet나 RSS/Atom에 주로 쓰는 alternate 정도일 거고, 그 외에도 다양한 표식이 존재하지만 잘 활용하는 곳은 그리 많지 않습니다. 웹 브라우저/파서 쪽에서도 지원이 좋지 못하고요. 개인적으로 rel 정보를 통해 문서 시맨틱을 전달하는 마이크로포맷을 참 좋아하는데, 상황이 이래서야 혼자 열심히 써도 의미가 없는 상황이죠.

그 중에서도 rel=prev, rel=next는 여러 문서들 간의 연결 순서를 나타내는 표현 방법으로, 이에 대해 몇 가지 정보를 소개해 보겠습니다.

의미

rel=prev/next는 현재 보는 글의 이전/다음 링크를 표시합니다. 책이나 매뉴얼 같은 곳에서(가령 read the docs 문서에서) 이전/다음 링크를 표시하면 되겠고요.

WHATWG 표준 문서 역시 간단명료합니다.

The next keyword indicates that the document is part of a sequence, and that the link is leading to the document that is the next logical document in the sequence.

문제는 블로그인데, 블로그가 글을 시간 역순으로 나열하다 보니까 의미가 많이 헷갈립니다. “다음 글”이나 “다음 페이지”가 과거 글인지 미래 글인지 불명확한 것 처럼요. 가령 블로그에 어떤 시리즈물을 연재했을 때, 그 시리즈의 part 3을 읽고 있다면 next는 어디로 가야 할까요. part 4가 자연스러울 겁니다. 그런데 글 단위가 아니라 “이전/다음 페이지”로 본다면 3페이지에서 next는 4페이지가 될 겁니다. 두 경우가 시간 순서가 반대인 거죠. 이건 스펙에도 나와있지 않은 부분이니 사람들이 실제 어떻게 쓰는지를 봐야 할 겁니다.

제 경험상으로는 rel=next를 지원하는 블로그에서는 전부 글 단위에서 나중에 쓴 글이 next에 나오도록 하고 있습니다. 반면 페이지 상에서 rel을 붙이는 건 거의 못 본 것 같습니다.

사라진 값들

현재 HTML 5 스펙에 있는 내비게이션 표식은 prev, next, help, search 정도입니다. HTML 4에서는 prev와 next 말고도 문서 사이 계층 표식이 더 있었습니다. 그 중에서도 up, index 같은 게 HTML 5에도 원래는 들어 있었는데.. 아무도 관심이 없어 사라졌습니다. 물론 스펙에 없다고 해서 사용하면 안 되는 건 아닙니다. 사람들이 많이 쓰면 되는거죠.

문제는 사용 예가 별로 없기 때문에 prev/next만큼 명확한 컨센서스가 없다는 점입니다. 가령, 매뉴얼/스펙 문서에서 시작 위치는 어떻게 표시해야 할까요. index를 쓸 수도 있고, 목차가 있으면 contents를 쓸 수도 있고, 최상위 문서니까 top을 쓸 수도 있습니다. 그냥 순서상 맨 처음이니까 start를 쓸 수도 있겠고요.

read the docs를 보니 top을 쓰고 있군요. WHATWG 스펙 문서에서는 index 값을 쓰는군요. 이녀석들 없애놓고 계속 쓰다니.

지원

예전에는 웹 사이트의 rel=prev/next 지원이 좋지 못했습니다. WHATWG에서도 살려보려고 했지만 포기한 정도니까요. 요새는 그래도 상황이 좋아진 편인데, 구글 등의 검색엔진에서 이 정보를 이용하기 때문에 검색엔진 최적화 쪽에서 지원하기 때문입니다. (구글링해보니 그 이전에는 웹페이지 최적화를 위해 이미 있는 prev/next를 지워서 가볍게 만드는 기법 같은 게 여럿 소개되어 있습니다.)

이외에 rel을 이용하는 독특한 사례로 GitHub API에서 HTTP Link 헤더로 prev/next를 표시하는 방법이 있고요. (link 관계값을 rel= 뿐만 아니라 HTTP 헤더로도 표현가능합니다. requests에서도 이를 파싱해 주고요.)

그에 비해 클라이언트 지원은 그리 많지 않습니다.

• 몇몇 웹 브라우저에서는 next 링크를 사용자가 이어서 볼 확률이 높기 때문에 미리 페이지를 불러오는 기능이 있고(만약 전후 관계 없이 그냥 미리 긁어오기만을 바라는 경우 rel=prefetch를 쓰면 됩니다),
• 오페라 브라우저는 내비게이션 툴바가 있다고 합니다.

메이저한 지원은 이게 전부입니다. 아, 오페라는 메이저가 아니니 사실상 미리긁기 말고는 의미가 없군요. 굳이 정보를 활용하고 싶다면 rel에 흥미를 가지는 브라우저 확장 기능을 찾아서 쓰는 수밖에요. 가령 vimperator에서 [[, ]] 단축키를 지원한다고 하고요. 그 외에도 Link Widgets 같은 솔루션이 있습니다.

사용자가 이런 정보를 편하게 쓰려면 그 페이지에 어떤 링크가 지원되는지 눈으로 볼 수 있어야 할 겁니다. 기존에 나온 플러그인들은 대부분 툴바를 추가해야 하거나 아무런 정보가 눈에 안 보여서, 개인적으로 쓸 firefox 확장 기능을 만들어 보고 있습니다. 아직 삐걱거리는 부분이 많긴 하지만 매뉴얼 문서에서 키보드로 이동하는 건 확실히 편하군요.

그 외

rel은 내비게이션 말고도 다양한 정보를 제공합니다.

• alternate는 RSS/Atom 이외에도 현재 페이지를 대체할 수 있는 다른 링크를 소개하는 데에 씁니다. 가령 hreflang=en으로 다른 언어 버전을 링크할 수 있고, media=로 모바일 페이지를 표기할 수 있습니다. 구글 등의 검색엔진에서 이 정보를 활용합니다.
• canonical은 같은 페이지가 여러 개 존재할 때 어떤 것이 기준이 되는지 표시합니다. 모바일 페이지에 데스크톱 페이지 링크를 달아 두면 좋겠죠. 이것 역시 구글이 지원합니다.
• 짧은 링크를 표시하는 shortlink가 제안되어 있고, WordPress 등에서 사용하고 있습니다.
• license는 문서 라이선스를 표시하는 데에 씁니다. creative commons에서도 지원하며, 검색 엔진의 라이선스 필터에도 사용합니다.

이외에도 tag, nofollow, author, search 등 여러 값이 존재합니다. 마이크로포맷 위키, HTML 5 문서도 참고하세요. 중요한 건 지원하는 측과 사용하는 측이 모두 충분해야 의미가 있다는 것입니다.