How can I create breadcrumbs with Google support?

Question

I have never dealt with SEO before, and I found out recently that breadcrumbs have a connection with SEO. I would like to use the JSON-LD method, but I do not understand something - my question is:

JSON-LD generates breadcrumb on my page, so should I create correct JSON code and that's all?

or

I can generate breadcrumbs any way I want to and Google doesn't care about my HTML, but additionally/separately I have to generate JSON-LD for Google support with the same data?

Answer 1

You need to have regular breadcrumbs in your HTML. To make them machine-readable, you either add attributes to this HTML (using Microdata or RDFa) or you add an invisible data block that duplicates the data (using JSON-LD).

Using JSON-LD, you would have something like this:

<!-- regular, visible breadcrumbs in HTML -->
<ol>
</ol>

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "BreadcrumbList"
}
</script>

Using Microdata, you would have something like this:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
</ol>

Using RDFa, you would have something like this:

<ol typeof="schema:BreadcrumbList">
</ol>