SEO-friendly Breadcrumbs in Symfony’s Twig that Google will love

Twig helper to easily add breadcrumbs to your app that Google will understand and power up your SEO rating.

.com software
2 min readAug 21, 2020
A newspaper, a sweater, a notebook with Google opened in the browser, a pitcher full of flowers — on a wooden table. Four wooden chairs around it.
Photo by Agnieszka Boeske on Unsplash

Lets create SEO-friendly page breadcrumbs in Twig with an ease.

Have you ever wondered how search engine providers like Google display beautiful navigation for each link in their search results?

Notice the “docs | data-types…” part above the page title. This can be controlled easily using so called “rich metadata”.

Here’s a complete Twig macro that generates site breadcrumbs along with the metadata in the LD+JSON format:

The code is released under MIT license so it can be used freely in both commercial and private projects.

Usage is quite simple if you put this macro inside a Twig template. For instance an imaginary breadcrumb for an imaginary article:

The styling part is left for you. This will work out of the box with the Bootstrap framework.

Last, but not least I hope, you can validate the generated metadata code using the Google’s Structured Data Testing Tool.

--

--

.com software

Father • PHP developer • entrepreneur • working for a €1bn unicorn startup as a backend engineer >>> https://bit.ly/dotcom-software