Breadcrumbs and Structured Data, without a visible > on the page, plus nesting options

Question

When I add breadcrumbs soon (with microdata) - do I need to write

link1 > link2 > link3 (as in the google example code) in the visible text on the page, or will

link1 link2 link3 without the > symbol still appear like this in the search results

Books > Poetry > Modern Poetry

If it must be included can I somehow mark the > symbol as not visible/hidden using CSS?

See example website not showing the > but using breadcrumbs that do, without > in the example code.

Answer 1

There is no need for the >symbol regarding to the Google Structured Data page about Breadcrumbs.

Just use a markup as shown in the example:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/arts">
            <span itemprop="name">Arts</span>
        </a>
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/arts/books">
            <span itemprop="name">Books</span>
        </a>
    </li>
    ...
</ol>

Google will then insert the > in the search results by it's own.

If you want to use a separator just place them in raw <li></li> elements without the itemprop markup.