Structured Data สำหรับเบรดครัมบ์ (BreadcrumbList)

เบรดครัมบ์ในผลการค้นหา

เส้นทางเบรดครัมบ์ในหน้าแสดงถึงตำแหน่งของหน้าเว็บในลำดับชั้นของเว็บไซต์ และอาจช่วยให้ผู้ใช้ทำความเข้าใจและสำรวจเว็บไซต์ได้อย่างมีประสิทธิภาพ ผู้ใช้จะไปจนถึงระดับบนสุดในลำดับชั้นของเว็บไซต์ได้โดยไปยังส่วนต่างๆ ทีละระดับ เริ่มจากเบรดครัมบ์ล่าสุดในเส้นทางเบรดครัมบ์

ความพร้อมใช้งานของฟีเจอร์

ฟีเจอร์นี้มีให้บริการบนเดสก์ท็อปในทุกภูมิภาคและภาษาที่ Google Search พร้อมให้บริการ

如何添加结构化数据

结构化数据是一种提供网页相关信息并对网页内容进行分类的标准化格式。如果您不熟悉结构化数据,可以详细了解结构化数据的运作方式

下面概述了如何构建、测试和发布结构化数据。如需获得向网页添加结构化数据的分步指南,请查看结构化数据 Codelab

  1. 添加必要属性。根据您使用的格式,了解在网页上的什么位置插入结构化数据
  2. 遵循指南
  3. 使用富媒体搜索结果测试验证您的代码,并修复所有严重错误。此外,您还可以考虑修正该工具中可能会标记的任何非严重问题,因为这些这样有助于提升结构化数据的质量(不过,要使内容能够显示为富媒体搜索结果,并非必须这么做)。
  4. 部署一些包含您的结构化数据的网页,然后使用网址检查工具测试 Google 看到的网页样貌。请确保您的网页可供 Google 访问,不会因 robots.txt 文件、noindex 标记或登录要求而被屏蔽。如果网页看起来没有问题,您可以请求 Google 重新抓取您的网址
  5. 为了让 Google 随时了解日后发生的更改,我们建议您提交站点地图Search Console Sitemap API 可以帮助您自动执行此操作。

ตัวอย่าง

Google Search ใช้มาร์กอัปเบรดครัมบ์ในส่วนเนื้อหาของหน้าเว็บเพื่อจัดหมวดหมู่ข้อมูลจากหน้าเว็บในผลการค้นหา ตามที่แสดงให้เห็นในกรณีการใช้งานต่อไปนี้ ส่วนมากแล้วผู้ใช้จะมาถึงที่หน้าเว็บจากประเภทคำค้นหาที่แตกต่างกันมาก แม้ว่าการค้นหาแต่ละรายการอาจแสดงหน้าเว็บเดียวกัน แต่เบรดครัมบ์จะจัดหมวดหมู่เนื้อหาภายในบริบทของคำค้นหาใน Google Search หน้าสำหรับผู้ชนะรางวัลหนังสือนวนิยายอาจใช้เส้นทางเบรดครัมบ์ต่อไปนี้

เส้นทางเบรดครัมบ์เดี่ยว

หากมีเส้นทางเบรดครัมบ์เพียงเส้นทางเดียวที่นำไปสู่หน้าเว็บ หน้าเว็บอาจระบุเส้นทางเบรดครัมบ์ต่อไปนี้

หนังสือ นิยายวิทยาศาสตร์ ชนะรางวัล

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>

Microdata

ต่อไปนี้คือตัวอย่าง Microdata เพื่อรองรับเบรดครัมบ์ดังกล่าว


<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">
          <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>

Microdata

ต่อไปนี้คือตัวอย่าง Microdata ที่รองรับเส้นทางเบรดครัมบ์หลายเส้นทาง


<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 Search

เราจึงขอแนะนำให้ระบุเบรดครัมบ์ที่แสดงถึงเส้นทางไปยังหน้าเว็บดังกล่าวสำหรับผู้ใช้ทั่วไป แทนที่จะใช้โครงสร้างเหมือนกับ URL ทุกประการ คุณไม่จำเป็นต้องใส่เบรดครัมบ์ ListItem สำหรับเส้นทางระดับบนสุด (โดเมนหรือชื่อโฮสต์ของเว็บไซต์) หรือสำหรับหน้าเว็บเอง

คำจำกัดความของประเภท Structured Data

ในการระบุเบรดครัมบ์ ให้กำหนด BreadcrumbList ที่มี ListItems อย่างน้อย 2 รายการ คุณต้องใส่พร็อพเพอร์ตี้ที่จำเป็นลงในเนื้อหาเพื่อให้มีสิทธิ์แสดงพร้อมกับเบรดครัมบ์

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

ListItem

