Do you really need breadcrumbs in WordPress and how to implement them correctly?

Why use breadcrumbs

They reveal hierarchy: Home → Section → Subsection → Current page. Users can jump up a level quickly, and search engines better understand site structure. In Google, the path may appear in SERPs, often improving CTR.

Placement and appearance

• Position: below the site header, above H1 and main content.
• Last item: not a link; add aria-current="page" for accessibility.
• Separator: / or ›; keep styling consistent site-wide.
• Mobile: single line with truncation (text-overflow: ellipsis); avoid duplicates.

WordPress implementation (universal)

1) SEO plugin (Rank Math or Yoast)

• Rank Math: shortcode or widget. Ensure BreadcrumbList schema is enabled.
• Yoast SEO: function yoast_breadcrumb() (PHP) or block/widget. Verify schema output.
• Important: use one mechanism (SEO or theme) to prevent duplication.

2) Theme (e.g., Kadence)

• In Customizer → General → Breadcrumbs enable breadcrumbs and set position: Before Content or within the page title area.
• If using theme breadcrumbs, do not add them again via SEO plugin/builder.

3) Builder (Elementor / Elementor Pro)

• Add the SEO plugin’s breadcrumb widget or an HTML block with the shortcode.
• Place it above H1 in archive/single templates. Keep styling consistent.

Schema.org (BreadcrumbList)

Provide valid structured data. Each item must have position, name, and item (URL). Most SEO plugins output JSON-LD automatically; verify with Rich Results Test.

Quality checks

1. Blog post: Home → Category → Post (last item not linked).
2. Static page: Home → Page (nested pages include their parents).
3. WooCommerce: Home → Shop → Category → Product.
4. Only one breadcrumb trail in the DOM; no dead links.

Common pitfalls

• Duplication: enabled in both theme and SEO plugin.
• Wrong order: “Post → Category” instead of “Category → Post”.
• No schema: missing JSON-LD or incorrect position values.
• Mobile UX: multi-line wrapping; low link contrast.

Styling (minimal CSS)

Mobile-friendly snippet:

.breadcrumbs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.875rem;margin:.5rem 0}
.breadcrumbs a{text-decoration:none}

Multilingual (WPML/Polylang)

• Category/page names reflect the active language.
• Links point to language-matched URLs.

Publication checklist

• Placed above H1; only one mechanism; last item unlinked.
• BreadcrumbList schema valid in testing tools.
• Readable on mobile; consistent with theme styling.