breadcrumb-generator

Generate semantic HTML and BreadcrumbList JSON-LD for breadcrumb navigation.

872|122|Updated Feb 26, 2026
One-click install
npx skills add https://github.com/kostja94/marketing-skills --skill breadcrumb-generator
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: breadcrumb-generator
Source: https://github.com/kostja94/marketing-skills/tree/main/skills/components/navigation/breadcrumb
Command: npx skills add https://github.com/kostja94/marketing-skills --skill breadcrumb-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps implement and optimize breadcrumb navigation, improving user experience and search engine understanding of site structure.

Core Features & Use Cases

  • UI Implementation: Guides the creation of visual breadcrumb trails (e.g., Home > Category > Page).
  • Schema Markup: Facilitates the addition of BreadcrumbList JSON-LD for rich results.
  • SEO & UX: Improves internal linking, crawlability, and user site hierarchy comprehension.
  • Use Case: For an e-commerce site, ensure product pages display a clear breadcrumb trail like "Home > Electronics > Smartphones > iPhone 15" and include the corresponding BreadcrumbList schema.

Quick Start

Generate the semantic HTML and BreadcrumbList JSON-LD for a product page with the path Home > Category > Product.

Frequently Asked Questions about breadcrumb-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate BreadcrumbList JSON-LD schema for my website?

To generate BreadcrumbList JSON-LD schema, you define your site hierarchy path and the tool outputs the corresponding semantic HTML and structured JSON-LD markup to enhance search engine visibility and rich results.

What is the best way to implement breadcrumb navigation for e-commerce SEO?

The best way to implement breadcrumb navigation for e-commerce SEO is creating clear visual trails like Home > Electronics > Smartphones > Product, paired with BreadcrumbList JSON-LD schema to improve crawlability and user experience.

Does breadcrumb schema markup improve user experience and site hierarchy visibility?

Breadcrumb schema markup improves user experience and site hierarchy visibility by providing search engines with structured internal linking data, which helps users and crawlers comprehend the categorical depth of your pages.

How do I add semantic HTML breadcrumbs to my blog pages?

You add semantic HTML breadcrumbs to blog pages by following structural best practices for placement and accessibility, generating a clear navigation trail that reflects your content hierarchy from home to the current post.

What are the schema requirements for breadcrumb navigation across different site types?

Schema requirements for breadcrumb navigation mandate proper BreadcrumbList JSON-LD implementation, ensuring each hierarchical step is accurately defined to meet search engine structured data guidelines across various site types.