Creating microdata breadcrumb

Community resources General
1

Im trying to create a breadcrumb accrding schema.org without the use of a embedded code. This is the example of shema.org BreadcrumbList - Schema.org Type

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

The problem is that im unable to add <meta itemprop="position" content="1" /> Any suggestions to add this?

Here is my current example; https://preview.webflow.com/preview/pseo?utm_source=pseo&preview=4b738de8dad62d2d1ab8b91f0b28ff03

3

Âą the idea. By its really easier to solve this by embed code (Also for CMS pages - it will be very hard to solve this without embed or custom json-ld).

But if you insist (Nice way to learn schema but tidy & not DRY for large sites):

  1. Create list (ol):
    image

  2. Add this att for the list:
    image

  3. For each List item {

— Attributes for the li:
image

— Add link:
image
------ Attributes for the link
image

— Add span (Select the link (click twice) and “add span”)
image
webflow tree:
image

Add attr for the span:
image
}

meta

No way to add the meta inside webflow list (Maybe google will recognize the path anyway).

<meta itemprop="position" content="1" />

The divider:

About the divider - do not use this as > (As live text) (Its not part of the link). For each list item add extra left padding and use icon as svg-arrow background image

image
image943×565 36.5 KB

Add combo class for the last item (remove the BG image and left padding)
image

Related forum Q:

Related article:

4

A better way: create breadcrumb by webflow editor.

And copy-paste RDFA - before body (Only change the values):
image

5

the meta tag can now be achieved with a custom element.

Screenshot 2024-09-03 at 2.12.01 PM

1 Like