WordPress Component Library
10up Engineering

Breadcrumbs

The breadcrumbs component will give you the schema markup you need to output breadcrumb sitelinks in a Google search result. Note the “you are here” title on the last breadcrumb item. When modifying this component you should feel free to use any HTML that fits the structure and hierarchy of your project, while maintaining any of the schema-related HTML attributes (itemscope, itemtype, itemprop, etc.). The associated breadcrumb images are not required.

HTML

<nav role="navigation">

	<ol itemscope itemtype="http://schema.org/BreadcrumbList" aria-label="breadcrumb navigation">

		<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
			<a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://example.com/books">

				<!-- the actual display name of the breadcrumb -->
				<span itemprop="name">Books</span>

				<!-- if there's an image associated with this link -->
				<img itemprop="image" src="https://placekitten.com/g/50/50" alt="Books" />
			</a>

			<!-- the content position should increment by 1 (starting at 1) -->
			<meta itemprop="position" content="1" />
		</li>

		<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
			<a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://example.com/books/the-book" title="You are here">

				<!-- the actual display name of the breadcrumb -->
				<span itemprop="name">Subtopic or landing page</span>

				<!-- if there's an image associated with this link -->
				<img itemprop="image" src="https://placekitten.com/g/50/50" alt="Books" />
			</a>

			<!-- the content position should increment by 1 (starting at 1) -->
			<meta itemprop="position" content="2" />
		</li>

	</ol>
</nav>

Resources