Typo3 Add a Google Breadcrumb Rich Card

If you like to improve the search experience of you website you may want to add a rich card. One of these rich cards are the breadcrumbs. First, you need to decide which format you like: microdata or JSON-LD.

These snippets will generate a microdata that you can also use as your standard breadcrumb:

lib.richcard_breadcrumb {
 special = rootline
 special.range = 1 | 7
 wrap = <ol itemscope itemtype="http://schema.org/BreadcrumbList"> | </ol>

 1 = TMENU
 1 {
   NO.ATagParams = itemprop="item"
   NO.allWrap =<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">|</li>
   NO.stdWrap.wrap = <span itemprop="name">|</span>
   NO.after.cObject = COA
   NO.after.cObject {
    5 = TEXT
    5.dataWrap = <meta itemprop="position" content="{register:count_MENUOBJ}|" />
   }
 }
}

If you do not want to show a breadcrumb or like the JSON-LD more just use this code:

lib.richcard_breadcrumb = HMENU
lib.richcard_breadcrumb {
 special = rootline
 special.range = 1 | 7 
 wrap = { "@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": | ] }
 1 = TMENU
 1 { 
  NO.allWrap = [ || ,| 
  NO.doNotLinkIt = 1
  NO.stdWrap.wrap = { "@type": "ListItem", "item": { | }
  NO.stdWrap.cObject = COA
  NO.stdWrap.cObject {
   10 = TEXT
   10 {
    stdWrap.typolink.parameter.field = uid
    stdWrap.typolink.forceAbsoluteUrl = 1
    stdWrap.typolink.returnLast = url
    htmlSpecialChars = 1
    wrap = "@id": "|",
   }
   20 = TEXT
   20 {
    field = title
    wrap = "name": "|"
   } 
  } 
  NO.after.cObject = COA
  NO.after.cObject {
   5 = TEXT
   5.dataWrap = ,"position": {register:count_MENUOBJ} | }
  }
 } 
}