구조화된 탐색경로(`BreadcrumbList`) 데이터

페이지의 탐색경로 트레일은 사이트 계층 구조에서 페이지의 위치를 나타내며 사용자가 사이트를 효과적으로 이해하고 탐색하는 데 도움이 될 수 있습니다. 사용자는 탐색경로 트레일의 마지막 탐색경로에서 시작하여 한 번에 한 수준씩 사이트 계층 구조 위로 끝까지 탐색할 수 있습니다.

기능 제공 여부

이 기능은 데스크톱에서 사용 가능하며, Google 검색이 제공되는 모든 지역에서 해당 언어로 사용할 수 있습니다.

구조화된 데이터를 추가하는 방법

구조화된 데이터는 페이지 정보를 제공하고 페이지 콘텐츠를 분류하기 위한 표준화된 형식입니다. 구조화된 데이터를 처음 사용한다면 구조화된 데이터의 작동 방식을 자세히 알아보세요.

다음은 구조화된 데이터를 빌드, 테스트 및 출시하는 방법의 개요입니다.

필수 속성을 추가합니다. 사용 중인 형식에 따라 페이지에 구조화된 데이터를 삽입하는 위치를 알아보세요.
CMS를 사용하고 있나요? CMS에 통합된 플러그인을 사용하는 것이 더 쉬울 수 있습니다.
자바스크립트를 사용하고 있나요? 자바스크립트로 구조화된 데이터를 생성하는 방법을 알아보세요.
가이드라인을 따릅니다.
리치 결과 테스트를 사용하여 코드의 유효성을 검사하고 심각한 오류를 해결하세요. 또한 도구에서 신고될 수 있는 심각하지 않은 문제는 구조화된 데이터의 품질을 개선하는 데 도움이 될 수 있으므로 해결하는 것이 좋습니다. 그러나 리치 결과를 사용하기 위한 필수사항은 아닙니다.
구조화된 데이터를 포함하는 일부 페이지를 배포하고 URL 검사 도구를 사용하여 Google에서 페이지를 표시하는 방법을 테스트합니다. Google이 페이지에 액세스할 수 있으며 robots.txt 파일, noindex 태그 또는 로그인 요구사항에 의해 차단되지 않는지 확인합니다. 페이지가 정상적으로 표시되면 Google에 URL을 재크롤링하도록 요청할 수 있습니다.
참고: Google이 재크롤링하고 색인을 다시 생성하는 동안 기다려 주세요. 페이지 게시 후 Google에서 페이지를 찾고 크롤링하는 데 며칠이 걸릴 수 있습니다.
Google에 향후 변경사항을 계속 알리려면 사이트맵을 제출하는 것이 좋습니다. 이는 Search Console Sitemap API를 사용하여 자동화할 수 있습니다.

예

Google 검색에서는 웹페이지의 본문에 탐색경로 마크업을 사용하여 검색결과에서 페이지의 정보를 분류합니다. 아래 사용 사례에 설명된 것처럼 사용자는 매우 다양한 유형의 검색어를 사용하여 페이지에 도착할 수 있습니다. 각 검색어가 동일한 웹페이지를 반환할 수 있지만 탐색경로는 Google 검색어의 컨텍스트 내에서 콘텐츠를 분류합니다. 가상의 도서상 수상자 페이지에서는 다음과 같은 탐색경로 트레일을 사용할 수 있습니다.

단일 탐색경로 트레일

페이지로 연결될 수 있는 탐색경로 트레일이 하나만 있는 경우 페이지는 다음의 탐색경로 트레일을 지정할 수 있습니다.

도서 › 공상과학 › 수상작

JSON-LD

다음은 이 탐색경로를 지원하는 JSON-LD의 예입니다.

<html>
  <head>
    <title>Award Winners</title>
    <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": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

다음은 이 탐색경로를 지원하는 RDFa의 예입니다.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="3">
      </li>
    </ol>
  </body>
</html>

마이크로데이터

다음은 이 탐색경로를 지원하는 마이크로데이터의 예입니다.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award winners</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
  </body>
</html>

HTML

다음은 시각적 디자인의 일부로 페이지 내에 있는 HTML 탐색경로 블록의 예입니다.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

여러 탐색경로 트레일

사이트의 페이지로 이동하는 여러 경로가 있는 경우 한 페이지에 여러 개의 탐색경로 트레일을 지정할 수 있습니다. 다음은 수상 도서의 페이지로 연결되는 한 가지 탐색경로 트레일입니다.

도서 › 공상과학 › 수상작

다음은 동일한 페이지로 연결되는 다른 탐색경로 트레일입니다.

문학 › 수상작

JSON-LD

다음은 여러 탐색경로 트레일을 지원하는 JSON-LD의 예입니다.

<html>
  <head>
    <title>Award Winners</title>
    <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": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    },
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Literature",
        "item": "https://example.com/literature"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Award Winners"
      }]
    }]
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

