Yoast Breadcrumbs: Complete Step-by-Step Guide (2025)

Yoast Breadcrumbs: Complete Step-by-Step Guide (2025). This complete guide teaches you how to enable, insert, and customize Yoast breadcrumbs in any WordPress theme. Learn step-by-step for GeneratePress, Astra, Block Themes, and WooCommerce, plus CSS, hooks, shortcode, schema, performance, and troubleshooting. Everything explained in a practical way.

Why You Should Use Yoast Breadcrumbs

Breadcrumbs show a navigation path: Home › Blog › SEO › Yoast Breadcrumbs Guide. They are valuable for three reasons:

1. User Experience (UX): visitors instantly understand where they are and can navigate upward.
2. SEO: Yoast automatically generates Schema.org BreadcrumbList (JSON-LD). Google uses this to display breadcrumb trails in search results instead of long URLs.
3. Lower bounce rate: internal navigation encourages visitors to explore further.

Breadcrumbs are not a menu replacement. They are an SEO and usability enhancement especially for blogs, eCommerce stores, or sites with many categories.

1) Enabling Yoast Breadcrumbs

1. Go to SEO → Settings → Advanced → Breadcrumbs.
2. Enable Show breadcrumbs.
3. Configure:
   • Separator (›, /, ).
   • Homepage anchor text (usually “Home”).
   • Show blog page (if you have a blog archive page).
   • Taxonomy to show (usually Category for posts).
   • Link last breadcrumb (recommended: disabled, so the current page is plain text).
4. Save settings.

Pro tip: always set the Primary category in Yoast’s sidebar for each post. This ensures Yoast uses the right category in your breadcrumb path.

2) Adding Breadcrumbs in Your Theme (Template Code Method)

Yoast won’t display breadcrumbs automatically you must place its function in your theme.

Basic code (display above the title):

<?php
if ( function_exists( 'yoast_breadcrumb' ) && ! is_front_page() ) {
    yoast_breadcrumb( '<nav class="breadcrumbs" aria-label="Breadcrumb">','</nav>' );
}
?>

Where to put this:

• single.php → right under get_header();, above the title.
• page.php → under header, before title.
• archive.php → at the top of archive content.
• header.php → if you want breadcrumbs globally (wrap in conditions to avoid homepage).

3) Adding Breadcrumbs with Hooks (GeneratePress, Astra, Kadence, etc.)

Preferred method keeps theme updates safe.

GeneratePress

add_action( 'generate_before_content', function () {
    if ( function_exists( 'yoast_breadcrumb' ) && ! is_front_page() ) {
        yoast_breadcrumb( '<nav class="breadcrumbs" aria-label="Breadcrumb">','</nav>' );
    }
} );

Astra

add_action( 'astra_entry_top', function () {
    if ( function_exists( 'yoast_breadcrumb' ) && ! is_front_page() ) {
        yoast_breadcrumb( '<nav class="breadcrumbs" aria-label="Breadcrumb">','</nav>' );
    }
} );

Kadence

add_action( 'kadence_before_content', function () {
    if ( function_exists( 'yoast_breadcrumb' ) && ! is_front_page() ) {
        yoast_breadcrumb( '<nav class="breadcrumbs" aria-label="Breadcrumb">','</nav>' );
    }
} );

Tip: Each theme has its own hook map. Use your theme docs or “Code Snippets” plugin to test hook placements.

4) Shortcode for Elementor / Gutenberg / FSE

Yoast has no built-in shortcode. Create one:

add_shortcode( 'yoast_breadcrumbs', function () {
    if ( function_exists( 'yoast_breadcrumb' ) && ! is_front_page() ) {
        return yoast_breadcrumb( '<nav class="breadcrumbs" aria-label="Breadcrumb">','</nav>', false );
    }
    return '';
} );

• In Gutenberg, insert a Shortcode block: [yoast_breadcrumbs].
• In Elementor, use Shortcode widget: [yoast_breadcrumbs].
• In Site Editor (FSE), place a Shortcode block in your template.

5) Styling Breadcrumbs (CSS)

.breadcrumbs {
  font-size: 14px;
  margin: 12px 0 18px;
  color: #555;
}
.breadcrumbs a {
  color: #0073aa;
  text-decoration: none;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}

