SEO 브레드크럼: 스키마 마크업 구현 가이드

발행: 3일 전 (2025년 12월 22일 오후 06:29 GMT+9)

17 min read

Source: Dev.to

위의 링크에 포함된 전체 텍스트를 제공해 주시면, 해당 내용을 한국어로 번역해 드리겠습니다. (코드 블록, URL 및 마크다운 형식은 그대로 유지됩니다.)

Breadcrumb navigation은 웹사이트의 계층 구조 내에서 사용자의 현재 위치를 보여주는 보조 네비게이션 시스템입니다. 동화 헨젤과 그레텔에서 이름을 따온 이 기능은 사용자가 현재 위치를 파악하고 상위 페이지로 돌아가는 경로를 이해하도록 돕는 흔적을 만듭니다.

SEO 관점에서 breadcrumb는 다음과 같은 중요한 이점을 제공합니다:

구조 인식 – 검색 엔진은 breadcrumb 마크업을 사용해 사이트의 계층 구조를 이해하고, 페이지가 어떻게 분류되고 순위가 매겨지는지에 영향을 줍니다.
리치 결과 – 스키마 마크업을 올바르게 구현하면 breadcrumb가 Google 검색 결과에 직접 표시되어 페이지 제목 아래에 표시되는 URL을 대체하거나 보완할 수 있습니다.

breadcrumb 스키마 마크업이 SEO에 중요한 이유는 무엇일까요? BreadcrumbList 스키마를 사용한 구조화 데이터는 검색 엔진에 콘텐츠가 정확히 어떻게 구성되어 있는지 알려줍니다. Google은 이 정보를 활용해 검색 결과에 풍부한 breadcrumb 트레일을 표시하며, 이는 사용자가 사이트를 클릭하기 전에도 콘텐츠의 맥락과 관련성을 즉시 파악하게 해 사용자 경험을 향상시킵니다. 이러한 향상된 표시 방식은 클릭률(CTR)을 크게 높일 수 있습니다.

다양한 유형의 구조화 데이터 마크업을 Hugo에 적용하는 방법에 대한 포괄적인 가이드를 확인하고, BreadcrumbList와 기타 스키마 유형을 포함한 구현 방법을 자세히 살펴보세요.

Source: …

BreadcrumbList JSON‑LD 스키마 구현

SEO‑최적화된 브레드크럼의 기술적 기반은 JSON‑LD(Linked Data용 JavaScript Object Notation) 형식으로 BreadcrumbList 스키마를 올바르게 구현하는 데 있습니다. JSON‑LD는 구현과 유지 관리가 쉬워 Google이 권장하는 구조화 데이터 형식입니다.

내 웹사이트에 BreadcrumbList JSON‑LD를 어떻게 구현하나요?
페이지의 <head> 섹션이나 </body> 닫는 태그 바로 앞에 type="application/ld+json"인 <script> 태그를 추가합니다. 아래는 완전한 구현 예시입니다:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Blog",
      "item": "https://example.com/blog"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "SEO Guides",
      "item": "https://example.com/blog/seo-guides"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Breadcrumb Implementation",
      "item": "https://example.com/blog/seo-guides/breadcrumbs"
    }
  ]
}

핵심 구성 요소

@context – 항상 https://schema.org 로 설정합니다.
@type – 객체를 BreadcrumbList 로 정의합니다.
itemListElement – ListItem 객체들의 배열이며, 각각은 다음 세 가지 필수 속성을 가집니다:
- position – 1부터 시작하는 숫자 순서.
- name – 화면에 표시되는 라벨.
- item – 프로토콜을 포함한 절대 URL.

중요 구현 세부 사항

