Structured Breadcrumbs vs. url structure

[ajnsn]

In most of the recent (Statamic) projects we are forced by SEO agencies to have "speaking" urls with only 1 segment, e.g. https://customer.com/this-is-my-fancy-product instead of https://customer.com/products/fancy. While there's still a /products index page (and products are organized as children of this page), the url structure is flattened.

This is also widely used all over the web. One example is Apple's Mac Book Pro page. The url is https://www.apple.com/macbook-pro/ and only has 1 segment. The breadcrumbs at the bottom of the page look like this:
.

What we need is to output the hierachy structure for UX (users) and for search bots somewhere, as breadcrumbs and/or in hidden json schema tags (aka BreadcrumbList).

In Statamic we do have hierarchical collections / navigations but imHo it's not easy to bring this hierachy to the frontend without touching the url structure ({parent_uri}/{slug} vs. {slug}), e.g.

• Most of the common SEO addons rely on the nav:breadcrumbs tag which relies on the url structure. There's also a note in the docs that "Breadcrumbs don't follow structures, they follow the current URL hierarchy."
• The children tag is based on a the current url of the page.
• etc.

I did not find any hint on how this could be achieved except this unanswered discussion, so I just wanted to share our approach and happy to have your feedback. Mabye this can also lead to a PR somehow.

We implemented a custom tag based on the Structure tag, inspired by the Nav tag.
It only keeps the pages within the "path" of the current page.

This is how it looks atm:

class NavPathTag extends Structure
{
    /** @var string */
    protected static $handle = 'nav_path';

    public function index(): Collection
    {
        /** @var array<int, array<string, mixed>> $structure */
        $structure = $this->structure($this->params->get('handle', 'collection::pages'));

        $initial = collect();

        if ($this->params->bool('include_home', false) && !$this->isCurrentPage($structure[0])) {
            $initial->push($structure[0]);
        }

        return collect($structure)
            ->reduce(
                callback: fn (Collection $carry, array $page): Collection => $carry->push(...$this->getNestedPages($page)),
                initial: $initial
            );
    }

    /**
     * @param array<string, mixed> $page
     */
    protected function getNestedPages(array $page): Collection
    {
        $pages = collect();

        if ($this->isCurrentPage($page) || $this->isParentPage($page)) {
            $pages->push($page);
        }

        if ($this->isParentPage($page)) {
            foreach ($page['children'] as $child) {
                $pages->push(...$this->getNestedPages($child));
            }
        }

        return $pages;
    }

    /**
     * @param array<string, mixed> $page
     */
    protected function isCurrentPage(array $page): bool
    {
        return $page['is_current'];
    }

    /**
     * @param array<string, mixed> $page
     */
    protected function isParentPage(array $page): bool
    {
        return $page['is_parent'];
    }
}

In Antlers this can be used like this:

<ol class="flex gap-x-2">
    {{ nav_path handle="collection::pages" include_home="true" }}
    <li>
        <a href="{{ permalink }}">{{ title }}</a>
    </li>
    {{ /nav_path }}
</ol>

An example collection looks like this:

While we have a url structure for the pages collection with only the {slug}, we can now use the desired hierachy to output the proper breadcrumbs.

This also works with navigation structures.

Happy to hear your comments!