Add Breadcrumbs to Oxygen Builder

Published: 8 months ago

This is a tutorial on how to easily add breadcrumbs to an Oxygen Builder website. Breadcrumbs are a powerful SEO instrument that not only make your website more navigable by users, but also make it easier for Google to index all of its pages. Incorporating them on your site is a necessity.

How To Add Breadcrumbs To Your WordPress Website | Elegant Themes Blog
Source

If you've created a blog or a website with Oxygen Builder, you're not using a WordPress theme. Typically, WordPress themes automatically incorporate breadcrumbs into their design, so you may be looking for guidance on how to manually incorporate them into your website created with Oxygen Builder.

Breadcrumb Benefits

Breadcrumbs have a proven benefit to both SEO, website visibility, and ease of interaction.

They come in all different shapes and sizes, but for a traditional WordPress blog, a breadcrumb could look like this:

Home >> Blog >> Post Title

Here are some breadcrumbs in the wild ⇘

This helps your users easily navigate through your website, and also makes your pages more indexable by Google.

Also, because there are more links on the page in a structured format, your bounce rate will decrease.

If they are properly implemented on your WordPress pages, Google will also pick them up and add them to the search engine listing, like so (There's a designated schema markup that most plugins insert into your meta. )

This puts more links under Google search Page, leading to more organic traffic. As you can see, there's really no way that breadcrumbs negatively impact your website, so incorporating them into your design is a great idea.

Let's go over a couple of ways to easily add breadcrumbs to Oxygen Builder.

How to add Breadcrumbs to Oxygen Builder  

Typically, if you're using an SEO plugin, It will automatically generate breadcrumbs for you. However, because Oxygen Builder requires you to create everything from the ground up, you'll need to manually place the code that makes up the breadcrumbs into page/post templates.

First, identify where you want the breadcrumbs to show up in your website. Typically, this would be a single blog post page, or maybe a sub page.

To make everything easier, we recommend using templates to build out the structure of single blog posts. Adding breadcrumbs to templates saves you the need to add breadcrumbs to every single blog post or page.

Oxygen Builder - One of The Best Template Builder for WordPress?!
Use a template

Depending on the SEO plugin, the code that you'll need to incorporate into the page changes. First, let's go over the actual process of adding breadcrumbs to an Oxygen Builder website, and then we'll take a look at the specific code for popular plugins.

There are two major ways that you can add breadcrumbs to an Oxygen Builder website:

Code Block: sometimes, your plug in Gives you a PHP code snippet that's meant to be added to a theme file. With the Oxygen Builder, you can easily use a code block to add this snippet directly into your page template. in our opinion, this is the best solution, and if you can identify a PHP snippet that works with your plugin, this is the route that you should take.

Short Code: Many SEO plugins also offer shortcodes that can be used too quickly embed breadcrumbs into posts. With some plugins, you can use the provided shortcode, added to a content template in the Oxygen Builder, and reap the rewards of breadcrumbs on your site.

The general process of adding the actual element to the site is this.

First, identify the code or short code needed to add the breadcrumb to your site. Then, load the Oxygen Builder editor for the respective template.

Using either the shortcode block or the code block, insert it directly into the part of the page or post that you want to display the breadcrumbs. With your SEO plugin, it will automatically configure the meta and coding of the breadcrumbs to comply with Google's best practices.

Finally, save the page and confirm that the breadcrumbs have applied to the front end of your Oxygen website.

Now, let's take a look at some of the codes that you can use to add breadcrumbs to your Oxygen Builder website.

We're going to cover the most popular SEO plugins here, but if yours isn't on this list you can easily figure out the short code or PHP code by heading to the respective documentation, or submitting a support request to the development team.

Add Yoast Breadcrumbs To Oxygen Builder

Use the code block in the Oxygen Builder to add this PHP code snippet to your template.

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '</p><p id="breadcrumbs">','</p><p>' );
}
?>

Add RankMath Breadcrumbs To Oxygen Builder

Use the shortcode block in the Oxygen Builder to implement Rankmath breadcrumbs in your website.

If the shortcode doesn't work, you can also use the code block and add this PHP code snippet:

<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>
default options in breadcrumbs section
Be sure to enable breadcrumbs in the Rankmath Backend

Side note, Rankmath is our recommended SEO plugin for Oxygen.

Add SEOPress Breadcrumbs To Oxygen Builder

Use the code block to add this PHP:

<?php if(function_exists("seopress_display_breadcrumbs")) { seopress_display_breadcrumbs(); ?>

You can also use the short code block in the Oxygen Builder to add this:

[seopress_breadcrumbs]

Add Breadcrumb NavXT Breadcrumbs To Oxygen Builder

Add this via a code block.

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

Conclusion

This post should have introduced a couple of ways that you can use to easily add breadcrumbs to your Oxygen Builder website. These are great for SEO and usability, lowering bounce rates and increasing rankings. With the Oxygen Builder, it's easy to incorporate this element of your website anywhere you want by using templates and code blocks/short codes.

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

  • James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram