On-Page

Breadcrumbs

Breadcrumbs are a navigation pattern that shows the hierarchical path from the homepage to the current page, helping users understand their location within the site structure.

Breadcrumbs improve user experience by providing context and easy navigation to parent sections. Google displays them in search results when BreadcrumbList structured data is present, replacing the URL display.

Implement breadcrumbs with both visible UI elements and `BreadcrumbList` JSON-LD structured data. The structured data must match the visible breadcrumbs for consistency.

Indxel generates BreadcrumbList schema via `getBreadcrumbSchema()` — pass an array of `{ name, url }` objects and it outputs valid JSON-LD that qualifies for the breadcrumb rich result.

Example

// Using Indxel's structured data helper
import { getBreadcrumbSchema } from "@/lib/structured-data";

const breadcrumbs = getBreadcrumbSchema([
  { name: "Home", url: "https://example.com" },
  { name: "Blog", url: "https://example.com/blog" },
  { name: "SEO Guide", url: "https://example.com/blog/seo-guide" },
]);

Stop shipping broken SEO

Indxel validates your metadata, guards your CI/CD pipeline, and monitors indexation — so you never miss an SEO issue again.