WordPress Component Library
10up Engineering

Search Results

The Search Results component contains very generic schema markup. Depending on which type of content is being displayed within your results, you may have to consult schema.org for more specific attributes (books, audiobooks, blogposts, etc.). This example uses “Thing” because we wanted to keep it generic. 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.).

HTML

<div itemscope itemtype="https://schema.org/SearchResultsPage">

<?php if ( have_posts() ) : ?>

	<!-- Title for search results containing search term -->
	<h1>
	<?php
	/**
	 * Structure assumes we're using a search.php template
	 *
	 * @link https://codex.wordpress.org/Creating_a_Search_Page
	 */
	printf( __( 'Search Results for: %s', 'tenup' ), '<span>' . esc_html( get_search_query() ) . '</span>' );
	?>
	</h1>

	<ol>
	<?php
	/**
	 * We recommend taking inner loop contents, and moving it into a template
	 * part using get_template_part for organizational purposes.
	 *
	 * @link https://developer.wordpress.org/reference/functions/get_template_part/
	 */
	while ( have_posts() ) : the_post(); ?>
		<li itemscope itemtype="https://schema.org/Thing">
			<?php
			/*
			 * Customize w/ get_the_post_thumbnail() to add schema
			 * @link https://developer.wordpress.org/reference/functions/get_the_post_thumbnail
			 */
			if ( has_post_thumbnail() ) {
				the_post_thumbnail();
			} ?>

			<!-- Standard URL and name itemprops -->
			<?php the_title( '<span itemprop="name"><a href="' . esc_url( get_permalink() ) . '" itemprop="url">', '</a></span>' ); ?>

			<!-- A description of the post content - the excerpt -->
			<div itemprop="description">
			<?php
			/**
			 * Customize the Read More link by using the "excerpt_more" filter
			 *
			 * @link https://developer.wordpress.org/reference/functions/the_excerpt/
			 * @link https://codex.wordpress.org/Customizing_the_Read_More
			 */

			the_excerpt();
			?>
			</div><!--/itemprop=description-->
		</li>
	<?php endwhile; ?>
	</ol>

	<?php

	the_posts_navigation();

else :

	/* An alternate action here for no results */

endif; ?>

</div>
<div itemscope itemtype="https://schema.org/SearchResultsPage">

	<!-- using OL instead of UL because the list has an implied order (best match -> worst match) -->
	<ol>

		<!--
			Your first search result item, there are more specific Schemas for
			different content types (books, audiobooks, blogposts, etc.). This
			example uses "thing" because we wanted to keep it generic.

			Other options:
				- CreativeWork: https://schema.org/CreativeWork
				- BlogPosting: https://schema.org/BlogPosting

		-->

		<li itemscope itemtype="https://schema.org/Thing">

			<!-- if you need an image, this is what that would look like-->
			<img itemprop="image" src="https://www.fillmurray.com/100/100" srcset="https://www.fillmurray.com/100/100 1x, https://www.fillmurray.com/200/200 2x" alt="Awesome image"/>

			<!-- Standard URL itemprop -->
			<a itemprop="url" href="http://www.example.com/">
				<!-- Standard name itemprop -->
				<span itemprop="name">The Title of the Search Result</span>
			</a>

			<!-- A description of the search item -->
			<div itemprop="description">
				<p>This is a description of the search result item</p>
			</div>

		</li>

		<!--
			Add more search items here
		-->

	</ol>
</div>

Resources