Breadcrumb โดยใช้ตัวอย่างรวยของ Schema.org

9

ฉันมีปัญหาในการใช้เกร็ดเล็กเกร็ดน้อยในเกล็ดขนมปังจาก schema.org เมื่อฉันสร้าง breadcrumb ของฉันโดยใช้เอกสารและเรียกใช้ผ่านเครื่องมือทดสอบ Google Rich Snippetจะทำการระบุ breadcrumb แต่ไม่แสดงในภาพตัวอย่าง

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Page</title>
  </head>
  <body itemscope itemtype="http://schema.org/WebPage">     
      <strong>You are here: </strong>
      <div itemprop="breadcrumb">
        <a title="Home" href="/">Home</a> >
        <a title="Test Pages" href="/Test-Pages/">Test Pages</a> >
      </div>
  </body>
</html>

หากฉันเปลี่ยนเป็นใช้ตัวอย่างข้อมูลจาก data-vocabulary.org ตัวอย่างข้อมูลสมบูรณ์จะแสดงอย่างถูกต้องในหน้าตัวอย่าง

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Page</title>
  </head>
  <body>
      <strong>You are here: </strong>
      <ol itemprop="breadcrumb">
        <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          <a href="/" itemprop="url">
            <span itemprop="title">Home</span>
          </a>
        </li>
        <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          <a href="/Test-Pages/" itemprop="url">
            <span itemprop="title">Test Pages</span>
          </a>
        </li>
      </ol>
  </body>
</html>

ฉันต้องการแสดง breadcrumb ในผลลัพธ์การค้นหาแทน URL ไปยังหน้า

เนื่องจาก Schema.org เป็นวิธีที่แนะนำให้ใช้ตัวอย่างรวย ๆ ฉันจะใช้วิธีนี้ แต่เนื่องจาก breadcrumb ไม่แสดงในตัวอย่างผลลัพธ์การค้นหาโดยใช้วิธีนี้ฉันไม่มั่นใจว่ามันทำงานได้อย่างถูกต้อง

ฉันกำลังทำสิ่งผิดปกติในมาร์กอัพสำหรับตัวอย่างของ Schema.org หรือไม่

— อดัมเจนกิน
แหล่งที่มา

Google แนะนำให้ใช้รูปแบบไมโครดาต้าเหนือรูปแบบอื่น ๆ Breadcrumbs พวกเขารองรับ microdata และ RDFa support.google.com/webmasters/bin/…ฉันจะใช้รูปแบบที่แนะนำหากคุณต้องการให้ปรากฏในผลการค้นหา

— Anagio

ที่เกี่ยวข้อง: Schema.org หรือ Data-Vocabulary.org สำหรับ breadcrumbs หรือไม่

— 58

3

ด้วยการใช้งานนี้:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">Dresses</span>
  </a> &gt;
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">Real Dresses</span>
  </a> &gt;
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    <span itemprop="title">Real Green Dresses</span>
  </a>
</div>

คุณจะมี breadcrumb ต่อไปนี้ใน Google:

Dresses > Real Dresses > Real Green Dresses

— Ranaivo
แหล่งที่มา

1

ฉันต้องการ +1 สำหรับการอ้างอิง Barenaked Ladies ของคุณ แต่น่าเสียดายที่ฉันคิดว่าฉันจะใช้ระบบการลงคะแนนที่ไม่เหมาะสม :-) ดังนั้นฉันจะ +1 คุณสำหรับวิธีแก้ปัญหาที่ใช้งานได้จริงแทน

— Paul d'Aoust

1

ดูเหมือนว่าฉันจะมีปัญหากับเอกสาร schema.org เอง นี่คือลิงค์การให้ความรู้บางส่วน:

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

มันน่าเสียดายเพราะ HTML นั้นมีความซับซ้อนมากกว่าที่เป็นจริง แต่ก็มี

หวังว่าจะช่วย!

— Stuart Burrows
แหล่งที่มา

1

ฉันได้ทำการวิจัยเกี่ยวกับเรื่องนี้เมื่อเร็ว ๆ นี้

ตามที่ปรากฏสิ่งที่ Google แนะนำสำหรับ breadcrumbs ไม่ทำงาน เมื่อฉันดูสองสามสัปดาห์ที่ผ่านมาตัวอย่างของพวกเขาเองล้มเหลวในเครื่องมือ Rich Snippet ของ Google ดูเหมือนว่า Google จะล้าหลังเล็กน้อย แต่ก็ยังล้ำหน้ากว่าคนอื่น

Data-vocabulary.org เป็นมาตรฐานที่ยอมรับและเป็นจริงแม้ว่า Schema.org จะถูกแทนที่ด้วย Data-vocabulary.org อย่างไรก็ตามความเป็นจริงไม่ตรงกับสำนวน เจตนาคือ Schema.org จะแทนที่ Data-vocabulary.org และอาจเกิดขึ้นได้ ถึงกระนั้นฉันก็พบว่ามีตัวอย่างข้อมูล (ปุนตั้งใจ) ที่กล่าวถึงว่า Google ยังไม่ได้แก้ไขรหัสของพวกเขาเพื่อให้รู้จัก Schema.org

ต้องบอกว่านี่เป็นตัวอย่างที่ฉันพบว่าใช้งานได้ใน Google และ Bing แม้ว่า Bing จะเปลี่ยนสิ่งต่าง ๆ เล็กน้อยดังนั้นควรใช้ความระมัดระวังหาก Bing มีความสำคัญต่อคุณ

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/"><span itemprop="title">Home</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/marvel/"><span itemprop="title">Marvel Comics</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/fantastic-four/"><span itemprop="title">Fantastic Four</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/fantastic-four/58/"><span itemprop="title">Fantastic Four #48: The Coming of Galactus</span></a></span>

หวังว่านี่จะช่วยได้

— closetnoc
แหล่งที่มา

1

(ออกจากการสนับสนุนผู้บริโภค)

คำศัพท์ Schema.org เสนอสองวิธีในการจัดเตรียมเกล็ดขนมปังสำหรับWebPage(และประเภทย่อย):

breadcrumbproperty ที่มีค่าข้อความ
breadcrumbคุณสมบัติที่มีBreadcrumbListค่า

การใช้ข้อความนั้นง่าย แต่ไม่มีโครงสร้าง (ยากที่จะแยกวิเคราะห์สำหรับผู้บริโภค)
การใช้BreadcrumbListมีความซับซ้อนมากขึ้น แต่อนุญาตให้ระบุสิ่งที่ต้องการอย่างชัดเจน (แยกวิเคราะห์ได้ง่ายขึ้นสำหรับผู้บริโภค)

ยกตัวอย่างของคุณการใช้BreadcrumbListอาจมีลักษณะเช่นนี้:

<body itemscope itemtype="http://schema.org/WebPage">     
  <strong>You are here: </strong>
  <div itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">

    <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <meta itemprop="position" content="1" />
      <a itemprop="item" href="/">
        <span itemprop="name">Home</span>
      </a>
    </span> 

    &gt;

    <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <meta itemprop="position" content="2" />
      <a itemprop="item" href="/Test-Pages/">
        <span itemprop="name">Test Pages</span>
      </a>
    </span>

  </div>
</body>

(คุณอาจต้องย้ายองค์ประกอบหากช่องว่างเป็นปัญหา)

— UNOR
แหล่งที่มา