发表新帖
发表新帖

How to implement schema.org markup for a breadcrumb?

后端 未结
关注
9 891
自闭症患者
自闭症患者 2020-12-12 17:45

There isn\'t much info about implementing a breadcrumb using schema.org markup. So far, I could get two official documents -- one showing this:



        

                      

              相关标签:
9条回答
  • 傲寒
    2020-12-12 17:54

    Having breadcrumb schema in place can have a massive impact on your site page’s Click Through Rate (CTR) from search.

    Below are the examples How you can Implement Breadcrumb List Schema on your page

    1. Via HTML

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

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://organicdigital.co/services/"><span itemprop="name">Services</span></a>
        <meta itemprop="position" content="2" />
    </li>

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://organicdigital.co/services/structured-data.php"><span
                itemprop="name">Structured Data</span></a>
        <meta itemprop="position" content="3" />
    </li>
</ul>

    2. Via JSON-LD

    You can also check, implemented schema is error free and correct on google structured-data test tool.

    Eg : https://search.google.com/structured-data/testing-tool?utm_campaign=devsite&utm_medium=jsonld&utm_source=breadcrumb

    <html>
<head>
<title>The title of the page</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": "Authors",
    "item": "https://example.com/books/authors"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Ann Leckie",
    "item": "https://example.com/books/authors/annleckie"
  },{
    "@type": "ListItem",
    "position": 4,
    "name": "Ancillary Justice",
    "item": "https://example.com/books/authors/ancillaryjustice"
  }]
}
</script>
</head>
<body>
</body>
</html>
    0 讨论(0)
  • 有刺的猬
    2020-12-12 17:56

    According to Google Webmaster Central Help Forum, it is not recommended by experts to use the schema.org breadcrumb markup for the time being,it's seems that "there is some sort of glitch in the schema.org breadcrumb structure". Instead, it is exhorted to use the data-vocabulary.org breadcrumb markup, which Google and the other search engines can easily read as well.

    A data-vocabulary.org Breadcrumb markup example:

    <div>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/" itemprop="url">
      <span itemprop="title">example</span>
    </a> >
  </span>  
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fashion/" itemprop="url">
      <span itemprop="title">Fashion</span>
    </a> >
  </span>  
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fashion/women/" itemprop="url">
      <span itemprop="title">Women</span>
    </a> >
  </span>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fashion/women/boots/" itemprop="url">
      <span itemprop="title">Boots</span>
    </a>
  </span>
</div>
    0 讨论(0)
  • 别那么骄傲
    2020-12-12 17:57

    The first document is the definition, so don't worry about that. It just says that breadcrumb is a text property of WebPages.

    The example on http://schema.org/WebPage is the one you want to use and understand. It sets the breadcrumb snippet to a single text field saying "Books > Literature & Fiction > Classics".

    You would do that like this:

    <body itemscope itemtype="http://schema.org/WebPage">
  <span id="breadcrumbs" itemprop="breadcrumb">
      <a rel="home" href="http://example.com">
          <span>Noob Archive</span>
      </a> » 
      <span>
          <a href="http://example.com/topic/html/">
              <span>HTML</span>
          </a> » 
          <strong>Best Practices: Markup for Setting up Breadcrumbs on Web Pages</strong>
      </span>
  </span>
</body>

    The result would be "Noob Archive » HTML » Best Practices: Markup for Setting up Breadcrumbs on Web Pages".

    You can use http://linter.structured-data.org/ to check how your item properties are parsed and http://diveintohtml5.ep.io/extensibility.html to find out more about the parse rules.

    0 讨论(0)
  • 没有蜡笔的小新
    2020-12-12 17:59

    schema.org gives the following example :

    <div itemprop="breadcrumb">
  <a href="category/books.html">Books</a> >
  <a href="category/books-literature.html">Literature & Fiction</a> >
  <a href="category/books-classics">Classics</a>
</div>

    Source : http://schema.org/WebPage (example section, microformat tab)

    Other resource : http://www.w3.org/wiki/WebSchemas/Breadcrumbs

    0 讨论(0)
  • 难免孤独
    2020-12-12 18:06

    schema.org finally released a new breadcrumb markup system in the schema.org v1.92 update (released 2014-12-11). The new breadcrumb system is an extension of ItemList called BreadcrumbList. Each BreadcrumbList contains multiple ListItem elements. This allows for multiple breadcrumb trails per page, separation of each individual link as a separate ListItem, and provides a wrapper around the entire breadcrumbs. This should satisfy pretty much every use case.

    Here is the Microdata example from schema.org:

    <ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
› <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

    Google's recently redesigned Structured Data Testing Tool parses this markup properly. However, the redesign of the tool dropped the search preview, so it's difficult to say how Google will display breadcrumbs with this markup in Google search results (or if Google will use this data at all). The linter.structured-data.org parses this new markup correctly as well, but as mentioned there, "This preview is only shown as a example of what a search engine might display. It is to the discretion of each search engine provider to decide whether your page will be displayed as an enhanced search result or not in their search results pages."

    Google Webmaster Tools recently added the ability to track how well your structured data is being indexed. It doesn't show which structured data is being used in search results, but it does show what data is being indexed on which pages, and also shows any errors in your structured data.

    0 讨论(0)
  • 面向向阳花
    2020-12-12 18:06

    The answer by @somori is incorrect -- but that is because the documentation on correctly marking up breadcrumbs with microdata / schema.org is widely incorrect.

    EACH breadcrumb needs to be declared with an itemprop property, you can't just wrap them with itemprop="breadcrumb" in the containing div or span and use itemprop="child" in the nested divs.

    More info here:

    http://lists.w3.org/Archives/Public/public-vocabs/2012Jan/0016.html

    Do it like this, to get your breadcrumbs to show up in SERPs:

    <div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

  <span class="breadcrumb-lead">YOU ARE HERE:</span><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Homepage</span></a>

  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;"><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Category One</span></a></div>

  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;"><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Category Two</span></a></div>

</div>

    Then test in google structured data testing tool:

    http://www.google.com/webmasters/tools/richsnippets

    0 讨论(0)
 看不清?
提交回复
热议问题