절대 URL( https:// 포함) 을 사용합니다.
position 번호는 연속적이어야 하며, 1부터 시작합니다.
페이지에 표시되는 실제 브레드크럼 내비게이션은 스키마 마크업과 정확히 일치해야 합니다. 불일치가 있으면 검색 엔진이 혼란스러워하고 패널티가 발생할 수 있습니다.

현재의 모범 사례를 따르는 것은 Breadcrumb이 최대 SEO 가치를 제공하고 뛰어난 사용자 경험을 보장하도록 합니다.

깊이

최적 깊이: 3–5 단계.
얕은 계층 구조(1–2 단계)는 충분한 컨텍스트를 제공하지 못하고, 깊은 계층 구조(6단계 이상)는 사용자와 검색 엔진을 압도할 수 있습니다.

라벨 설명성

키워드가 풍부하고 설명적인 라벨을 사용하세요(예: “Women’s Running Shoes” 대신 “Category 2”).
검색 엔진은 이러한 라벨을 분석해 콘텐츠 구성을 이해하고, 사용자는 라벨을 기반으로 탐색 결정을 내립니다.

현재 페이지의 클릭 가능 여부

마지막 Breadcrumb(현재 페이지)을 클릭 가능한 링크로 만들지 마세요.
색상이나 글꼴 두께를 다르게 지정하고 aria-current="page"를 추가해 스크린 리더 접근성을 확보하세요.

모바일 호환성

Breadcrumb을 반응형이며 터치 친화적으로 설계하세요.
간결한 구분자(예: / 또는 >)를 사용하고, 작은 화면에서는 긴 라벨을 잘라 표시하며, 터치 대상은 최소 44 × 44 px 크기를 유지하도록 합니다.

표시된 Breadcrumb과 스키마 마크업 간 일관성

사용자에게 표시되는 Breadcrumb 경로는 JSON‑LD 구조와 정확히 일치해야 합니다.
불일치는 조작으로 해석될 수 있으며, 그 결과 풍부한 결과가 검색 목록에서 제거될 수 있습니다.

Source: …

Hugo는 Breadcrumb 구현을 간단하게 해주는 내장 기능을 제공합니다. 아래는 단계별 가이드입니다.

layouts/partials/breadcrumbs.html 파일을 다음 마크업으로 생성합니다:

<ul class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
  <li class="breadcrumb-item" itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a href="{{ .Site.BaseURL }}" itemprop="item">
      <span itemprop="name">Home</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>

  {{ $position := 2 }}
  {{ range .Ancestors.Reverse }}
    <li class="breadcrumb-item" itemprop="itemListElement" itemscope
        itemtype="https://schema.org/ListItem">
      <a href="{{ .Permalink }}" itemprop="item">
        <span itemprop="name">{{ .Title }}</span>
      </a>
      <meta itemprop="position" content="{{ $position }}" />
    </li>
    {{ $position = add $position 1 }}
  {{ end }}

  <li class="breadcrumb-item active" aria-current="page" itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <span itemprop="name">{{ .Title }}</span>
    <meta itemprop="position" content="{{ $position }}" />
  </li>
</ul>

이 템플릿은 Hugo의 .Ancestors 함수를 사용해 페이지 계층을 순회합니다. Reverse 메서드를 통해 Breadcrumb이 사이트 루트부터 현재 페이지까지 순서대로 정렬됩니다. 마이크로데이터 속성은 HTML에 직접 삽입되며, 이는 JSON‑LD보다 선호하는 개발자도 있습니다.

2. 베이스 템플릿에 파셜 포함하기

Breadcrumb을 표시하고 싶은 위치에 파셜을 추가합니다. 예: layouts/_default/baseof.html 파일에 다음을 삽입합니다:

{{ partial "breadcrumbs.html" . }}

layouts/partials/breadcrumb-schema.html 파일을 생성합니다:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ .Site.BaseURL }}"
    }{{ $position := 2 }}
    {{ range .Ancestors.Reverse }},{
      "@type": "ListItem",
      "position": {{ $position }},
      "name": "{{ .Title }}",
      "item": "{{ .Permalink }}"
    }{{ $position = add $position 1 }}{{ end }},{
      "@type": "ListItem",
      "position": {{ $position }},
      "name": "{{ .Title }}",
      "item": "{{ .Permalink }}"
    }
  ]
}

시각적인 Breadcrumb과 함께 스키마를 포함합니다:

{{ partial "breadcrumbs.html" . }}
{{ partial "breadcrumb-schema.html" . }}

다음 CSS를 스타일시트(예: assets/css/main.css)에 추가합니다:

.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background-color: #f8f9fa;
  border-radius: 0.25rem;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  padding: 0 0.5rem;
  color: #6c757d;
}

