탐색경로

웹페이지에 표시된 탐색경로

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

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

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

다음은 구조화된 데이터를 빌드, 테스트 및 출시하는 방법의 개요입니다. 웹 페이지에 구조화된 데이터를 추가하는 방법에 관한 단계별 가이드는 구조화된 데이터 Codelab를 참조하세요.

  1. 필수 속성을 추가합니다. 페이지의 어느 위치에 구조화된 데이터를 배치해야 할지 자세히 알아보려면 구조화된 데이터: 페이지에 삽입할 위치를 참조하세요.
  2. 가이드라인을 따릅니다.
  3. 리치 결과 테스트를 사용하여 코드의 유효성을 검사합니다.
  4. 구조화된 데이터를 포함하는 일부 페이지를 배포하고 URL 검사 도구를 사용하여 Google에서 페이지를 어떻게 인식하는지 테스트합니다. Google이 페이지에 액세스할 수 있으며 robots.txt 파일, noindex 태그 또는 로그인 요구사항에 의해 차단되지 않는지 확인합니다. 페이지가 정상적으로 표시되면 Google에 URL을 재크롤링하도록 요청할 수 있습니다.
  5. Google에 향후 변경사항을 계속 알리려면 사이트맵을 제출하는 것이 좋습니다. 이는 Search Console Sitemap API를 사용하여 자동화할 수 있습니다.

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

탐색경로를 구현하는 일반적인 방법은 URL의 경로 부분을 탐색경로 트레일로 사용하는 것입니다. URL 경로의 어떤 부분은 페이지가 웹사이트에 어떻게 속하는지 사용자가 이해하는 데 도움을 주지 않습니다. 예를 들어 'https://example.com/pages/books/catcher_in_the_rye.html'에서 'pages'는 사용자에게 어떤 정보도 제공하지 않으며 최상위 요소 'example.com'도 마찬가지입니다. URL 구조를 미러링하는 대신 웹페이지의 일반적인 사용자 경로를 나타내는 탐색경로를 제공하는 것이 좋습니다.

단일 탐색경로 트레일

매년 장르별로 시상하는 '2014 네뷸러상 최고 소설'이라는 검색어는 다음 탐색경로를 생성할 수 있습니다.

도서공상과학 › 수상작

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="http://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="http://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">
          <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">
            <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="http://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="http://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="http://www.example.com/literature">Literature</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

가이드라인

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

구조화된 데이터 유형 정의

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

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

필수 속성
itemListElement

BreadcrumbList

특정 순서로 나열된 탐색경로 배열입니다. 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에서 확인할 수 있습니다.

필수 속성
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은 트레일의 시작을 나타냅니다.

Search Console로 리치 결과 모니터링하기

Search Console은 Google 검색에서의 페이지 실적을 모니터링하는 데 도움이 되는 도구입니다. Search Console에 가입해야만 페이지가 Google 검색결과에 포함되는 것은 아니지만, 가입하면 Google에서 사이트를 인식하는 방식을 이해하고 개선하는 데 도움이 될 수 있습니다. 다음과 같은 경우 Search Console을 확인하는 것이 좋습니다.

  1. 구조화된 데이터를 처음 배포한 후
  2. 새 템플릿을 출시하거나 코드를 업데이트한 후
  3. 주기적으로 트래픽 분석

구조화된 데이터를 처음 배포한 후

Google에서 페이지의 색인을 생성하고 나면 관련 리치 결과 상태 보고서를 사용하여 문제를 확인합니다. 유효한 페이지가 증가하고 오류나 경고는 증가하지 않는 것이 가장 좋습니다. 구조화된 데이터에 문제가 있는 경우 다음과 같이 해결하세요.

  1. 오류를 수정합니다.
  2. 실제 URL을 검사하여 문제가 지속되는지 확인합니다.
  3. 상태 보고서를 사용하여 유효성 검사를 요청합니다.

새 템플릿을 출시하거나 코드를 업데이트한 후

웹사이트를 대폭 변경했다면 구조화된 데이터 오류 및 경고가 증가하는지 모니터링하세요.
  • 오류가 증가했다면 새로 출시한 템플릿이 제대로 작동하지 않거나 사이트가 기존의 템플릿과 좋지 않은 방식으로 상호작용하게 된 것일 수 있습니다.
  • 유효한 항목이 감소했다면(오류 증가와 일치하지 않음) 페이지에 구조화된 데이터를 더 이상 삽입하지 않는 것일 수 있습니다. URL 검사 도구를 사용하여 문제를 일으키는 원인을 알아보세요.

주기적으로 트래픽 분석

실적 보고서를 사용하여 Google 검색 트래픽을 분석합니다. 데이터에서 페이지가 Google 검색의 리치 결과로 표시되는 빈도, 사용자가 검색결과를 클릭하는 빈도, 검색결과에 표시되는 평균 게재순위를 확인할 수 있습니다. Search Console API를 사용하여 이러한 결과를 자동으로 가져오는 방법도 있습니다.

문제해결

구조화된 데이터를 구현하는 데 문제가 있다면 다음 리소스를 참고하세요.