BreadcrumbList is not working

1

I have followed Google to create the rich snippet of breadcrumbList but it is showing these results: https://i.imgur.com/wYTqfZ7.png for this website

Please check the code below here and guide how to correct it.

<script type="application/ld+json">
{
  "@context": "https://schema.org/", 
  "@type": "BreadcrumbList", 
  "itemListElement": [{
    "@type": "ListItem", 
    "position": 1, 
    "name": "Home",
    "item": "https://xenex-media.com.au/"  
  },{
    "@type": "ListItem", 
    "position": 2, 
    "name": "About Us",
    "item": "https://xenex-media.com.au/gold-coast-web-designers/"  
  },{
    "@type": "ListItem", 
    "position": 3, 
    "name": "Our Services",
    "item": "https://xenex-media.com.au/digital-marketing-agency-gold-coast/"  
  },{
    "@type": "ListItem", 
    "position": 4, 
    "name": "Contact Us",
    "item": "https://xenex-media.com.au/contact-us/"  
  }]
}
</script>Preformatted text
2

It would probably help if you could explain what language/framework you are using; what you’ve posted makes no sense on its own without this information.

3

I think this is right…!

4

I have placed this code as the ‘BreadcrumbList’ but it is showing like this: https://i.imgur.com/zGDirKn.png

which is not right …

5

Its not right because a blog post should show the category https://i.imgur.com/zGDirKn.png instead of ‘About us’ etc …

6

Hahahaha, oh boy oh boy, the irony levels here are off the charts: I’m sorry about this but you’re on your own here, I’m out, you’ll need to figure it out yourself I think.