Breadcrumbs: 구조화된 네비게이션과 SEO를 위한 Schema

Author:jarvis 등록일2025-08-01 15:332025-07-29 18:31 업데이트2025-07-29

웹사이트의 콘텐츠가 많아지고 규모가 커질수록, 사용자는 자신이 어디에 있는지 헷갈리기 쉽고, 검색엔진은 페이지 간 구조적 관계를 파악하기 어려워집니다.

이와 같은 경우 장 강력한 해결책이 바로 Breadcrumbs입니다.

브레드크럼은 단순한 네비게이션 기능을 넘어서, 검색엔진 최적화(SEO)와 사용자 경험^UX을 동시에 강화하는 중요한 도구입니다. 특히 Schema 마크업을 통해 구조화된 데이터를 제공하면, 구글과 같은 검색엔진은 사이트의 계층 구조를 더 정확하게 이해하고 검색 결과에 이동 경로를 노출할 수 있습니다.

TOC

1mn read

✅ Breadcrumbs의 어원과 중요성

브레드크럼은 원래 동화 헨젤과 그레텔에서 유래한 개념입니다. 주인공들이 숲 속에서 길을 잃지 않기 위해 빵조각을 남기고 이동한 이야기에서 착안된 용어로, 웹사이트에서는 사용자가 현재 위치를 파악하고 이전 경로로 쉽게 돌아갈 수 있도록 도와주는 위치 기반 네비게이션 시스템을 의미합니다.

📌 왜 중요한가?

항목	설명
사용자 경험	사용자가 현재 페이지의 위치를 빠르게 인식하고, 상위 카테고리로 쉽게 이동 가능
SEO 측면	검색엔진이 사이트 구조를 더 잘 이해하여 색인과 순위 결정에 긍정적 영향
이탈률 감소	사용자가 다른 경로로 이동할 수 있어, 한 페이지에서 이탈하지 않고 사이트 내 체류 시간 증가
Sitelinks 반영	Google 검색 결과에서 사이트 링크 형태로 브레드크럼이 표시되면 클릭률 향상 가능
URL 구조 보조	플랫한 URL 구조에서도 정보 계층을 시각적으로 보완해줌

✅ Schema 마크업 적용법

Schema 마크업은 검색엔진에게 페이지의 의미와 구조를 명확하게 전달하는 구조화 데이터 방식입니다. 브레드크럼에 Schema를 적용하면, Google 검색 결과에 이동 경로가 표시될 수 있습니다.

🔲 적용 방식

Breadcrumbs Schema는 일반적으로 두 가지 방식 중 하나로 구현됩니다.

방식	설명
JSON-LD	`<script type="application/ld+json">` 형태로 `<head>` 또는 `<body>`에 삽입 (권장 방식)
Microdata	HTML 요소 내 속성(attribute)으로 직접 마크업 (구식 방식, 유지관리 어려움)

Google은 공식적으로 JSON-LD 방식을 권장합니다.

🔲 JSON-LD 적용 예시

<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/category/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "현재 페이지",
      "item": "https://example.com/category/current-page/"
    }
  ]
}
</script>

위 스크립트는 페이지 내 <head> 또는 <body> 마지막에 삽입하면 됩니다.

주의 사항

position은 반드시 1부터 순서대로 지정해야 함

name은 사용자가 보게 될 텍스트와 동일하게 설정

item URL은 전체 경로(절대주소)로 작성해야 정확히 인식됨

다국어 사이트의 경우 @language 처리에 주의

✅ Rank Math 설정법

워드프레스의 Rank Math SEO 플러그인은 브레드크럼을 자동 생성하고, Schema.org 형식의 구조화 마크업까지 함께 출력할 수 있도록 지원합니다. 특히 테마가 지원하지 않거나 직접 삽입이 필요한 경우에도 위젯, 숏코드, PHP 함수를 통해 유연하게 설정할 수 있습니다.

[워드프레스 관리자] → [Rank Math] → [일반 설정]으로 순차적으로 이동합니다.

랭크매스 브레드크럼 설정 방법

ℹ️ 제휴 안내
본 사이트의 콘텐츠에는 제휴 링크가 포함되어 있습니다. 방문자가 이 링크를 통해 상품 또는 서비스를 구매하면 본 사이트는 판매처로부터 수수료를 지급받습니다. 이 과정에서 구매자가 지불하는 금액^{(이벤트 할인 시 금액이 내려갑니다↓)}은 오르지 않습니다. 게시된 가격·할인·재고 정보는 작성 시점 기준이며 실제와 다를 수 있으므로, 구매 전 판매처에서 최종 확인하시기 바랍니다. 상품 선정과 평가는 자체 기준에 따라 작성되며, 수수료 지급 여부가 소개 순서나 평가 내용에 영향을 주지 않습니다.

Breadcrumbs: 구조화된 네비게이션과 SEO를 위한 Schema