Breadcrumbs: 구조화된 네비게이션과 SEO를 위한 Schema
웹사이트의 콘텐츠가 많아지고 규모가 커질수록, 사용자는 자신이 어디에 있는지 헷갈리기 쉽고, 검색엔진은 페이지 간 구조적 관계를 파악하기 어려워집니다.
이와 같은 경우 장 강력한 해결책이 바로 Breadcrumbs입니다.
브레드크럼은 단순한 네비게이션 기능을 넘어서, 검색엔진 최적화(SEO)와 사용자 경험UX을 동시에 강화하는 중요한 도구입니다. 특히 Schema 마크업을 통해 구조화된 데이터를 제공하면, 구글과 같은 검색엔진은 사이트의 계층 구조를 더 정확하게 이해하고 검색 결과에 이동 경로를 노출할 수 있습니다.
✅ Breadcrumbs의 어원과 중요성
브레드크럼은 원래 동화 헨젤과 그레텔에서 유래한 개념입니다. 주인공들이 숲 속에서 길을 잃지 않기 위해 빵조각을 남기고 이동한 이야기에서 착안된 용어로, 웹사이트에서는 사용자가 현재 위치를 파악하고 이전 경로로 쉽게 돌아갈 수 있도록 도와주는 위치 기반 네비게이션 시스템을 의미합니다.
📌 왜 중요한가?
|
항목 |
설명 |
|---|---|
|
사용자 경험 |
사용자가 현재 페이지의 위치를 빠르게 인식하고, 상위 카테고리로 쉽게 이동 가능 |
|
SEO 측면 |
|
|
이탈률 감소 |
사용자가 다른 경로로 이동할 수 있어, 한 페이지에서 이탈하지 않고 사이트 내 체류 시간 증가 |
|
Sitelinks 반영 |
Google 검색 결과에서 사이트 링크 형태로 브레드크럼이 표시되면 클릭률 향상 가능 |
|
URL 구조 보조 |
플랫한 URL 구조에서도 정보 계층을 시각적으로 보완해줌 |
✅ Schema 마크업 적용법
Schema 마크업은 검색엔진에게 페이지의 의미와 구조를 명확하게 전달하는 구조화 데이터 방식입니다. 브레드크럼에 Schema를 적용하면, Google 검색 결과에 이동 경로가 표시될 수 있습니다.
🔲 적용 방식
Breadcrumbs Schema는 일반적으로 두 가지 방식 중 하나로 구현됩니다.
|
방식 |
설명 |
|---|---|
|
JSON-LD |
|
|
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은 사용자가 보게 될 텍스트와 동일하게 설정itemURL은 전체 경로(절대주소)로 작성해야 정확히 인식됨- 다국어 사이트의 경우
@language처리에 주의
✅ Rank Math 설정법
워드프레스의 Rank Math SEO 플러그인은 브레드크럼을 자동 생성하고, Schema.org 형식의 구조화 마크업까지 함께 출력할 수 있도록 지원합니다. 특히 테마가 지원하지 않거나 직접 삽입이 필요한 경우에도 위젯, 숏코드, PHP 함수를 통해 유연하게 설정할 수 있습니다.
[워드프레스 관리자] → [Rank Math] → [일반 설정]으로 순차적으로 이동합니다.
![Rank Math-Breadcrumbs 설정 경로[2025-07-29]](https://uknew.co/storage/2025/07/Rank-Math-Breadcrumbs-설정-경로2025-07-29-1024x528.png){kind=icon}
![HTML5[기본 구조]](https://uknew.co/storage/2025/07/HTML5기본-구조-768x513.jpg)
