페이지네이션 처리 (Pagination (Rel=Next/Prev))
Pagination (Rel=Next/Prev)
무한 스크롤 환경에서 검색엔진 크롤러가 하위 페이지의 콘텐츠를 누락 없이 수집하도록 rel="next"와 rel="prev" 태그를 구현하거나, 크롤러 전용의 전통적 페이지네이션 HTML 링크 구조를 병행 제공해야 합니다.
무한 스크롤 환경에서 검색엔진 크롤러가 하위 페이지의 콘텐츠를 누락 없이 수집하도록 rel=”next”와 rel=”prev” 태그를 구현하거나, 크롤러 전용의 전통적 페이지네이션 HTML 링크 구조를 병행 제공해야 합니다.
📖 개념 정의 및 실무 적용
대규모 이커머스나 미디어 사이트에서 사용자 경험(UX) 향상을 위해 무한 스크롤을 도입하는 경우가 많습니다. 하지만 자바스크립트에만 의존하는 무한 스크롤은 검색엔진 봇이 스크롤 이벤트를 발생시키지 못해 하위 상품이나 게시글을 색인(Index)하지 못하는 치명적인 트래픽 손실을 유발합니다. 이를 해결하기 위해 HTML 헤더에 rel=’next’와 rel=’prev’ 태그를 삽입하거나 크롤러가 접근 가능한 정적 페이지 링크를 제공하여 검색엔진 크롤링 효율성을 극대화해야 합니다.
💻 실무 활용 코드 스니펫 (HTML)
<link rel="prev" href="https://example.com/category?page=1">
<link rel="next" href="https://example.com/category?page=3">⚡ 5분 만에 적용하는 실행 스텝
- 현재 페이지의 URL 구조를 분석하고 쿼리 파라미터 또는 경로 기반의 페이지 번호 규칙을 정의합니다.
- 서버 사이드 렌더링(SSR) 또는 템플릿 엔진을 통해 현재 페이지 기준 이전 페이지와 다음 페이지의 절대 경로를 계산합니다.
- HTML <head> 섹션에 각각 rel=”prev”와 rel=”next” 메타 태그를 동적으로 삽입합니다.
- 구글 서치콘솔 및 크롤링 툴을 활용해 검색엔진 봇이 해당 링크를 정상적으로 추적하는지 확인합니다.
무한 스크롤과 페이지네이션을 하이브리드 형태로 구축하세요. 유저는 무한 스크롤로 쾌적한 UX를 누리게 하되, DOM 하단에 검색엔진 봇이 인식할 수 있는 전통적인 페이지네이션 링크(<a href> 태그)를 함께 배치하면 SEO와 UX를 모두 잡을 수 있습니다.
자바스크립트를 이용해 클라이언트 단에서만 rel 태그를 동적으로 생성하면 검색엔진 봇이 이를 파싱하지 못할 수 있습니다. 반드시 서버 사이드 렌더링(SSR) 단계에서 HTML 소스코드 내에 태그가 포함되도록 구현해야 합니다.
❓ 자주 묻는 질문 (FAQ)
A. 구글 검색엔진은 페이지네이션 이해 능력이 향상되어 필수가 아니라고 밝혔으나, 네이버나 빙 등 여전히 해당 마크업을 활용하는 다른 검색엔진 대응과 크롤링 안정성을 위해 구현하는 것이 좋습니다.
A. 무한 스크롤의 각 하위 페이지가 독립된 URL을 가지는 경우, 각 페이지는 자기 자신을 가리키는 self-referencing canonical을 설정하거나 첫 번째 페이지를 canonical로 지정하는 방식 대신 하위 페이지 각각이 고유의 콘텐츠를 가지도록 구성해야 합니다.