Breadcrumb list, Breadcrumbs, Breadcrumb navigation

breadcrumb list, breadcrumbs, breadcrumb navigation: 빵부스러기?

웹 사이트 전체 안에서 웹 페이지의 위치를 순서에 따라 계층 구조의 하이퍼링크 목록으로 보여주는 것으로 상위 웹페이지부터 현재 방문자가 위치한 웹페이지까지의 경로를 보여줌으로써, 현재 어느 위치에 있는지를 시각적으로 쉽게 파악하는 데 도움이 된다. 통상적으로 콘텐츠의 맨 위에 있는 경우가 많다.

영어로는 그냥 Breadcrumbs, Breadcrumb navigation이라고 쓰는 것이 일반적이다. 한국어로 해석하면 「빵 부스러기」라 부르고, 의역하면 "사이트 이동 경로" 정도로 풀이하면 될 듯 하다.

얼핏 보면 빵 부스러기를 뜻하는 단어가 웹(Web)과 어떤 관련이 있나 생각할 수 있지만, 동화 헨젤과 그레텔에서 주인공이 숲에서 길을 잃지 않도록 숲 입구에 빵 부스러기를 두며 나갔다는 에피소드에서 유래되었다는 것을 알면 이해가 될 것이다.

※일반적인 웹사이트의 네비게이션 메뉴와 같은 것이다라는 혼돈을 줄 수 있지만, 엄연한 차이점이 존재한다. 네비게이션 메뉴는 웹사이트 운영자의 의도로 구성되는 반면, Breadcrumb list는 말 그대로 현재 웹페이지의 상위 계층 구조의 위치 그대로를 표시한다.

종류

일반적으로 다음 3가지로 분류한다.

• 경로 유형: 해당 페이지에 어떤 경로로 도착했는지를 보여준다. 동적으로 같은 페이지 내에서 도착까지의 경로가 다르면 목록도 다르다. 브라우저의 기능. 즉, 「뒤로가기」 버튼, 열어본 페이지의 목록 등과 같은 기능이 중복되어 있다는 비판이 있다.
• 위치 유형: 해당 페이지가 웹 사이트의 계층 구조에 어디에 있는지를 보여준다. 정적으로 도착까지의 경로가 달라도 동일한 페이지면 목록도 같다. 콘텐츠가 풍부한 나머지 단일 분류구조에서는 콘텐츠의 위치를 완전히 지정할 수 없게 된 사이트에서는 적당하지 않다.
• 속성 유형: 그 페이지가 어떤 속성(특성)으로 분류되어 있는지를 보여준다.

SEO에서의 효과

Breadcrumb list는 방문자가 현재 자신의 위치를 쉽게 파악할 수 있다는 점 외에도, SEO의 중요한 역할을 한다. 예를 들어 아래와 같이 설계된 사이트가 있다고 생각해보자.

설계가 잘된 웹사이트

이 웹사이트는 제품을 PC와 카메라로 분류하고 각각의 카테고리에 각 상품 상세페이지를 가지는 일반적인 형태를 지니고 있다. 이 형태라면 컴퓨터의 목록페이지에 대해 「컴퓨터」를 앵커 텍스트로 한 내부링크가 모이게 되고, 카메라 목록 페이지에는 「카메라」를 앵커 텍스트로 한 내부 링크가 모이게 된다.

이것은 SEO의 기본인"앵커 텍스트에 타겟 키워드를 포함"한다는 것을 실현하는 형태이기 때문에 사용자는 물론 검색엔진도 이해하기 쉬운 홈페이지라 판단할 수 있다.

반대로, 아래와 같이 설계된 사이트를 지금도 볼 수 있다.

설계가 잘못된 웹사이트

이 웹사이트는 컴퓨터와 카메라 제품을 보유하고 있음에 불구하고, 「컴퓨터」 「카메라」라는 목록 페이지를 만들지 않았기 때문에 위 그림과 같은 Breadcrumb list를 갖게 된다. 덕분에 컴퓨터나 카메라 등의 키워드로 SEO를 하기가 매우 어려워진다. (사이트 내에 그것을 나타내는 페이지가 존재하지 않기 때문에)

Breadcrumb list 보다는 애초부터 사이트의 설계 문제에 있지만, 사용자가 검색할 키워드를 미리 파악하고 이에 맞춰 콘텐츠를 정리하면, 어느 정도는 자연스럽게 첫 번째 그림과 같은 올바른 내부 링크구조를 가질 수 있게 된다.

Breadcrumb list에서 SEO를 의도한 앵커 텍스트가 나타나지 않는 설계를 해버린 경우, 2번째 그림의 예처럼 SEO에 큰 손실이 발행하게 된다.

설계를 실패해 버렸을 경우, 사이트의 규모가 커질수록 수정이 어려워지기 때문에, 설계 단계에서 SEO를 고려하는 것을 빠뜨리지 않도록 해야 한다.