ตัวอย่าง Breadcrumb Schema

ตัวอย่างสมบูรณ์สำหรับหน้าสามระดับ

สมมติว่ามีบทความบล็อกที่ https://example.com/blog/breadcrumb-basics/ เส้นทางที่ผู้ชมเห็นคือ หน้าแรก, บล็อก, พื้นฐานเบรดครัมบ์ เมื่อกรอกในเครื่องมือจะเป็นดังนี้

หน้าแรก | https://example.com/
บล็อก | https://example.com/blog/
พื้นฐานเบรดครัมบ์ | https://example.com/blog/breadcrumb-basics/

ผลลัพธ์ที่สร้างได้คือ

<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/blog/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "พื้นฐานเบรดครัมบ์",
      "item": "https://example.com/blog/breadcrumb-basics/"
    }
  ]
}
</script>

แต่ละส่วนทำหน้าที่อะไร

การปรับตัวอย่างให้เข้ากับเว็บของคุณ

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

หน้าที่ลึกกว่านี้ก็เพียงเพิ่มบรรทัด หน้าสินค้าที่ลึกห้าระดับจะมีห้ารายการ ตำแหน่ง 1 ถึง 5

อ่านผลลัพธ์ของคุณเอง

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

สำหรับหน้าที่ตื้นกว่า เช่น หน้าเกี่ยวกับเราที่อยู่ใต้หน้าแรกโดยตรง ตัวอย่างจะเหลือสองรายการ โครงสร้างไม่เปลี่ยน เปลี่ยนแค่จำนวน ListItem ซึ่งเครื่องมือจัดการให้