In this handy tutorial, I will show you how to automate schema JSON-LD breadcrumb schema. This will save you time on having to manually build schema breadcrumbs for each page.
The schema breadcrumbs are what helps Google and other leading search engines use to determine the structure of websites. They are also classed as a SERP enhancement in Google’s search results.
I have created this method to save me time on having to populate the schema breadcrumbs on each and every page on the semi-dynamic websites that work on and maintain. You can use this method on PHP-powered CMSes or on semi-dynamic websites.
Let’s Begin
To create the schema breadcrumbs, we are going to harness the power of PHP Superglobals and the JSON-LD schema markup. I'm guessing you probably know the basics of JSON-LD? So let us move on directly to building the dynamic attributes to populate URLs and page path names.
I’ve been learning PHP this year, quietly getting more and more confident as the months pass by. PHP Superglobals are incredibly versatile and useful for several usages. I really like how useful the URL portions of superglobals can be.
Creating the PHP script to create the dynamic attributes
The PHP snippet powering the dynamic attributes population is segmented into 3 sections. These sections are to extract and build the URL paths and extract the text from the URLs to build the page path names.
Build the page paths
The snippet below uses URL Superglobals to extract the page paths and the PHP explode function to split down the page paths URIs. I have flipped the page path URLs into variables to make concatenation easier.
This next snippet is used to concatenate the page paths ready to dynamically inject the page paths into the JSON-LD schema breadcrumb URL paths. I have used variables with string operators (string concatenators) to build the full URL paths. These final variables will be used for the "item": portion of the breadcrumb schema. The $fullroute variable is self-explanatory (full URL of the page). The $partialroute variable is the next directory up (up one level) and the route1 variable is the homepage.
Lastly, we need to extract the page path names from the URL paths to use as page path labels to inject into the "name": portion of the schema breadcrumb. For this, we are going to extract the URI names from the $textroute variable.
Using the search and replace str_replace array to remove delimiters and page extension name (.php) and another array to add a space in between the words. Then using the PHP ucwords function to add a capital letter to each of the words (uppercase). The outcomes have been set as variables called $routeb2 and $routeb3.
The final result is this PHP snippet. I’m quite proud of this, to be honest, it shows that my PHP skills are getting much better. I have blended this snippet into my PHP globals file which is fetched sitewide on every webpage. If you are not using a PHP globals file, place the PHP snippet below before the opening DOM Head tag <head>, or anywhere really.
The JSON-LD Breadcrumb Schema Markup
Now that I have shown you how the PHP variables have been concocted. Let’s put the variables to action. The JSON-LD breadcrumb schema (aka Structured Data) below is already prepopulated with those variables to accommodate a webpage 2 levels deep from the homepage. You can modify the schema to accommodate the page-level depth of your web pages. I am likely to extend this tutorial in the not too distant future add-in PHP conditionals to add an extra layer of autonomy for page-level depths.
Anyway, back on point. Copy and paste the prepopulated JSON-LD schema breadcrumb markup into the DOM head tag <head> on the pages that you are adding schema breadcrumbs on.
Navigation breadcrumbs
Moving on to the second part of this tutorial – the navigation (waypoint) breadcrumbs. We’ve done the donkey work above; the PHP variables are already primed to go. Even if you don’t need to use the breadcrumbs schema above. The navigation breadcrumb will be super useful, as many mainstream CMSes developers have been forgetful with leaving navigational breadcrumbs out.
Make sure that you have the primary PHP snippet embedded on your website within your globals.php file or at page-level. Here it is again below (no need to add twice if you decide on using the schema breadcrumbs).
Lets start with building the breadcrumb paths
Root Level
First Level
Second Level
You can style the navigation (aka waypoint) breadcrumbs to however you like, the concept is easy to follow through.
And there you have it, that is my tutorial on how to create schema and navigation breadcrumbs. You can see an example of them in use on the scratchpad section (test/staging) section of my website here > https://sitebee.co.uk/scratchpad/destination-maui/ (view page source).
As mentioned earlier on this tutorial, I will likely expand on this tutorial to add conditional logic to page-level depths. Follow me on LinkedIn/Twitter to keep track of that announcement plus future tutorials.
Thank you for reading and as always comment below with your feedback.
The schema breadcrumbs are what helps Google and other leading search engines use to determine the structure of websites. They are also classed as a SERP enhancement in Google’s search results.
I have created this method to save me time on having to populate the schema breadcrumbs on each and every page on the semi-dynamic websites that work on and maintain. You can use this method on PHP-powered CMSes or on semi-dynamic websites.
Let’s Begin
To create the schema breadcrumbs, we are going to harness the power of PHP Superglobals and the JSON-LD schema markup. I'm guessing you probably know the basics of JSON-LD? So let us move on directly to building the dynamic attributes to populate URLs and page path names.
I’ve been learning PHP this year, quietly getting more and more confident as the months pass by. PHP Superglobals are incredibly versatile and useful for several usages. I really like how useful the URL portions of superglobals can be.
Creating the PHP script to create the dynamic attributes
The PHP snippet powering the dynamic attributes population is segmented into 3 sections. These sections are to extract and build the URL paths and extract the text from the URLs to build the page path names.
Build the page paths
The snippet below uses URL Superglobals to extract the page paths and the PHP explode function to split down the page paths URIs. I have flipped the page path URLs into variables to make concatenation easier.
Code:
// build paths
$route1="https://$_SERVER[HTTP_HOST]";
$route2 = explode ('/', $_SERVER[REQUEST_URI])[1];
$route3 = explode ('/', $_SERVER[REQUEST_URI])[2];This next snippet is used to concatenate the page paths ready to dynamically inject the page paths into the JSON-LD schema breadcrumb URL paths. I have used variables with string operators (string concatenators) to build the full URL paths. These final variables will be used for the "item": portion of the breadcrumb schema. The $fullroute variable is self-explanatory (full URL of the page). The $partialroute variable is the next directory up (up one level) and the route1 variable is the homepage.
Code:
// concatenate paths
$fullroute = $route1 . '/' . $route2 . '/' . $route3;
$partialroute = $route1 . '/' . $route2;Lastly, we need to extract the page path names from the URL paths to use as page path labels to inject into the "name": portion of the schema breadcrumb. For this, we are going to extract the URI names from the $textroute variable.
Using the search and replace str_replace array to remove delimiters and page extension name (.php) and another array to add a space in between the words. Then using the PHP ucwords function to add a capital letter to each of the words (uppercase). The outcomes have been set as variables called $routeb2 and $routeb3.
Code:
// extract text from paths
$routeb2 = ucwords(str_replace(array(".php","-","_"), array(""," "," "), $route2));
$routeb3 = ucwords(str_replace(array(".php","-","_"), array(""," "," "), $route3));The final result is this PHP snippet. I’m quite proud of this, to be honest, it shows that my PHP skills are getting much better. I have blended this snippet into my PHP globals file which is fetched sitewide on every webpage. If you are not using a PHP globals file, place the PHP snippet below before the opening DOM Head tag <head>, or anywhere really.
Code:
<?php
// build paths
$route1="https://$_SERVER[HTTP_HOST]";
$route2 = explode ('/', $_SERVER[REQUEST_URI])[1];
$route3 = explode ('/', $_SERVER[REQUEST_URI])[2];
// concatenate paths
$fullroute = $route1 . '/' . $route2 . '/' . $route3;
$partialroute = $route1 . '/' . $route2;
// extract text from paths
$routeb2 = ucwords(str_replace(array(".php","-","_"), array(""," "," "), $route2));
$routeb3 = ucwords(str_replace(array(".php","-","_"), array(""," "," "), $route3));
?>The JSON-LD Breadcrumb Schema Markup
Now that I have shown you how the PHP variables have been concocted. Let’s put the variables to action. The JSON-LD breadcrumb schema (aka Structured Data) below is already prepopulated with those variables to accommodate a webpage 2 levels deep from the homepage. You can modify the schema to accommodate the page-level depth of your web pages. I am likely to extend this tutorial in the not too distant future add-in PHP conditionals to add an extra layer of autonomy for page-level depths.
Anyway, back on point. Copy and paste the prepopulated JSON-LD schema breadcrumb markup into the DOM head tag <head> on the pages that you are adding schema breadcrumbs on.
Code:
<!-- schema breadcrumbs -->
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "<?php echo $route1; ?>"
},{
"@type": "ListItem",
"position": 2,
"name": "<?php echo $routeb2; ?>",
"item": "<?php echo $partialroute; ?>/"
},{
"@type": "ListItem",
"position": 3,
"name": "<?php echo $routeb3; ?>",
"item": "<?php echo $fullroute; ?>/"
}]
}
</script>Navigation breadcrumbs
Moving on to the second part of this tutorial – the navigation (waypoint) breadcrumbs. We’ve done the donkey work above; the PHP variables are already primed to go. Even if you don’t need to use the breadcrumbs schema above. The navigation breadcrumb will be super useful, as many mainstream CMSes developers have been forgetful with leaving navigational breadcrumbs out.
Make sure that you have the primary PHP snippet embedded on your website within your globals.php file or at page-level. Here it is again below (no need to add twice if you decide on using the schema breadcrumbs).
Code:
<?php
// build paths
$route1="https://$_SERVER[HTTP_HOST]";
$route2 = explode ('/', $_SERVER[REQUEST_URI])[1];
$route3 = explode ('/', $_SERVER[REQUEST_URI])[2];
// concatenate paths
$fullroute = $route1 . '/' . $route2 . '/' . $route3;
$partialroute = $route1 . '/' . $route2;
// extract text from paths
$routeb2 = ucwords(str_replace(array(".php","-","_"), array(""," "," "), $route2));
$routeb3 = ucwords(str_replace(array(".php","-","_"), array(""," "," "), $route3));
?>Lets start with building the breadcrumb paths
Root Level
Code:
<a href=”<?php echo $route1; ?>”>Home</a>First Level
Code:
<a href=”<?php echo $route1; ?>”>Home</a> > <a href=”<?php echo $partialroute; ?>”> <?php echo $routeb2; ?></a>Second Level
Code:
<a href=”<?php echo $route1; ?>”>Home</a> > <a href=”<?php echo $partialroute; ?>”><?php echo $routeb2; ?></a> > <a href=”<?php echo $fullroute; ?>”> <?php echo $routeb3; ?></a>You can style the navigation (aka waypoint) breadcrumbs to however you like, the concept is easy to follow through.
And there you have it, that is my tutorial on how to create schema and navigation breadcrumbs. You can see an example of them in use on the scratchpad section (test/staging) section of my website here > https://sitebee.co.uk/scratchpad/destination-maui/ (view page source).
As mentioned earlier on this tutorial, I will likely expand on this tutorial to add conditional logic to page-level depths. Follow me on LinkedIn/Twitter to keep track of that announcement plus future tutorials.
Thank you for reading and as always comment below with your feedback.