Search Box in the SERPs


Adding Semantic Markup to Your Site

Google recently announced a new sitelinks feature that will allow the search box on our websites to start appearing in the SERPs. The markup can be found over at

What this does is display your websites search box in the SERPs underneath the sitelinks. This happens whenever someone preforms a branded search, for example, YouTube.

How to code microdata in WordPress

Like many other bloggers I use WordPress as a CMS (content management system) for my site. This makes it easier to update posts or entire sections of my site.

Adding microdata or semantic markup to a website can make several enhancements when your site is displayed in the SERPs. Having the search box appear is just another of the growing list of awesome things microdata can do.

To implement this feature you will need to wrap the following code around the search feature of your website, searchform.php, like so:

Without Microdata


<form method=”get” id=”searchform” action=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”>

<label for=”s”><?php _e( ‘Search’, ‘twentyeleven’ ); ?></label>

<input type=”text” name=”s” id=”s” placeholder=”<?php esc_attr_e( ‘Search’, ‘twentyeleven’ ); ?>” />

<input type=”submit” name=”submit” id=”searchsubmit” value=”<?php esc_attr_e( ‘Search’, ‘twentyeleven’ ); ?>” />


With Microdata

<div itemscope itemtype=””>

<meta itemprop=”url” content=””/>

<form method=”get” id=”searchform” action=”<?php echo home_url( ‘/’ ); ?>” itemprop=”potentialAction” itemscope itemtype=””>

<meta itemprop=”target” content=”<?php echo home_url( ‘/’ ); ?>/?s={query}”/>

<input type=”text” name=”s” id=”s” placeholder=”<?php esc_attr_e(‘search here &hellip;’, ‘responsive’); ?>” itemprop=”query-input” />

<input type=”submit” name=”submit” id=”searchsubmit” value=”<?php esc_attr_e(‘Go’, ‘responsive’); ?>”  />




Google gives us the example using JSON-LD but I prefer using microdata as I’m more familiar working with HTML.

What will it look like when I’m done

This screen shot shows what my current site looks like in the SERPs prior to me implementing this semantic markup. Since I only did this today I will update the post as soon as the search box starts appearing.

 joe rega serp screenshot

Clearly my personal brand is not strong enough yet, but that’s another blog post altogether.

How to test semantic markup

Google offers a structured data testing tool in Google Webmaster Tools where we have the option to test semantic markup on our sites. Here we can see if our coding is correct by viewing both URLs or the actual coding in HTML.  The following screenshot is of my site so I know it is set up correctly.

 structured data testing tool


How will this effect keyword data in Google Analytics?

My theory on this is that Google should pass all keyword data through to analytics since this is essentially pulling the search box from our sites. I’d be curious to see exactly what the answer is though; if anyone has any data on this yet please feel free to share that with me.

Although Google’s SERPs are constantly changing, features like this that enhance usability are great and I would like to see more changes like this.

About the Author:

An SEO in NYC with a penchant for the technical side of things. Father, Husband, Novice Photographer and Music Lover.

Comments are closed.