WordPress Development
WordPress Breadcrumbs: How to Add Them, Style Them, and Improve SEO
Breadcrumbs improve user orientation, add BreadcrumbList schema, and can increase search CTR by 5-15%. Here is how to implement them correctly on WordPress.
Breadcrumbs are a secondary navigation system that shows a visitor their current location within your site’s hierarchy. They improve user orientation, reduce bounce rate, and add a significant SEO benefit by generating BreadcrumbList structured data that enables breadcrumb display directly in Google search results.
What breadcrumbs do for your site
A breadcrumb trail (Home › WordPress SEO › How to Add Schema Markup) appears below the header on each page and shows the visitor the path from the homepage to where they currently are. It serves three functions simultaneously:
- Navigation: visitors can click any breadcrumb item to move up the site hierarchy without using the browser back button
- Orientation: visitors who arrive directly on a deep page (from Google, a shared link) immediately understand where they are in relation to the rest of your content
- SEO: breadcrumbs generate BreadcrumbList schema that Google uses to display the breadcrumb path instead of the full URL in search results, improving CTR
Enabling breadcrumbs with Rank Math
Rank Math is the recommended approach — it generates both the visual breadcrumb HTML and the BreadcrumbList JSON-LD schema simultaneously with minimal configuration.
Go to Rank Math › Dashboard › Modules and ensure ‘Breadcrumbs’ is enabled.
Go to Rank Math › General Settings › Breadcrumbs. Configure the separator character, whether to show the home link, the home label text, and whether to include the category in post breadcrumbs.
Rank Math outputs the breadcrumb HTML via a function or shortcode. Add <?php rank_math_the_breadcrumbs(); ?> to your child theme’s single.php, page.php, or archive.php above the content area. Or use the Rank Math Breadcrumb block in Gutenberg.
Open any post or page and run it through Google’s Rich Results Test. Look for BreadcrumbList in the detected structured data. Google will show this breadcrumb path in search results within the next crawl cycle.
Enabling breadcrumbs with Yoast SEO
Yoast SEO also includes a breadcrumb system. Enable it in Yoast SEO › Search Appearance › Breadcrumbs › toggle ‘Enable breadcrumbs for your theme’. Then add <?php yoast_breadcrumb('<p id="breadcrumbs">','</p>'); ?> to your theme template files.
Enabling breadcrumbs with Elementor
Elementor Pro includes a Breadcrumbs widget in the Theme Builder elements. It automatically connects to your SEO plugin’s breadcrumb output (Rank Math or Yoast) and can be placed anywhere in your header or page template with full design control.
Adding breadcrumbs to every page via Elementor’s Theme Builder is the cleanest approach — design it once in your Single Post template and it appears consistently across all posts without editing individual templates.
Styling WordPress breadcrumbs
Default breadcrumb styling is minimal. Customise the appearance with CSS targeting your SEO plugin’s breadcrumb HTML. Rank Math wraps breadcrumbs in .rank-math-breadcrumb; Yoast uses #breadcrumbs. Common styling improvements:
- Reduce font size to 12-13px — breadcrumbs are secondary navigation, not primary content
- Use a muted text colour (#888 or similar) to visually subordinate breadcrumbs to the main heading
- Style the separator character with colour to create visual hierarchy between path segments
- Add a small icon before ‘Home’ using a CSS pseudo-element or an SVG home icon
Breadcrumbs and SEO — what actually happens in search results
When Google detects valid BreadcrumbList schema on a page, it can replace the full URL in the search listing with a formatted breadcrumb path. Instead of:
https://www.sasolutionspk.com/website-development/wordpress-seo-guide/how-to-add-schema-markup/
Google may display:
sasolutionspk.com › WordPress SEO › Schema Markup
This breadcrumb display is more readable and more click-worthy than a full URL. Studies consistently show a 5-15% improvement in CTR for pages displaying breadcrumbs in search results versus full URLs.
When not to use breadcrumbs
- Single-level sites (all pages are direct children of the homepage) — breadcrumbs add no orientation value
- Landing pages — breadcrumbs provide exit paths from a page designed to keep visitors focused on one action
- Homepages — the home page is the breadcrumb root, not a breadcrumb destination
Need breadcrumbs and structured data configured on your WordPress site?
Simple Automation Solutions configures schema markup, breadcrumbs, and full technical SEO for WordPress sites worldwide.
Frequently asked questions
Do breadcrumbs always appear in Google search results?+
No — Google uses breadcrumb data when it detects valid BreadcrumbList schema, but it may choose to display the URL instead based on its own quality signals. Valid schema increases the likelihood of breadcrumb display but does not guarantee it. Ensure your BreadcrumbList schema is complete (all levels of hierarchy represented), correctly formatted, and matches the visible breadcrumb on the page.
Should breadcrumbs show categories or page hierarchy?+
For blogs and content sites, category-based breadcrumbs (Home › Category › Post) are the most useful. For e-commerce (Home › Electronics › Laptops › Product), category hierarchy reflects the shopping journey. For utility pages without a category (About, Contact, Privacy Policy), a simple Home › Page Name breadcrumb is sufficient. Rank Math and Yoast handle all of these cases correctly by default.
What is the difference between breadcrumbs and site navigation?+
Site navigation is your primary wayfinding system — the horizontal menu linking to main sections of your site. Breadcrumbs are a secondary, contextual navigation showing the current page’s location in the hierarchy. They complement each other: navigation tells visitors where they can go; breadcrumbs tell them where they are. Both are present on most well-structured content sites.
