Add Breadcrumbs to Oxygen Builder

Authored By: James LePage
Published On: July 15, 2020

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 Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram