WordPress Component Library
10up Engineering

Search Action

The search action component is a schema marked up search box. This will produce a site-specific search box within Google search results. If you want to opt out of the sitelinks search box, add this to the <head>: <meta name="google" content="nositelinkssearchbox" />. Don’t forget that the label’s “for” attribute should always match the input’s “id” attribute (“q”, in this case). 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="http://schema.org/WebSite">
	<?php
	/**
	 * This form goes in a searchform.php template
	 *
	 * @link https://developer.wordpress.org/reference/functions/get_search_form/#used-by
	 */
	?>
	<form role="search" id="searchform" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
		<meta itemprop="target" content="<?php echo esc_url( home_url() ); ?>/?s={s}" />
		<label for="q">
			<?php echo esc_html_x( 'Search for:', 'label', 'tenup' ); ?>
		</label>
		<input itemprop="query-input" type="search" id="q" value="<?php echo get_search_query(); ?>" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'tenup' ); ?>" name="s" />
		<input type="submit" value="<?php echo esc_attr_x( 'Submit', 'submit button', 'tenup' ); ?>">
	</form>
</div>
<div itemscope itemtype="http://schema.org/WebSite">

	<link itemprop="url" href="http://www.example.com/" />
	<form method="get" action="" role="search" itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
		<meta itemprop="target" content="http://example.com/?s={s}" />

		<label for="q">Search</label>
		<input itemprop="query-input" type="search" name="s" id="q" />
		<input type="submit" value="Submit" />
	</form>

</div>

Resources