다음은 여러 탐색경로 트레일을 지원하는 RDFa의 예입니다.

<html>
 <head>
 <title>Award Winners</title>
 </head>
 <body>
 <ol vocab="https://schema.org/" typeof="BreadcrumbList">
 <li property="itemListElement" typeof="ListItem">
 <a property="item" typeof="WebPage"
 href="https://example.com/books">
 Books</a>
 <meta property="position" content="1">
 </li>
 ›
 <li property="itemListElement" typeof="ListItem">
 <a property="item" typeof="WebPage"
 href="https://example.com/books/sciencefiction">
 Science Fiction</a>
 <meta property="position" content="2">
 </li>
 ›
 <li property="itemListElement" typeof="ListItem">
 <a property="item" typeof="WebPage"
 href="https://example.com/books/sciencefiction/awardwinners">
 Award Winners</a>
 <meta property="position" content="3">
 </li>
 </ol>
 <ol vocab="https://schema.org/" typeof="BreadcrumbList">
 <li property="itemListElement" typeof="ListItem">
 <a property="item" typeof="WebPage"
 href="https://example.com/literature">
 Literature</a>
 <meta property="position" content="1">
 </li>
 ›
 <li property="itemListElement" typeof="ListItem">
 Award Winners
 <meta property="position" content="2">
 </li>
 </ol>
 </body>
</html>

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction/awardwinners">
          <span property="name">Award Winners</span></a>
        <meta property="position" content="3">
      </li>
    </ol>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/literature">
          <span property="name">Literature</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="2">
      </li>
    </ol>
  </body>
</html>

마이크로데이터

다음은 여러 탐색경로 트레일을 지원하는 마이크로데이터의 예입니다.

<html>
 <head>
 <title>Award Winners</title>
 </head>
 <body>
 <ol itemscope itemtype="https://schema.org/BreadcrumbList">
 <li itemprop="itemListElement" itemscope
 itemtype="https://schema.org/ListItem">
 <a itemprop="item" href="https://example.com/books">
 Books</a>
 <meta itemprop="position" content="1" />
 </li>
 ›
 <li itemprop="itemListElement" itemscope
 itemtype="https://schema.org/ListItem">
 <a itemscope itemtype="https://schema.org/WebPage"
 itemprop="item" itemid="https://example.com/books/sciencefiction"
 href="https://example.com/books/sciencefiction">
 Science Fiction</a>
 <meta itemprop="position" content="2" />
 </li>
 ›
 <li itemprop="itemListElement" itemscope
 itemtype="https://schema.org/ListItem">
 <a itemprop="item" href="https://example.com/books/sciencefiction/awardwinners">
 Award Winners</a>
 <meta itemprop="position" content="3" />
 </li>
 </ol>
 <ol itemscope itemtype="https://schema.org/BreadcrumbList">
 <li itemprop="itemListElement" itemscope
 itemtype="https://schema.org/ListItem">
 <a itemprop="item" href="https://example.com/literature">
 Literature</a>
 <meta itemprop="position" content="1" />
 </li>
 ›
 <li itemprop="itemListElement" itemscope
 itemtype="https://schema.org/ListItem">
 Award Winners
 <meta itemprop="position" content="2" />
 </li>
 </ol>
 </body>
</html>

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books/sciencefiction/awardwinners">
          <span itemprop="name">Award Winners</span></a>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/literature">
          <span itemprop="name">Literature</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award Winners</span>
        <meta itemprop="position" content="2" />
      </li>
    </ol>
  </body>
</html>

HTML

다음은 시각적 디자인의 일부로 페이지 내에 있는 HTML 탐색경로 블록의 예입니다.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="https://www.example.com/literature">Literature</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

가이드라인

Google 검색에 탐색경로를 표시하려면 다음 가이드라인을 따라야 합니다.

URL 구조를 미러링하는 대신 페이지의 일반적인 사용자 경로를 나타내는 탐색경로를 제공하는 것이 좋습니다. 최상위 경로(사이트의 도메인 또는 호스트 이름)나 페이지 자체에는 탐색경로 ListItem를 포함할 필요가 없습니다.

구조화된 데이터 유형 정의

탐색경로를 지정하려면 두 개 이상의 ListItems가 포함된 BreadcrumbList를 정의해야 합니다. 탐색경로로 콘텐츠를 표시하려면 필수 속성이 있어야 합니다.

`BreadcrumbList`

BreadcrumbList는 목록의 모든 요소를 포함하는 컨테이너 항목입니다. BreadcrumbList의 전체 정의는 schema.org/BreadcrumbList에서 확인할 수 있습니다. Google에서 지원하는 속성은 다음과 같습니다.

필수 속성

필수 속성
`itemListElement`	`ListItem` 특정 순서로 나열된 탐색경로 배열입니다. 각 탐색경로를 `ListItem`으로 지정합니다. 예를 들면 다음과 같습니다. { "@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" }] }

