Breadcrumbs

Add a breadcrumb trail to your pages, control where it appears, and keep the visible path aligned with breadcrumb schema.

Overview

Breadcrumbs helps visitors understand where the current page sits in your site structure and gives search engines clearer hierarchy signals.

You configure it in Airygen SEO -> Settings -> Breadcrumbs.

This module is especially useful for sites with parent pages, category archives, search results, or deep content paths that users should be able to follow back up.

Output Methods

Breadcrumbs supports both manual placement and automatic content injection.

Manual output

Turn on Enable manual breadcrumbs output when you want to place the trail yourself.

  • Use the Template function when you want breadcrumbs inside your theme template.
  • Use the Shortcode when you want breadcrumbs inside post content, a shortcode block, or another area that accepts shortcodes.
  • Use the Block when you want to place breadcrumbs visually in the block editor.

Template function:

<?php if ( function_exists( 'airygen_the_breadcrumbs' ) ) { airygen_the_breadcrumbs(); } ?>

Shortcode:

[airygen_breadcrumbs]

Block:

<!-- wp:airygen/breadcrumb /-->

Automatic injection

Turn on Enable automatic breadcrumbs injection when you want Airygen SEO to insert the trail into the main content area for you.

  • Insert position lets you place the trail Before content or After content.
  • Automatic injection is a good fit when you want a consistent breadcrumb location across many posts.
  • Manual placement is a better fit when you need exact control over the breadcrumb position in a theme or page layout.

If you enable manual output and automatic injection at the same time, check the live page carefully so the trail does not appear twice.

Settings

The page is organized into Settings, Layout, and Preview.

Settings tab

Use this tab to decide how breadcrumbs are rendered and which items appear in the trail.

Output controls

  • Enable manual breadcrumbs output unlocks the Template function, Shortcode, and Block snippets for breadcrumb rendering.
  • Enable automatic breadcrumbs injection inserts breadcrumbs into post content based on your chosen location.
  • Insert position controls whether automatic output appears Before content or After content.

Hierarchy

These controls decide how much structure appears in the breadcrumb chain.

  • Show home link starts the trail with your homepage label and homepage URL.
  • Show blog link on archives inserts the Posts page before archive items when your site uses a static posts page.
  • Show ancestor pages adds parent pages for hierarchical content types such as pages and hierarchical custom post types.
  • Hide taxonomy parents removes parent terms from category and taxonomy trails when you want a shorter path.
  • Show current page includes the current page as the final breadcrumb and also affects the JSON-LD breadcrumb list.
  • Show pagination appends the current page number on paged archives.
  • Separator defines the symbol shown between breadcrumb items.
  • Prefix adds text before the trail, such as a short “You are here” style label.

Labels

Use these fields to match the breadcrumb wording to your site tone.

  • Home label changes the text used for the homepage breadcrumb.
  • Archive label changes the label used on archive views.
  • Search results label changes the label shown on search result pages.
  • 404 label changes the wording shown on not found pages.

Layout tab

Use this tab to style the breadcrumb container and the trail text itself.

Container style

  • Border width changes the thickness of the breadcrumb container border.
  • Border color changes the border color.
  • Padding changes the inner spacing around the trail.
  • Container background color changes the background behind the breadcrumbs.

Trail style

  • Font size changes the breadcrumb text size.
  • Text color changes the non-link text color.
  • Link color changes the linked breadcrumb color.
  • Underline links turns link underlines on or off.

How to Use

  1. Open Airygen SEO -> Settings -> Breadcrumbs.
  2. In the Settings tab, decide whether you want Enable manual breadcrumbs output, Enable automatic breadcrumbs injection, or one primary method only.
  3. If you want theme-level placement, turn on Enable manual breadcrumbs output and copy the Template function snippet into the template area where the trail should appear.
  4. If you want editor-level placement, keep Enable manual breadcrumbs output on and insert either the Shortcode or the Block in the content area where the trail should appear.
  5. If you want automatic placement, turn on Enable automatic breadcrumbs injection and choose the Insert position that best fits your content layout.
  6. In Hierarchy, choose whether the trail should show the home link, the blog link on archives, ancestor pages, the current page, and pagination details.
  7. Set a readable Separator and an optional Prefix so the trail matches your site tone.
  8. In Labels, customize the wording for home, archive, search, and 404 views.
  9. Open Layout and adjust the container border, padding, colors, and trail text styling so the breadcrumb trail fits your theme.
  10. Open Preview, switch between Laptop, Tablet, and Cellphone, and review the sample trail before saving.
  11. Save the settings and test the live frontend on a post, an archive page, a search page, and a 404 page.

After saving, verify these items on the live site:

  • The breadcrumb trail appears only once in each location.
  • The visible trail matches the page hierarchy you want users to follow.
  • The current page appears in the trail only when Show current page is enabled.
  • The live styling still looks correct after your theme CSS loads.

Preview and Live Output

The Preview tab shows a simplified breadcrumb example using your current style settings.

  • The preview includes a Laptop, Tablet, and Cellphone device switcher.
  • The preview reflects your current border, spacing, color, and text settings.
  • The screen also shows generated HTML and CSS samples so you can review the sample structure.

The live site can still look different from the preview.

  • The real breadcrumb trail depends on the actual page type, ancestor structure, taxonomy path, and search or 404 context.
  • The final appearance can still be affected by your active theme, custom CSS, and surrounding page layout.
  • If you use manual placement and automatic injection together, the live page can show duplicate trails even though the preview looks clean.

After saving, check a real post, a real archive, a search results page, and a 404 page so you can confirm the visible trail and schema behavior on the frontend.

SEO Benefits

Breadcrumbs make page hierarchy easier for search engines to understand and help visitors move from deep content back to broader sections without relying on the browser back button.

They also make search entry pages easier to explore, which is especially helpful on sites with category trees, archive views, and multi-level content paths.

User Cases

Content publishers with layered topic structures

Before: A publisher has categories, subcategories, and long article series, but readers have no clear path back to broader topic pages.

After: Breadcrumbs shows the path back to those broader sections, which makes article relationships easier to understand and easier to navigate.

WooCommerce or catalog sites with deep collections

Before: Shoppers land on a deep product or category page from search and do not immediately understand how that page fits into the wider catalog.

After: Breadcrumbs keeps the category path visible so shoppers can move into a broader collection without starting over.

Agencies standardizing site structure across client sites

Before: Each site handles breadcrumb placement differently, which makes it harder to keep navigation and schema behavior consistent.

After: Breadcrumbs gives the agency one place to control placement, labels, and layout while still choosing between manual output and automatic injection per site.

FAQ

Should I use manual output or automatic injection?

Use manual output when you need exact placement in a template or content area. Use automatic injection when you want the trail inserted in a consistent place across many posts.

What should I do if breadcrumbs appear twice?

Check whether you enabled Enable automatic breadcrumbs injection and also placed the Shortcode, Block, or Template function on the same page. Keep only the output method you actually want for that location.

Why does the preview not match the live page exactly?

The preview is a simplified representation of your style settings. The live output still depends on the real page hierarchy, the current query, and your theme CSS.