.breadcrumb-item.active {
  color: #6c757d;
}

.breadcrumb-item a {
  text-decoration: none;
  color: #007bff;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .breadcrumb {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    padding: 0 0.25rem;
  }
}

5. 검증 및 테스트

왜 검증이 필요한가?

올바른 검증을 통해 검색 엔진이 Breadcrumb 마크업을 인식하고 검색 결과에 정확히 표시하도록 할 수 있습니다.

도구

도구	사용 방법
Google Rich Results Test	페이지 URL 또는 HTML을 붙여넣고 오류나 경고를 확인합니다.
Google Search Console – Enhancements	사이트에 적용된 Breadcrumb을 확인하고 문제를 진단합니다.
Schema Markup Validator	마크업을 입력해 구조화된 데이터가 올바른지 검사합니다.
Screaming Frog SEO Spider	사이트 전체를 크롤링해 Breadcrumb 구현 여부와 오류를 보고합니다.

위 도구들을 활용해 구현한 Breadcrumb이 정상적으로 인식되는지 확인하고, 필요 시 수정하세요.

After crawling | 크롤링이 완료된 후, “Breadcrumb” 보고서에서 마크업 유효성, 오류 및 검색 결과 표시 영향 등을 확인합니다. |

일반 오류

필수 속성(position, name, item) 누락.
position 값이 순차적이지 않음(1부터 시작해 1씩 증가해야 함).
절대 URL 대신 상대 URL 사용.
보이는 Breadcrumb와 스키마 마크업이 일치하지 않음.

권장 테스트 워크플로우

템플릿을 변경한 후 Rich Results Test를 실행합니다.
스테이징 환경에 배포하고 실제 URL에서 테스트를 다시 실행합니다.
프로덕션 배포 후 Search Console의 “Breadcrumb” 보고서를 모니터링합니다.
사이트 구조를 수정하거나 새 섹션을 추가하거나 SERP에서 Breadcrumb가 사라지는 것을 발견할 때마다 재검증합니다.

6. 일반 구현 패턴

Site Type	일반적인 Breadcrumb 구조
E‑commerce	Home > Category > Sub‑category > Product
Blog / Content	Home > Blog > Category > Post Title
Documentation	Home > Docs > Section > Sub‑section > Page

사이트의 정보 구조를 가장 잘 나타내는 패턴을 선택하세요; 위의 Hugo 파셜은 모든 계층 구조에서 작동합니다.

추가 읽을거리

Submitting Forms in Hugo – 정적 Hugo 사이트에 동적 폼을 추가하는 방법을 배웁니다.

고급 고려 사항

Dynamic breadcrumbs가 JavaScript에 의해 생성될 경우 특별한 주의가 필요합니다. 검색 엔진은 JavaScript 렌더링을 개선했지만, 서버‑사이드 렌더링이나 정적 생성이 SEO에 더 신뢰할 수 있습니다. 클라이언트‑사이드 생성을 반드시 사용해야 한다면, JSON‑LD 스키마가 여전히 서버‑사이드 또는 빌드 시에 렌더링되는지 확인하십시오.
Multiple breadcrumb trails를 단일 페이지에 배치하는 것은 기술적으로 가능하지만 일반적으로 권장되지 않습니다. 정당한 사용 사례가 있는 경우(예: 카테고리‑와 날짜‑기반 탐색을 모두 표시) BreadcrumbList 스키마를 여러 개 구현하되, 이는 사용자에게 혼란을 줄 수 있음을 인지하십시오.
Internationalization은 복잡성을 추가합니다. 다국어 사이트의 경우, 브레드크럼 라벨이 적절히 번역되고 URL이 올바른 언어 버전을 가리키도록 하십시오. 스키마 마크업은 현재 언어의 탐색 구조를 반영해야 합니다.

영향 측정