Optional: Add separators with CSS only

.breadcrumbs a + a::before,
.breadcrumbs span + a::before,
.breadcrumbs a + span::before {
  content: "›";
  margin: 0 6px;
  opacity: .6;
}

6) Customizing with Filters

Yoast offers developer filters:

Change separator

add_filter( 'wpseo_breadcrumb_separator', function() {
    return ' › ';
} );

Remove “Blog” crumb

add_filter( 'wpseo_breadcrumb_links', function( $links ) {
    foreach ( $links as $i => $link ) {
        if ( strtolower( $link['text'] ) === 'blog' ) {
            unset( $links[$i] );
        }
    }
    return array_values( $links );
} );

Add custom crumb (e.g., “Shop” before products)

add_filter( 'wpseo_breadcrumb_links', function( $links ) {
    if ( is_singular( 'product' ) ) {
        array_splice( $links, 1, 0, [
            [ 'url' => site_url( '/shop/' ), 'text' => 'Shop' ],
        ] );
    }
    return $links;
} );

7) WooCommerce: Replace Default Breadcrumb with Yoast

1. Remove WooCommerce breadcrumb:

remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );

2. Add Yoast instead:

add_action( 'woocommerce_before_main_content', function () {
    if ( function_exists( 'yoast_breadcrumb' ) ) {
        yoast_breadcrumb( '<nav class="breadcrumbs" aria-label="Breadcrumb">','</nav>' );
    }
}, 20 );

8) Best Practices

• Don’t show breadcrumbs on homepage.
• Always set Primary category in posts/products.
• Keep labels short (“Home”, “Shop”, not long slugs).
• For multi-language sites (WPML/Polylang), make sure breadcrumbs are translated.
• Avoid double breadcrumbs (disable theme/Woo ones).

9) Troubleshooting

Breadcrumbs not showing?

• Check Yoast settings → Breadcrumbs enabled.
• Ensure code is inside template/hook.
• Test with shortcode [yoast_breadcrumbs].

Duplicate breadcrumbs?

• Disable theme or WooCommerce default breadcrumbs.

Wrong category displayed?

• Set Primary category in Yoast sidebar.

Breadcrumbs not in Google results?

• Google decides display. Ensure breadcrumbs schema is output (Yoast handles this).

Quick Copy-Paste Recipes

Universal insert

if ( function_exists( 'yoast_breadcrumb' ) && ! is_front_page() ) {
    yoast_breadcrumb( '<nav class="breadcrumbs" aria-label="Breadcrumb">','</nav>' );
}

GeneratePress hook

add_action( 'generate_before_content', function () {
    if ( function_exists( 'yoast_breadcrumb' ) ) {
        yoast_breadcrumb( '<nav class="breadcrumbs" aria-label="Breadcrumb">','</nav>' );
    }
} );

Shortcode

[yoast_breadcrumbs]

WooCommerce replace

remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
add_action( 'woocommerce_before_main_content', function () {
    yoast_breadcrumb( '<nav class="breadcrumbs" aria-label="Breadcrumb">','</nav>' );
}, 20 );

Final Thoughts

Yoast breadcrumbs improve navigation, SEO clarity, and Google’s SERP display. Whether you use classic themes, GeneratePress, Astra, WooCommerce, or Full Site Editing, the process is straightforward: enable in Yoast, insert with code/hook/shortcode, style with CSS, and customize with filters.

Done correctly, breadcrumbs enhance usability, encourage deeper navigation, and improve click-through rates from search results. A small step with a big impact on both SEO and user satisfaction.

🔔 For more tutorials like this, consider subscribing to our blog.
📩 Do you have questions or suggestions? Leave a comment or contact us!
🏷️ Tags: Yoast SEO, breadcrumbs, WordPress SEO, GeneratePress, Astra Theme, WooCommerce, Gutenberg, Elementor, Schema.org, WordPress Hooks
📢 Hashtags: #YoastSEO, #Breadcrumbs, #WordPress, #SEOTips, #GeneratePress, #Astra, #WooCommerce, #Gutenberg, #Elementor, #TechnicalSEO