LD-JSON Breadcrumb Structured Data is a format to let search engines understand the website hierarchy better. Further, let them display the breadcrumb over Search Engine Results Snippets.
We’re using Yoast SEO plugin since the beginning of this WordPress blog. We have created a custom breadcrumb navigation for visitors using this plugin. While Yoast already offers Breadcrumb Rich Data in RDFa format, we wanted to use LD-JSON Breadcrumb Structured Data. So here is why we’re using LD-JSON as well as how did we do it.
Why LD-JSON Breadcrumb Structured and with Yoast?
If you’re on WordPress platform, high chances are that you’re using Yoast plugin. As already stated, this plugin offers enough rich data in the breadcrumb markup itself. Still, it has common markup for all websites and isn’t specific to the type of the website.
Next, Google includes the URL of the last item on the trail in the search results. You can check examples provided on its official documentation. Also, look at the search result above. It consists of the link to the final page you want to let the visitor land.
Additionally, LD-JSON is the prefered format to put structure data information in web pages. And we did customization of user-visible breadcrumb navigation produced by the plugin. Further, we didn’t want to bloat our code with many types of rich data formats. So we opted to place LD-JSON Structured Data for breadcrumb.
We have seen websites using a separate plugin to include breadcrumbs while an in-use plugin already has this feature. It isn’t wise as it leads to unnecessary time and resource consumption by the plugin. WordPress commonsense is, use the same in-use plugin who is offering requested feature among others rather installing one new.
Since we have Yoast SEO for WordPress, we used it for both, displaying the breadcrumb navigation and preparing LD-JSON script.
Create LD-JSON Breadcrumb Structured Data
First of all, we need navigation items in an array from Yoast. If you have read the previous article, you will notice that we’ve already done this fluently. All we need is just prepare and put the JSON formatted string in the head section of the website.
Following ahead, place the function given below to functions.php file in your WordPress theme.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function crumb_json($crumb){ $items = array(); foreach($crumb as $k => $v){ $items[] = array( '@type' => 'ListItem', 'position' => $k+1, 'item' => array('@type' => 'WebPage', '@id' => $v['href'], 'name' => $v['text']) ); } $crumb = array( '@context' => 'http://schema.org/', '@type' => 'BreadcrumbList', 'itemListElement' => $items ); printf('<script type="application/ld+json">%s</script>', json_encode($crumb)); } |
This function above takes care to put nicely formatted LD-JSON Breadcrumb Structured Data wherever you wish. Now call this function inside the head section of your theme’s header.php file as shown.
1 2 3 4 5 6 7 8 9 | <head> ... <?php // ... if(function_exists('yoast_breadcrumb') && !(is_home() || is_front_page())) { crumb_json(get_crumb_array()); } ?> </head> |
Also, we expected that you already have get_crumb_array() function as given in the previous article. Now check your LD-JSON Breadcrumb script at Google’s Structured Data Testing Tool. It should display the breadcrumb trail there as per recommendation.
Have you any question or concern? Mention that in the comment(s) below. We will be happy to answer you regarding creating LD-JSON Breadcrumb Structured Data using Yoast SEO WordPress plugin.