브레드크럼(Breadcrumbs): 개념과 구현 방법

브레드크럼이란?

브레드크럼은 사용자 내비게이션을 개선하고, 검색엔진과 사용자 모두에게 페이지의 계층 구조를 명확히 알리는 것을 목적으로 하는 기능입니다. 이를 통해 사용자는 최종 페이지뿐 아니라 그 페이지가 속한 카테고리도 빠르게 방문할 수 있습니다.

브레드크럼을 구현하는 방법

구현 측면에서 현재 두 가지 옵션이 있습니다. 사용자에게 보이는 옵션과 코드 옵션입니다. 사실 둘은 별개로 적용되어서는 안 되며 항상 함께 구현해야 합니다.

시각적(Visible)

시각적 옵션에서는 웹사이트가 각 페이지 상단에 브레드크럼을 표시해, 페이지를 방문하는 사용자가 자신의 위치를 정확히 알 수 있게 합니다. 예를 들어 어떤 전자상거래 사이트의 상품 페이지(HP Envy 컴퓨터)를 보고 있다면, 브레드크럼에는 다음과 같이 표시됩니다.

홈 > 컴퓨터 > HP > Envy 이렇게 하면 사용자가 보고 있는 상품이 컴퓨터 카테고리에 속하고, 또 HP 컴퓨터 라인에 속한다는 것을 사용자에게 알리는 셈입니다. 내비게이션 측면에서 이 기능은 매우 중요합니다. 사용자가 다른 HP 모델을 더 보고 싶거나 컴퓨터 카테고리를 계속 둘러보고 싶을 때 클릭 한 번으로 가능하기 때문입니다.

이 기능이 없으면 내비게이션이 훨씬 어려워지고 사용자가 웹사이트를 떠날 가능성이 훨씬 높아집니다.

코드(Code)

이전 옵션이 사용자를 위한 브레드크럼을 추가하는 것이라면, 이 옵션은 검색엔진에 우리 콘텐츠가 어떻게 분류되어 있는지를 알리는 것입니다. Google은 시각적으로만 노출된 브레드크럼을 이해하지 못하기 때문에 이 구현이 올바르게 이뤄지는 것이 매우 중요합니다.

아래에서 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": "Authors", "item": "https://example.com/books/authors" },{ "@type": "ListItem", "position": 3, "name": "Ann Leckie", "item": "https://example.com/books/authors/annleckie" },{ "@type": "ListItem", "position": 4, "name": "Ancillary Justice", "item": "https://example.com/books/authors/ancillaryjustice" }] } </script> 위 코드는 "Ancillary Justice"라는 책이 Ann Leckie 작가가 쓴 책이라는 것을 알려줍니다.

Books > Authors > Ann Leckie > Ancillary Justice

자체 개발이나 주요 언어로 웹사이트를 구축한 경우 직접 구현해야 합니다. 그러나 Wordpress를 사용한다면 이 구현을 도와줄 여러 플러그인이 있습니다.

• ›Rank Math
• ›Yoast SEO

구현 검증하기

구현이 끝나면 가장 중요한 것은 올바르게 적용되었는지 확인하는 일입니다. "시각적" 구현은 모든 요소가 올바르게 링크되어 있고 잘 작동하는지 확인만 하면 되니 매우 간단하지만, 코드 구현 검증에는 약간의 노력이 더 필요합니다.

그래도 우리에게는 이 작업을 훨씬 쉽게 해줄 Google 도구와 Chrome 확장 프로그램이 있습니다.

Google 구조화 데이터 도구:

Google 도구를 사용하면 URL을 통하거나 조각을 직접 입력해 코드 수준에서 구조화 데이터를 검증할 수 있습니다.

Google 구조화 데이터 도구

URL을 입력하면 Google이 감지된 모든 구조화 데이터에 대한 분석을 반환합니다.

Google 구조화 데이터 도구의 URL 분석 예시.

반대로 구현 전에 브레드크럼 JSON-LD 코드를 먼저 테스트하고 싶다면 "코드 조각" 도구를 사용할 수 있고, 다음과 같은 결과를 얻을 수 있습니다.

구조화 데이터의 코드 조각 검증 도구.

Structured Data Testing Tool (Google Chrome 확장 프로그램)

Google 도구를 방문하지 않고 브라우저에서 직접 브레드크럼(및 다른) 구조화 데이터를 검증하고 싶다면 "Structured Data Testing Tool" 확장 프로그램을 사용할 수 있습니다. 감지된 모든 구조화 데이터와 오류까지 보여줍니다.

SEOcrawl 글을 예시로 한 구조화 데이터 검증 Chrome 확장 프로그램.

Google Search Console에서 브레드크럼 모니터링

마지막으로 구현과 검증이 끝나면 Google Search Console에서 활동을 모니터링하는 일이 남았습니다. 이를 통해 매일 추적하고 이상 징후를 감지할 수 있습니다.

Search Console의 브레드크럼 리포트 시각화(2019년 9월 출시).

마지막으로 여러분께 묻고 싶습니다. 브레드크럼을 구현할 때 가장 흔히 만난 오류는 무엇이었나요?

다른 SEO 전문가들에게도 도움이 되도록 그 모음을 정리해 이 글에 추가하고 싶습니다.

정말 감사합니다. 댓글 공유 잊지 마세요!

참고 자료

• ›Google의 브레드크럼 문서