검색 결과 페이지(SERP)에서 경쟁사 웹사이트는 '홈 > 블로그 > 백엔드'처럼 깔끔한 탐색 경로가 표시되는데, 내 사이트는 볼품없는 복잡한 URL 문자열 그대로 노출되어 답답했던 경험이 있을 것이다. 다만 대부분의 개발자들은 이를 검색엔진 알고리즘의 무작위 선택으로 치부하고 넘어가거나, 검색 로봇에게 정확한 카테고리 구조를 전달하는 방법을 모르는 경우가 많다. 이번에는 브레드크럼 구조화 데이터(BreadcrumbList)가 정확히 무엇인지, 왜 SEO와 클릭률(CTR) 개선에 필수적인지, 그리고 JSON-LD 스키마를 활용해 실무 서비스에 적용하는 과정을 완벽하게 정리해서 소개하겠다.

브레드크럼은 동화 '헨젤과 그레텔'에서 길을 잃지 않기 위해 빵 부스러기를 떨어뜨린 데서 유래한 UI 요소다. 웹사이트에서 사용자가 현재 어느 위치(카테고리 단계)에 있는지 직관적으로 보여주는 역할을 한다.
검색엔진 크롤러도 이 브레드크럼 정보를 바탕으로 사이트의 계층 구조를 이해한다. HTML 메타 태그나 일반 텍스트만으로는 깊은 깊이의 카테고리 관계를 파악하기 어렵기 때문에, Schema.org 표준에 맞춘 구조화 데이터(Structured Data)를 전송해야 한다.

일반 URL 노출과 브레드크럼 구조화 데이터가 적용된 형태를 비교해 보면 클릭률에서 큰 차이가 난다.

Schema.org 마크업을 웹 페이지에 적용하는 방식은 크게 Microdata, RDFa, JSON-LD 세 가지가 있다. 과거에는 HTML 태그 내부 속성으로 삽입하는 Microdata 방식을 자주 썼지만, 현재 구글(Google)과 주요 검색엔진은 JSON-LD 방식을 강력하게 권장한다.

JSON-LD는 웹 페이지의 기존 DOM 구조를 전혀 건드리지 않고, script 태그 하나로 깔끔하게 분리하여 작성할 수 있어 유지보수성이 비약적으로 높다. 렌더링 성능에도 영향을 주지 않으므로 백엔드 템플릿 엔진이나 SSR(서버 사이드 렌더링) 환경에서 동적으로 생성하기 가장 적합하다.

실제 서비스에서 브레드크럼을 잘못 구현하는 가장 흔한 원인은 Schema.org 필수 속성을 누락하거나, 배열의 순서(position)를 잘못 지정하는 경우다.

아래는 HTML DOM 요소 안에 직접 마크업을 섞어 쓰다가 문법 오류가 발생하거나 필수 파라미터인 position 및 item 식별자가 누락된 잘못된 작성 예시다.

<!-- 잘못된 예: Microdata 오용 및 JSON-LD 포맷 미준수 -->
<div itemscope itemtype="http://schema.org/BreadcrumbList">
  <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com">
      <span itemprop="name">홈</span>
    </a>
    <!-- position 속성이 빠져 있어서 크롤러가 순서를 파악할 수 없음 -->
  </span> &gt;
  <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/backend">
      <span itemprop="name">백엔드</span>
    </a>
  </span>
</div>

Head 태그나 Body 태그 하단에 아래와 같이 application/ld+json 타입의 스크립트 블록을 삽입한다. position 값은 1부터 시작하는 정수로 순서대로 증가시켜야 한다.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "홈",
      "item": "https://example.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "개발 블로그",
      "item": "https://example.com/blog"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "백엔드",
      "item": "https://example.com/blog/backend"
    }
  ]
}
</script>

구글 Rich Results Test(리치 결과 테스트) 도구에 해당 URL이나 HTML 소스를 입력하면 Breadcrumbs 항목이 파란색 체크표시와 함께 성공적으로 감지된다. 검색 로봇이 사이트를 재크롤링한 후 며칠 내에 검색 결과 스니펫에 깔끔한 경로가 반영된다.

브레드크럼 스키마를 적용할 때 백엔드 개발자들이 자주 저지르는 실수를 체크 리스트로 정리했다.

✗ 상대 경로 URL 사용: item 필드에 /blog/backend처럼 상대 경로를 적으면 검색 로봇이 인덱싱하지 못한다. 반드시 https://로 시작하는 완전한 절대 경로(Absolute URL)를 작성해야 한다.
✓ 절대 경로 준수: https://example.com/blog/backend 형태로 프로토콜과 도메인을 포함한다.

✗ 화면에 보이는 UI와 스키마 데이터 불일치: 실제 웹 페이지 화면에는 '홈 > 게시판' 두 단계만 보여주면서 JSON-LD에는 '홈 > 개발 > 백엔드 > 게시판' 형태로 다른 경로를 집어넣으면 구글 품질 가이드라인 위반으로 스패밍 제재를 받을 수 있다.
✓ UI 데이터 동기화: 실제 화면에 표시되는 브레드크럼 UI 텍스트와 JSON-LD 내부의 name 및 item 값을 정확히 일치시킨다.

✗ 마지막 현재 페이지 요소 누락 또는 position 중복: position 순서가 1, 2, 2처럼 중복되거나 중간 번호가 비어있으면 유효성 검사에서 에러가 난다.
✓ 정확한 순번 지정: 최상위 루트 경로부터 현재 페이지까지 1부터 연속된 정수를 지정한다.

브레드크럼 구조화 데이터는 검색엔진에게 사이트의 계층적 가치를 명확히 전달하고 검색 결과 스니펫의 가독성을 높여주는 강력한 SEO 도구다. 간단한 스크립트 추가라는 작은 최적화 작업이 모여서 검색 결과 상위 노출과 클릭률 향상이라는 큰 효과를 만든다는 점을 잊지 말자. 이 글의 JSON-LD 예제 코드 구조를 참고해 본인 서비스의 템플릿 파일에 브레드크럼 스키마를 즉시 도입하면, 훨씬 세련되고 신뢰도 높은 검색 노출 결과를 얻을 수 있을 것이다.