itemListElement

ListItem

특정 순서로 나열된 탐색경로 배열입니다. 각 탐색경로를 ListItem으로 지정합니다. 예를 들면 다음과 같습니다.

{
"@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"
  }]
}

`ListItem`

ListItem에는 목록의 개별 항목에 관한 세부정보가 있습니다. ListItem의 전체 정의는 schema.org/ListItem에서 확인할 수 있습니다. Google에서 지원하는 속성은 다음과 같습니다.

필수 속성

필수 속성
`item`	`URL` 또는 `Thing`의 하위유형 탐색경로를 나타내는 웹페이지 URL입니다. `item`을 지정하는 두 가지 방법은 다음과 같습니다. `URL`: 페이지의 URL을 지정합니다. 예를 들면 다음과 같습니다. "item": "https://example.com/books" `Thing`: ID를 사용하여 사용 중인 마크업 형식을 기준으로 URL을 지정합니다. JSON-LD: `@id`를 사용하여 URL을 지정합니다. 마이크로데이터: `href` 또는 `itemid`를 사용하여 URL을 지정할 수 있습니다. RDFa: `about`, `href` 또는 `resource`를 사용하여 URL을 지정할 수 있습니다. 탐색경로가 탐색경로 트레일의 마지막 항목인 경우 `item`은 필수가 아닙니다. `item`이 마지막 항목에 포함되어 있지 않으면 Google은 포함된 페이지의 URL을 사용합니다.
`name`	`Text` 사용자에게 표시되는 탐색경로의 제목입니다. `URL` 대신 `name`이 포함된 `Thing`을 사용하여 `item`을 지정하는 경우 `name`은 필수가 아닙니다.
`position`	`Integer` 탐색경로 트레일에서 탐색경로의 위치입니다. 위치 1은 트레일의 시작을 나타냅니다.

item

URL 또는 Thing의 하위유형

탐색경로를 나타내는 웹페이지 URL입니다. item을 지정하는 두 가지 방법은 다음과 같습니다.

URL: 페이지의 URL을 지정합니다. 예를 들면 다음과 같습니다.
```
"item": "https://example.com/books"
```
Thing: ID를 사용하여 사용 중인 마크업 형식을 기준으로 URL을 지정합니다.
- JSON-LD: @id를 사용하여 URL을 지정합니다.
- 마이크로데이터: href 또는 itemid를 사용하여 URL을 지정할 수 있습니다.
- RDFa: about, href 또는 resource를 사용하여 URL을 지정할 수 있습니다.

탐색경로가 탐색경로 트레일의 마지막 항목인 경우 item은 필수가 아닙니다. item이 마지막 항목에 포함되어 있지 않으면 Google은 포함된 페이지의 URL을 사용합니다.

name

Text

사용자에게 표시되는 탐색경로의 제목입니다. URL 대신 name이 포함된 Thing을 사용하여 item을 지정하는 경우 name은 필수가 아닙니다.

position

Integer

탐색경로 트레일에서 탐색경로의 위치입니다. 위치 1은 트레일의 시작을 나타냅니다.

Monitor rich results with Search Console

Search Console is a tool that helps you monitor how your pages perform in Google Search. You don't have to sign up for Search Console to be included in Google Search results, but it can help you understand and improve how Google sees your site. We recommend checking Search Console in the following cases:

After deploying structured data for the first time

After Google has indexed your pages, look for issues using the relevant Rich result status report. Ideally, there will be an increase of valid items, and no increase in invalid items. If you find issues in your structured data:

Fix the invalid items.
Inspect a live URL to check if the issue persists.
Request validation using the status report.

After releasing new templates or updating your code

When you make significant changes to your website, monitor for increases in structured data invalid items.

If you see an increase in invalid items, perhaps you rolled out a new template that doesn't work, or your site interacts with the existing template in a new and bad way.
If you see a decrease in valid items (not matched by an increase in invalid items), perhaps you are no longer embedding structured data in your pages. Use the URL Inspection tool to learn what is causing the issue.

Analyzing traffic periodically

Analyze your Google Search traffic using the Performance Report. The data will show you how often your page appears as a rich result in Search, how often users click on it and what is the average position you appear on search results. You can also automatically pull thes

구조화된 탐색경로(BreadcrumbList) 데이터

기능 제공 여부

구조화된 데이터를 추가하는 방법

예

단일 탐색경로 트레일

JSON-LD

RDFa

마이크로데이터

HTML

여러 탐색경로 트레일

JSON-LD

RDFa

마이크로데이터

HTML

가이드라인

구조화된 데이터 유형 정의

BreadcrumbList

ListItem

Monitor rich results with Search Console

After deploying structured data for the first time

After releasing new templates or updating your code

Analyzing traffic periodically

구조화된 탐색경로(`BreadcrumbList`) 데이터

`BreadcrumbList`

`ListItem`