Published
Updated:
by Wayne Smith
Breadcrumbs provide visitors clues to finding additional on-topic content and interacting with the website. Screen readers locate breadcrumbs as a site navigational aid for people with disabilities. Search engines look for content clusters to identify the main category pages to index content.
Semantic and Schema Breadcrumbs and SEO
For SEO, one must not make the search engine try to read your mind. Search engines rank content better when the site has more than one page on the topic. The breadcrumbs lead the search engine to the topical hub or category page.
Site structure also aids SEO in identifying the topical root page. However, as a site grows new topical categories can emerge and breadcrumbs are easy to change ... Changing a URL is essentially migrating content.
Problem free URL Structure for SEO
Entity relationships: All proper nouns, including names of people, places, and things, are considered entities. Modern search engines prioritize understanding these entities to enhance their search results. Breadcrumbs establish a hierarchical structure that outlines the relationships between entities on a website. Sub-pages complement the main topical page by filling in details, making it more comprehensive and valuable in the eyes of search engines.
Screen Readers and Breadcrumbs
Screen readers rely on ARIA breadcrumbs to assist with site navigation. Without clear breadcrumbs, it's unclear whether your gold platinum page is a standalone feature or if visitors are encouraged to explore additional content.
Visitors reading the page might have the same question: visible breadcrumbs help guide them and encourage them to stay on the website.
Breadcrumbs Feature
It should be mentioned that schema breadcrumbs replace ugly URLs in Google's search results. The appearance of ugly URLs may affect click-through rates.
ARIA HTML Breadcrumbs
The stated ARIA requirements are: The desired semantics HTML pattern for breadcrumbs is using an ordered list within a nav tag. The divider between links should not be read by screen readers. The nav tag should have a ARIA label of breadcrumb. The current page should be maked with an ARIA attribute of aria-current.
The example uses a class attribute for CSS styling. A nav[aria-label="Breadcrumb"] could also be used.
<nav> CSS for breadcrumbs
To prevent the screen reader from reading the spacer charactor - It can be embedded as a pseudo-element in the CSS ::before and the spacer can be removed from the first-child. A class is being used for style to avoid styling the nav element itself and other navs are likely to appear on the page.
Schema Breadcrumbs Example
The Schema Json as used by Google should have the full URL or absolute URL which includes the domain name not relative URLS.