Breadcrumb menggunakan cuplikan kaya Schema.org

9

Saya mengalami masalah dalam mengimplementasikan cuplikan kaya breadcrumb dari schema.org. Ketika saya membuat remah roti menggunakan dokumentasi dan dijalankan melalui alat pengujian Potongan Kaya Google , remah roti diidentifikasi tetapi tidak ditampilkan dalam pratinjau.

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

Jika saya mengubah untuk menggunakan cuplikan dari data-vocabulary.org, cuplikan kaya akan ditampilkan dengan benar di pratinjau.

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

Saya ingin remah roti ditampilkan di hasil pencarian daripada URL ke halaman.

Mengingat Schema.org adalah cara yang disarankan untuk menggunakan cuplikan kaya, saya lebih suka menggunakan ini, namun karena remah roti tidak ditampilkan dalam pratinjau hasil pencarian menggunakan metode ini, saya tidak yakin ini bekerja dengan benar.

Apakah saya melakukan sesuatu yang salah pada markup untuk contoh Schema.org?

— Adam Jenkin
sumber

Google merekomendasikan penggunaan format microdata di atas yang lain. Breadcrumbs mereka mendukung microdata dan RDFa support.google.com/webmasters/bin/... saya akan menggunakan format yang mereka rekomendasikan jika Anda ingin itu muncul di hasil pencarian.

— Anagio

Terkait: Schema.org atau Data-Vocabulary.org untuk remah roti?

— unor

3

Dengan implementasi ini:

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

Anda akan memiliki remah roti berikut di Google:

Dresses > Real Dresses > Real Green Dresses

— Ranaivo
sumber

1

Saya akan memberi +1 untuk referensi Barenaked Ladies Anda, tetapi sayangnya saya pikir saya akan menyalahgunakan sistem pemungutan suara :-) JADI, saya akan memberi Anda +1 untuk solusi yang benar-benar berfungsi.

— Paul d'Aoust

1

Tampak bagi saya bahwa masalahnya adalah pada dokumentasi schema.org itu sendiri. Berikut ini beberapa tautan yang mendidik:

Saya telah memberi peringkat pada mereka sebagai yang paling bermanfaat pertama, pada dasarnya mereka semua terhubung satu sama lain pada akhirnya. Tindakan ini harus dilakukan pada akhir bulan ini tetapi sepertinya hasilnya akan sama seperti pada contoh kedua Anda.

Sangat disayangkan karena html akhirnya menjadi lebih rumit dari yang seharusnya, tetapi kita ada di sana.

Semoga itu bisa membantu!

— Stuart Burrows
sumber

1

Saya telah melakukan penelitian tentang ini baru-baru ini.

Ternyata, Apa yang direkomendasikan Google untuk remah roti tidak berfungsi. Ketika saya melihat beberapa minggu yang lalu, contoh mereka sendiri gagal di Alat Cuplikan Kaya Google. Tampaknya Google tertinggal sedikit tetapi masih di depan yang lain.

Data-vocabulary.org adalah standar yang diterima dan de-facto meskipun Schema.org dikatakan telah menggantinya dengan Data-vocabulary.org sebagai disusutkan. Namun, kenyataannya tidak sesuai dengan retorika. Maksudnya adalah bahwa Schema.org akan menggantikan Data-vocabulary.org dan mungkin itu akan terjadi. Namun, saya menemukan potongan (pun intended) di suatu tempat yang menyebutkan bahwa Google belum mengubah kode mereka untuk mengenali Schema.org.

Karena itu, ini adalah contoh yang saya temukan yang berfungsi di Google dan Bing, meskipun Bing sedikit berubah belakangan ini jadi berhati-hatilah jika Bing penting bagi Anda.

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

Semoga ini membantu.

— closetnoc
sumber

1

(Mengesampingkan dukungan konsumen.)

Schema.org kosakata menawarkan dua cara untuk menyediakan remah roti untuk WebPage(dan sub-jenisnya):

breadcrumbproperti dengan nilai teks
breadcrumbproperti dengan BreadcrumbListnilai

Menggunakan teks itu mudah, tetapi tidak terstruktur (lebih sulit diurai untuk konsumen).
Penggunaannya BreadcrumbListlebih kompleks, tetapi memungkinkan untuk menentukan apa pun yang diperlukan secara eksplisit (lebih mudah diurai untuk konsumen).

Mengambil contoh Anda, menggunakan BreadcrumbListbisa terlihat seperti ini:

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

(Anda mungkin harus memindahkan elemen jika spasi adalah masalah.)

— unor
sumber