ListItem มีรายละเอียดเกี่ยวกับแต่ละรายการในลิสต์รายการ ดูคำจำกัดความที่สมบูรณ์ของ ListItem ได้ที่ schema.org/ListItem พร็อพเพอร์ตี้ที่ Google รองรับมีดังต่อไปนี้

พร็อพเพอร์ตี้ที่จำเป็น
item

URL หรือประเภทย่อยของ Thing

URL ไปยังหน้าเว็บที่เป็นตัวแทนเบรดครัมบ์ มีวิธีระบุ item อยู่ 2 วิธี ได้แก่

  • URL: ระบุ URL ของหน้าเว็บ เช่น
    "item": "https://example.com/books"
  • Thing: ใช้รหัสเพื่อระบุ URL ตามรูปแบบมาร์กอัปที่คุณใช้ดังนี้
    • JSON-LD: ใช้ @id เพื่อระบุ URL
    • Microdata: คุณสามารถใช้ href หรือ itemid เพื่อระบุ URL
    • RDFa: คุณสามารถใช้ about, href หรือ resource เพื่อระบุ URL

ไม่จำเป็นต้องใช้ item หากเบรดครัมบ์เป็นรายการสุดท้ายในเส้นทางเบรดครัมบ์ หากไม่ได้ใส่ item เป็นรายการสุดท้าย Google จะใช้ URL ของหน้าที่มีรายการดังกล่าว

name

Text

ชื่อของเบรดครัมบ์ที่แสดงให้ผู้ใช้เห็น หากคุณใช้ Thing พร้อมกับ name แทน URL เพื่อระบุ item ก็ไม่จำเป็นต้องใช้ name

position

Integer

ตำแหน่งของเบรดครัมบ์ในเส้นทางเบรดครัมบ์ ตำแหน่งที่ 1 หมายถึงจุดเริ่มต้นของเส้นทาง

使用 Search Console 监控富媒体搜索结果

Search Console 是一款工具,可帮助您监控网页在 Google 搜索结果中的显示效果。即使没有注册 Search Console,您的网页也可能会显示在 Google 搜索结果中,但注册 Search Console 能够帮助您了解 Google 如何查看您的网站并做出相应的改进。建议您在以下情况下查看 Search Console:

  1. 首次部署结构化数据后
  2. 发布新模板或更新代码后
  3. 定期分析流量时

首次部署结构化数据后

等 Google 将网页编入索引后,请在相关的富媒体搜索结果状态报告中查看是否存在问题。 理想情况下,有效项目数量会增加,而无效项目数量不会增加。如果您发现结构化数据存在问题,请执行以下操作:

  1. 修正无效项目
  2. 检查实际网址,核实问题是否仍然存在。
  3. 使用状态报告请求验证

发布新模板或更新代码后

如果对网站进行重大更改,请监控结构化数据无效项目的增幅。
  • 如果您发现无效项目增多了,可能是因为您推出的某个新模板无法正常工作,或者您的网站以一种新的错误方式与现有模板交互。
  • 如果您发现有效项目减少了(但无效项目的增加情况并不对应),可能是因为您的网页中未再嵌入结构化数据。请通过网址检查工具了解导致此问题的原因。

定期分析流量时

请使用效果报告分析您的 Google 搜索流量。数据将显示您的网页在 Google 搜索结果中显示为富媒体搜索结果的频率、用户点击该网页的频率以及网页在搜索结果中的平均排名。您还可以使用 Search Console API 自动提取这些结果。

问题排查

如果您在实施或调试结构化数据时遇到问题,请查看下面列出的一些实用资源。

  • 如果您使用了内容管理系统 (CMS) 或其他人负责管理您的网站,请向其寻求帮助。请务必向其转发列明问题细节的任何 Search Console 消息。
  • Google 不能保证使用结构化数据的功能一定会显示在搜索结果中。如需查看导致 Google 无法将您的内容显示为富媒体搜索结果的各种常见原因,请参阅结构化数据常规指南
  • 您的结构化数据可能存在错误。请参阅结构化数据错误列表
  • 如果您的网页受到结构化数据手动操作的影响,其中的结构化数据将会被忽略(但该网页仍可能会出现在 Google 搜索结果中)。如需修正结构化数据问题,请使用“人工处置措施”报告
  • 再次查看相关指南,确认您的内容是否未遵循指南。问题可能是因为出现垃圾内容或使用垃圾标记导致的。不过,问题可能不是语法问题,因此富媒体搜索结果测试无法识别这些问题。
  • 针对富媒体搜索结果缺失/富媒体搜索结果总数下降进行问题排查
  • 请等待一段时间,以便 Google 重新抓取您的网页并重新将其编入索引。请注意,网页发布后,Google 可能需要几天时间才会找到和抓取该网页。有关抓取和索引编制的常见问题,请参阅 Google 搜索抓取和索引编制常见问题解答
  • Google 搜索中心论坛中发帖提问。