How to create a HTML schema breadcrumb with PHP

How to create a HTML schema breadcrumb with PHP

Sun May 16 2021667 words

Why you need breadcrumbs on a website

Pretty much all websites today need to have a HTML breadcrumb both for users and for search engines.

For users they act as a way to traverse backwards up levels of your site, while for search engines they signal the hierarchy of your pages.

Search engines can also read any schema tags applied to your breadcrumbs, so they should always be tagged with schema markup to enhance your listing in the SERP (Search Engine Results Page).

Schema breadcrumb structure

To tag up a breadcrumb with schema markup you just need to add the necessary itemscope / itemtype attributes and a position meta tag

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
   <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://php.fyi/articles/php-breadcrumbs">
         <span itemprop="name">Title</span>
      </a>
      <meta itemprop="position" content="1" />
   </li>
   // and repeat
</ol>

A breadcrumb only needs two values - the page title and the page path.

It and can be represented as a PHP class as follows:

class Breadcrumb {
   public string $title
   public string $path
}

And can be represented as a PHP associative array as follows:

$breadcrumbs = [];

$breadcrumbs[] = [
   'title' => $title,
   'path' => $path,
];

Creating the PHP breadcrumbs class

The BreadcrumbGenerator class takes the required data input and returns the breadcrumb HTML as the output.

When the class is initialized a base URL (usually just the current protocol + domain), and a separator (used between each link) is required.

These can be optional depending on your own requirements.

class BreadcrumbGenerator
{
   protected string $output; // the breadcrumb HTML

   public __construct(
      protected string $base, // the base URL for the breadcrumbs
      protected string $separator, // the HTML divider between breadcrumbs
   )
   {}
}

$generator = new BreadcrumbGenerator('https://php.fyi/', '-');

The create method will take care of converting the passed breadcrumb data into HTML output.

Before this happens we can automate the process of adding a home page breadcrumb link.

class BreadcrumbGenerator
{
   public function create(array $breadcrumbs)
   {
      $breadcrumbs = array_merge(
         [
            'title' => 'Home',
            'path' => ''
         ], 
         $breadcrumbs
      );
      // create the breadcrumbs
   }
}

$generator = new BreadcrumbGenerator('https://php.fyi/', '-');

$output = $generator->create([
   [
      'title' => 'Expertise',
      'path' => '/expertise',
   ]
]);

Complete PHP breadcrumbs class

The complete PHP class dynamically creates the breadcrumbs and adds a separator after each link except the final one before returning the HTML output.

This serves as a basic example of the logic behind breadcrumbs. In modern web development packages are usually available for all major frameworks and languages to generate breadcrumbs for you.

Remember always to test your breadcrumbs before you request indexing of your pages. When dynamically generating anything it can be easy to pass incorrect data resulting in incorrect output.

class BreadcrumbGenerator
{
   protected string $output;

   public __construct(
      protected string $base,
      protected string $separator,
   )
   {}

   public function create(array $breadcrumbs)
   {
      $breadcrumbs = array_merge(
         [
            'title' => 'Home',
            'path' => ''
         ], 
         $breadcrumbs
      );
      $position = 1;

      $this->output .= '<ol itemscope itemtype="https://schema.org/BreadcrumbList">';

      foreach($breadcrumbs as $title => $path) {
         $this->output .= '
         <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="' . $this->base . $title . '">
               <span itemprop="name">' . $title . '</span>
            </a>
            <span>' . ($position !== count($breadcrumbs) ? $this->separator : '' ) . '</span>
            <meta itemprop="position" content="' . $position . '" />
         </li>';

         $position++;
      }
      $this->output .= '</ol>';

      return $this->output;
   }
}
PHP.FYI - Software Enginner based in London

PHP.FYI - © 2021 Andrew Mc Cormack