Published
Updated:
by Wayne Smith
Visual breadcrumbs help in site navigation. For SEO, they help to determine the interrelationship between pages on a website. In short, they provide the site's entity-relationship information. Semantic breadcrumbs help screen readers provide site navigational prompts for user accessibility.
The entity-relationship model is fundamental to how language is processed and how search engines look at the page for relevancy. Instead of looking at word frequency; Content can be evaluated using related entities, and for the citations to closely related terms.
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.
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.
The Schema Json as used by Google should have the full URL or absolute URL which includes the domain name not relative URLS.
It is a good practice to keep the end destination for information within two clicks of the main page. The depth that will be shown in Google is 3. And the breadcrumbs are used by Google when showing the site ... the breadcrumb replaces the URL when breadcrumbs are used.