인사이트

웹사이트에 들어가서 뒤로가기 버튼을 연속으로 누르셨던 적 한 번쯤 있으시죠?. 이러한 불편함을 개선하기 위한 작은 노력이 바로 브레드 크럼 (breadcrumb) 입니다. 브레드 크럼, 즉 작은 빵 부스러기 만으로도 웹사이트 사용자들의 편리성과 검색엔진 랭킹을 개선할 수 있습니다. 본 편에서는 브레드 크럼에 대해 자세히 알아보도록 하겠습니다.

<목차>

브레드 크럼 이란?

브레드 크럼의 역할

브레드 크럼의 종류

브레드 크럼 추가하기

- Yoast SEO 플러그인 사용하기

브레드 크럼 이란?

‘브레드 크럼’이란 주로 페이지 상단 우측에 자리하여 유저가 웹사이트 내에서 어디에 있는지 알려주는 네비게이션 텍스트를 말합니다. 이 텍스트는 현재 웹사이트에서 유저의 위치를 한 눈에 보여주며, 각 패스를 클릭하여 되돌아 갈 수도 있습니다. 

왜 이 네비게이션을 브레드 크럼이라고 부를까요? 이유는 매우 간단합니다. 어릴적 읽었던 동화에서 헨젤과 그레텔이 숲 속으로 들어갈 때, 길을 잃지 않기 위해 빵 부스러기를 흘렸던 것을 기억하실 것입니다. 여기서 이 빵 부스러기 (breadcrumb)의 명칭이 유래되었습니다. 즉, 길을 잃지 않고 되돌아갈 수 있게 흔적을 남겼다는 의미에서 이 이름을 따온 것입니다.

브레드 크럼의 역할

1) 사용자 경험(UX) 개선

위에서 짧게 언급했듯이, 브레드 크럼은 전반적인 사용자 경험 (UX) 또는 고객경험 (CX)을 개선합니다. 어떤 경로를 통해 현재 페이지에 도달했는지, 해당 페이지는 어떤 카테고리에 속해있는지 등을 알려줄 수 있습니다. 또한 뒤로가기 버튼보다 더욱 직관적으로 상위 페이지로 갈 수 있도록 링크의 역할을 합니다. 웹사이트 계층이 복잡하고 페이지가 많아질수록 정확하게 카테고리화 해서 나누는 것은 사용자들에게 매우 중요합니다.

2) SERP에 노출

브레드 크럼은 유저가 웹사이트를 이용할 때 편리하게 해줄 뿐만 아니라 구글이 웹사이트 구조를 이해하는데 도움을 주기도 합니다. 구글은 이제 SERP (검색엔진 결과 페이지) 에 브레드 크럼을 보여주며, 정보를 카테고리화 하는데 이용합니다. 구글에 따르면, 구글 봇은 브레드 크럼을 이용하여 콘텐츠를 파악하고 분류합니다. 따라서 브레드 크럼이 SEO (검색엔진 최적화)에도 중요하게 작용하는 것 입니다.

 SERP에 보여지는 작은 브레드 크럼

3) 이탈율 개선

마지막으로, 브레드 크럼은 사용자들이 웹사이트에 더욱 오래 머무르게 할 수 있습니다. 만약 구글에서 “텀블러”를 검색했다고 가정해보겠습니다. 상단에 있는 첫번째 검색결과를 클릭했을 때, 사용자가 원하는 크기나 디자인의 텀블러가 아니라면 보통 뒤로가기를 눌러 2-3번째 검색결과를 선택할 것입니다. 하지만 브레드 크럼이 [ 홈페이지 >> 신학기 용품 >> 텀블러 >> 빨대 텀블러 ] 이렇게 디자인이 되어있다면, 사용자는 “빨대가 없는 텀블러 디자인을 볼 수 있겠구나” 라는 생각으로 브레드 크럼을 클릭하여 같은 웹사이트의 다른 상품을 구경할 수도 있습니다. 이러한 방식으로 이탈율을 개선하는 역할도 할 수 있습니다.

브레드 크럼의 종류

브레드 크럼은 사용자를 위해 어떤 목적을 지니는 지에 따라 3가지 종류로 나눌 수 있습니다.

1) 계층 기반 브레드 크럼

계층 기반 브레드 크럼은 가장 널리 사용됩니다. 사이트 구조에 따라 어디에 위치해 있고, 홈페이지로 돌아가려면 어떤 경로로 되돌아갈 수 있는지 알려주는 형식입니다. 위 텀블러를 예시로 든다면, [ 홈페이지 >> 주방용품 >> 물병/컵 >> 텀블러 >> 빨대 텀블러 ] 와 같은 계층식 구조를 보일 것 입니다.

2) 특성 기반 브레드 크럼

특성 기반 브레드 크럼은 계층 기반과 비슷하지만, 보통 이커머스 사이트에서 사용자가 어떤 특성을 찾아보고 클릭했는지를 보여줍니다. 예를 들어, [ 홈페이지 >> 주방용품 >> 텀블러 >> 빨대 / 200ml 이하 / 보온 ] 과 같이 텀블러의 특성을 보여주게 됩니다.

3) 기록 기반 브레드 크럼

기록 기반 브레드 크럼은 브라우저 사용기록과 매우 비슷합니다. 해당 웹사이트에서 어떤 경로를 클릭했는지 기록을 보여주게 됩니다. 예를 들어, 다양한 정보성 글이 있는 블로그의 경우 [ 홈페이지 >> 블로그 글 제목1 >> 블로그 글 제목2 ] 와 같은 방식으로 사용 경로를 나타낼 수 있습니다.

브레드 크럼 추가하기

Yoast SEO 플러그인 사용하기

가장 널리 이용되는 CMS인 워드프레스에서는 Yoast SEO라는 플러그인을 통해 쉽게 브레드 크럼을 추가할 수 있습니다. 어떤 테마는 Yoast SEO 브레드 크럼을 사용할 수 있도록 준비되어 있습니다.

하지만, 그렇지 않은 경우에는 브레드 크럼 기능을 활성화 하고 적용시켜야 합니다. 먼저, 워드프레스에서 “Yoast SEO” 플러그인을 다운받아 줍니다. 그런 다음, 하단의 코드를 header.php 테마 파일에 추가시킵니다.

워드프레스에서 외모 >> Theme Code Editor로 들어갑니다. 그런 다음, Theme Files에서 header.php를 찾아 클릭합니다. 그리고 원하는 위치에 코드를 입력한 뒤, Update File을 클릭하여 저장합니다.

이제 워드프레스 좌측 바에서 Yoast SEO >> Settings로 들어갑니다. 그렇게 되면 Yoast SEO 내부 내비게이션에 Advanced >> Breadcrumbs 를 찾을 수 있습니다.

해당 페이지에서 브레드 크럼에 관한 설정을 한 다음, 맨 마지막에 있는 Enable breadcrumbs for your theme 을 클릭하여 활성화시킵니다. Yoast SEO의 추가적인 설정에 관해서는 이 곳을 참고하세요.

자료출처 : 브레드 크럼 (breadcrumb) 으로 사용자 경험 개선하기 (openads.co.kr)