Track click‑through rates in Google Search Console before and after implementation—properly implemented breadcrumbs can increase CTR by 20‑30 %.
→ Google Search Console에서 구현 전후의 클릭률을 추적하세요—올바르게 구현된 브레드크럼은 CTR을 20‑30 % 증가시킬 수 있습니다.
Monitor bounce rates and time on site; improved navigation typically reduces bounce rates and boosts engagement.
→ 이탈률과 사이트 체류 시간을 모니터링하세요; 개선된 내비게이션은 일반적으로 이탈률을 낮추고 참여도를 높입니다.
Check Google Search Console’s Enhancement reports regularly for breadcrumb‑related issues. Aim for 100 % coverage on eligible pages.
→ 브레드크럼 관련 문제에 대해 Google Search Console의 향상 보고서를 정기적으로 확인하세요. 대상 페이지에서 100 % 커버리지를 목표로 합니다.
Use Google Analytics (or privacy‑focused alternatives) to track breadcrumb usage. Implement event tracking on breadcrumb clicks to understand how users navigate your site hierarchy.
→ Google Analytics(또는 프라이버시 중심 대안)를 사용해 브레드크럼 사용을 추적하세요. 브레드크럼 클릭에 대한 이벤트 트래킹을 구현하여 사용자가 사이트 계층 구조를 어떻게 탐색하는지 파악합니다.

For a comparison of analytics tools, see our article on Matomo, Plausible, Google and other web analytics systems.

적절한 스키마 마크업을 사용한 브레드크럼 내비게이션 구현은 높은 효과와 낮은 노력으로 SEO를 개선합니다. 이 가이드에 제시된 패턴과 모범 사례를 따르면 검색 엔진 이해도와 사용자 경험을 모두 향상시켜 더 나은 순위와 증가된 참여를 이끌어낼 수 있습니다. Google가 검색 엔진 시장을 장악하고 SEO 모범 사례의 대부분을 좌우하지만, 구조화된 데이터를 다르게 색인하고 표시할 수 있는 **alternative search engines**을 고려할 가치가 있습니다—SEO 전략을 다양화하면 더 넓은 청중에게 도달할 수 있습니다.

SEO 브레드크럼: 스키마 마크업 구현 가이드

BreadcrumbList JSON‑LD 스키마 구현

핵심 구성 요소

깊이

라벨 설명성

현재 페이지의 클릭 가능 여부

모바일 호환성

표시된 Breadcrumb과 스키마 마크업 간 일관성

2. 베이스 템플릿에 파셜 포함하기

5. 검증 및 테스트

왜 검증이 필요한가?

도구

일반 오류

권장 테스트 워크플로우

6. 일반 구현 패턴

추가 읽을거리

고급 고려 사항

영향 측정

유용한 링크

기타 유용한 기사

관련 글

고급 SEO 설명: 우리가 어떻게 처리하는지 (그리고 실제 의미는 무엇인지)

개발자를 위한 백링크: 왜 중요한가 (gengers.de 같은 최소 사이트에도)

왜 97%의 소프트웨어 엔지니어가 SEO에 시간을 낭비하고 있는가 (그리고 Mangools가 이를 해결하는 방법)

실제 사용자와 실제 SEO를 위한 실용적인 Financial Calculators 만들기

Breadcrumb Navigation 및 SEO 이해

BreadcrumbList JSON‑LD 스키마 구현

핵심 구성 요소

2025년 Breadcrumb 모범 사례

깊이

라벨 설명성

현재 페이지의 클릭 가능 여부

모바일 호환성

표시된 Breadcrumb과 스키마 마크업 간 일관성

Hugo 정적 사이트에서 Breadcrumb 구현하기

1. Breadcrumb 파셜 만들기

2. 베이스 템플릿에 파셜 포함하기

3. (선택) JSON‑LD Breadcrumb 스키마 추가하기

4. Breadcrumb 스타일링

5. 검증 및 테스트

왜 검증이 필요한가?

도구

일반 오류

권장 테스트 워크플로우

6. 일반 구현 패턴

추가 읽을거리

고급 고려 사항

영향 측정

유용한 링크

기타 유용한 기사

관련 글

고급 SEO 설명: 우리가 어떻게 처리하는지 (그리고 실제 의미는 무엇인지)

개발자를 위한 백링크: 왜 중요한가 (gengers.de 같은 최소 사이트에도)

왜 97%의 소프트웨어 엔지니어가 SEO에 시간을 낭비하고 있는가 (그리고 Mangools가 이를 해결하는 방법)

실제 사용자와 실제 SEO를 위한 실용적인 Financial Calculators 만들기