브레드크럼 내비게이션
브레드크럼 내비게이션은 현재 페이지가 사이트 계층 구조의 어디에 위치하는지 홈에서부터의 경로로 보여 주는 보조 내비게이션입니다. 사용자의 길찾기를 돕는 동시에 BreadcrumbList 구조화 데이터로 표시하면 구글 검색결과의 카테고리 경로로도 활용됩니다.
- 브레드크럼은 "홈 > 카테고리 > 현재 페이지" 형태로 현재 위치까지의 계층 경로를 한 줄로 보여 주는 보조 내비게이션입니다.
- 각 단계는 상위 페이지로 이동하는 클릭 가능한 링크이며, 마지막 현재 페이지는 링크하지 않는 것이 원칙입니다.
- BreadcrumbList 구조화 데이터로 마크업하면 구글이 검색결과에 카테고리 경로를 표시하고 페이지를 분류하는 데 활용합니다.
- NN/g 기준 계층이 3단계 이상일 때 유용하며, 1~2단계의 얕은 구조나 선형 구조에서는 필요하지 않습니다.
- 브레드크럼은 전역·지역 내비게이션을 대체하지 않고 보완하는 요소이며, 내부 링크 구조를 강화해 SEO에도 기여합니다.
개요
브레드크럼 내비게이션은 현재 페이지가 사이트 계층 구조의 어느 위치에 있는지를 홈페이지에서부터의 경로로 보여 주는 보조 내비게이션입니다. NN/g의 정의에 따르면 브레드크럼은 현재 페이지와 그 상위 페이지(부모, 조부모 등)를 홈페이지까지 거슬러 올라가며 나열한 링크 목록입니다. 보통 페이지 상단, 전역 내비게이션 바로 아래에 ">" 또는 "/" 기호로 구분된 링크 trail 형태로 배치됩니다.
브레드크럼이라는 이름은 동화 "헨젤과 그레텔"에서 길을 찾기 위해 빵 부스러기를 떨어뜨린 데서 유래했습니다. 사용자가 외부 링크를 통해 깊은 하위 페이지로 곧장 들어와 홈페이지를 건너뛰었을 때, 자신이 사이트의 어디에 있는지 파악하고 상위 카테고리로 손쉽게 이동하도록 돕는 것이 핵심 역할입니다.
작동 방식
브레드크럼의 각 노드는 상위 페이지로 이동하는 링크여야 하며, 사용자가 클릭해서 바로 이동할 수 있다는 점이 브레드크럼 이해의 핵심입니다. 다만 마지막 항목인 현재 페이지는 링크하지 않는 것이 원칙입니다. 또한 브레드크럼은 브라우징 히스토리(방문 순서)가 아니라 사이트의 계층 구조를 보여 주며, 전용 URL이 없는 추상적인 카테고리가 아니라 실제 페이지만 포함해야 합니다.
구글은 페이지 본문에 포함된 브레드크럼 마크업을 검색결과에서 해당 페이지의 정보를 분류하는 데 사용합니다. 즉 URL이 그대로 노출되는 대신, 검색결과에 카테고리 경로가 표시되어 사용자가 페이지의 사이트 내 맥락을 파악할 수 있습니다.
BreadcrumbList 스키마 예시
구글이 브레드크럼을 검색결과에 표시하려면 BreadcrumbList 구조화 데이터로 마크업해야 합니다. 하나의 BreadcrumbList는 최소 2개 이상의 ListItem을 포함하며, 각 ListItem에는 position(순서, 1부터 시작), name(표시 이름), item(해당 페이지 URL)이 필요합니다. 마지막 현재 페이지 항목은 item을 생략할 수 있으며, 이 경우 구글이 해당 페이지의 URL을 사용합니다. 다음은 구글 검색 센트럴 공식 문서의 JSON-LD 예시입니다.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Books",
"item": "https://example.com/books"
},{
"@type": "ListItem",
"position": 2,
"name": "Science Fiction",
"item": "https://example.com/books/sciencefiction"
},{
"@type": "ListItem",
"position": 3,
"name": "Award Winners"
}]
}
</script>위 예시에서 position 3의 "Award Winners"는 현재 페이지이므로 item을 생략했습니다. item에 유효한 URL이 없으면 크롤러 입장에서 경로의 연결이 끊기므로, 현재 페이지를 제외한 모든 단계에는 올바른 URL을 넣어야 합니다.
근거·이점
NN/g는 1995년부터 브레드크럼을 권장해 왔으며, "UI 비용은 거의 들지 않으면서 사용자에게 많은 이점을 제공한다"고 평가합니다. 다만 브레드크럼이 유용한 조건이 있습니다. NN/g에 따르면 브레드크럼은 계층이 3단계 이상일 때 유용하며, 1~2단계의 얕은 구조나 선형(linear) 구조의 사이트에서는 필요하지 않습니다.
설계 시 유의할 핵심 원칙은 다음과 같습니다. 첫째, 브레드크럼은 전역 내비게이션 바나 섹션 내 지역 내비게이션을 대체하지 않고 보완하는 보조 요소입니다. 둘째, 모바일에서는 화면 공간 제약이 크므로 여러 줄로 늘어지는 trail을 피하고, 바로 위 상위 카테고리만 표시하도록 축약하는 방식이 권장됩니다. 이때도 글자 크기나 간격을 최소 탭 영역(약 1cm × 1cm) 이하로 줄여서는 안 됩니다.
SEO 관점에서 브레드크럼은 상위 카테고리 페이지로 향하는 일관된 내부 링크를 만들어 사이트 구조를 명확히 하고, 구조화 데이터를 통해 검색결과의 카테고리 경로 표시(리치 결과)에 기여합니다.
실행 체크리스트
- 홈페이지를 첫 링크로 두고 현재 페이지까지의 계층 경로를 순서대로 표시합니다.
- 현재 페이지를 제외한 모든 단계를 클릭 가능한 링크로 만듭니다.
- 마지막 현재 페이지 항목은 링크하지 않고 비활성 텍스트로 표시합니다.
- 방문 순서(히스토리)가 아니라 사이트 계층 구조를 반영합니다.
- 전용 URL이 있는 실제 페이지만 포함하고 추상 카테고리는 넣지 않습니다.
- BreadcrumbList JSON-LD로 마크업하고 리치 결과 테스트로 검증합니다.
- 모바일에서는 바로 위 상위 단계만 노출하도록 축약합니다.