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

  • Date of update: 2025-10-25
  • Reading time: 10 min.

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.

Sign up for a free consultation

Fill out the form