Breadcrumb przy użyciu fragmentów rozszerzonych Schema.org

9

Mam problemy z implementacją fragmentów bogatych w bułkę tartą ze strony schema.org. Gdy konstruuję moją nawigację za pomocą dokumentacji i uruchamiam za pomocą narzędzia do testowania fragmentu rozszerzonego Google , nawigacja jest identyfikowana, ale nie jest wyświetlana w podglądzie.

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

Jeśli zmienię użycie fragmentów z data-vocabulary.org, fragmenty rozszerzone będą poprawnie wyświetlane w podglądzie.

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

Chcę, aby bułka tarta była wyświetlana w wyniku wyszukiwania, a nie adres URL strony.

Biorąc pod uwagę, że Schema.org jest zalecanym sposobem korzystania z fragmentów rozszerzonych, wolałbym tego użyć, jednak ponieważ nawigacja nie wyświetla się w podglądzie wyniku wyszukiwania przy użyciu tej metody, nie jestem przekonana, czy to działa poprawnie.

Czy robię coś złego w znacznikach dla przykładu Schema.org?

— Adam Jenkin
źródło

Google zaleca stosowanie formatu mikrodanych w porównaniu z innymi. Pliki nawigacyjne obsługują mikrodane i RDFa support.google.com/webmasters/bin/... Użyłbym ich zalecanego formatu, jeśli chcesz, aby pojawiał się w wynikach wyszukiwania.

— Anagio

Powiązane: Schema.org lub Data-Vocabulary.org dla bułki tartej?

— lub

3

Dzięki tej realizacji:

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

Będziesz mieć następującą bułkę tartą w Google:

Dresses > Real Dresses > Real Green Dresses

— Ranaivo
źródło

1

Dałbym +1 za twoją referencję Barenaked Ladies, ale niestety myślę, że nadużywałbym systemu głosowania :-) W takim razie dam ci +1 za faktycznie działające rozwiązanie.

— Paul d'Aoust

1

Wydaje mi się, że problem dotyczy samej dokumentacji schema.org. Oto kilka linków edukacyjnych:

Najpierw umieściłem je jako najbardziej pomocne, zasadniczo wszystkie ostatecznie się ze sobą łączą. Działanie w tej sprawie ma nastąpić pod koniec tego miesiąca, ale wygląda na to, że wynik będzie taki sam, jak w drugim przykładzie.

Szkoda, bo HTML jest bardziej skomplikowany, niż powinien być, ale tak jest.

Mam nadzieję, że to pomaga!

— Stuart Burrows
źródło

1

Ostatnio przeprowadzałem badania w tej sprawie.

Jak się okazuje, to, co Google zaleca dla bułki tartej, nie działa. Kiedy patrzyłem kilka tygodni temu, ich własny przykład zawiódł w narzędziu Google Snippet Rich. Wygląda na to, że Google jest nieco w tyle, ale wciąż wyprzedza inne.

Data-vocabulary.org jest przyjętym i de facto standardem, chociaż mówi się, że Schema.org zastąpił go Data-vocabulary.org, ponieważ jest amortyzowany. Jednak rzeczywistość nie pasuje do retoryki. Chodziło o to, aby Schema.org zastąpił Data-vocabulary.org i być może tak się stanie. Mimo to znalazłem fragment kodu (gdzieś zamierzony), który wspomniał, że Google nie zmodyfikował jeszcze swojego kodu, aby rozpoznać Schema.org.

Powiedziawszy to, jest to przykład, który działał w Google i Bing, chociaż Bing ostatnio trochę zmienił, więc zachowaj ostrożność, jeśli Bing jest dla Ciebie ważny.

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

Mam nadzieję że to pomoże.

— closetnoc
źródło

1

(Pomijając wsparcie dla konsumentów).

Słownictwo Schema.org oferuje dwa sposoby dostarczania okruszków dla WebPage(i jego podtypów):

breadcrumbwłaściwość o wartości tekstowej
breadcrumbwłaściwość o BreadcrumbListwartości

Używanie tekstu jest łatwe, ale nie ma uporządkowanej struktury (trudniejsze do przeanalizowania przez konsumentów).
Korzystanie BreadcrumbListjest bardziej złożone, ale pozwala wyraźnie określić wszystko, co jest potrzebne (łatwiejsze do przeanalizowania dla konsumentów).

Biorąc twój przykład, używanie BreadcrumbListmoże wyglądać następująco:

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

(Może być konieczne przeniesienie elementów, jeśli białe znaki są problemem).

— unor
źródło