How to add Breadcrumbs Schema.org to cms pages (Copy Paste)

Use this only if the Breadcrumbs visible to the user (Step 3 Below).

A breadcrumb trail on a page indicates the page’s position in the site hierarchy. A user can navigate all the way up in the site hierarchy, one level at a time, by starting from the last breadcrumb in the breadcrumb trail.
image
Cómo añadir etiquetas de ruta de exploración (BreadcrumbList) | Centro de la Búsqueda de Google  |  Documentation  |  Google for Developers

1/4. Copy-Paste

Copy ==> Paste – custom code - Before body/head under blogPost collection page.

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement":
 [
  {
   "@type": "ListItem",
   "position": 1,
   "item":
   {
    "@id": "https://www.my-base-url.co.uk",
    "name": "Home"
    }
  },
  {
   "@type": "ListItem",
  "position": 2,
  "item":
   {
     "@id": "https://www.my-base-url.co.uk/post",
     "name": "Blog"
   }
  },
  {
   "@type": "ListItem",
   "position": 3,
   "item":
   {
    "@id": "https://www.my-base-url.co.uk/post/{{ post-name-feild }}",
    "name": "{{post-name-feild}}"
    }
  }
],
 "itemListOrder": "Descending",
"numberOfItems": "3"
}
</script>

2/4. Change/Bind data

Manually change the base URL (your domain)
+
Collection URL


+
Bind last Breadcrumbs item slug + name

3/4. Designer - Add BreadcrumbList element

Under collection page
image

Add BreadcrumbList

4/4. Publish and test:

Related:

4 Likes

And here is how to change the schema structure itself according to a CMS field: