How can I add a Google Sitelinks Search Box to my home page?

Question

In September Google announced an improved search box within search results for webmasters. Following their guidelines demonstrated in the Google Developers section, they state that you can implement it on your home page either using JSON-LD or Microdata.

I'm trying to implement it using Microdata on my CMS home page, here's the dummy example:

<div itemscope itemtype="http://schema.org/WebSite">
    <meta itemprop="url" content="https://www.example-petstore.com/"/>
    <form itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
        <meta itemprop="target" content="https://query.example-petstore.com/search?q={search_term_string}"/>
        <input itemprop="query-input" type="text" name="search_term_string" required/>
        <input type="submit"/>
    </form>
</div>

If you put this directly into the Content section of your CMS page, it becomes replaced with:

<div><form><input type="text" name="search_term_string" /> <input type="submit" /></form></div>

When including it with a template file, like this:

{{block type="core/template" template="namespace/sitelinkssearchbox.phtml"}}

Where the content of sitelinkssearchbox.phtml is:

<div itemscope itemtype="http://schema.org/WebSite">
    <meta itemprop="url" content="http://www.mywebsite.com/"/>
    <form itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
        <meta itemprop="target" content="http://www.mywebsite.com/catalogsearch/result/?q={search_term_string}"/>
        <input itemprop="query-input" type="text" name="search_term_string" required/>
        <input type="submit"/>
    </form>
</div>

When clicking Submit, I get forwarded to the following URL:

http://www.mywebsite.com/?search_term_string=4670k

What am I doing wrong? Is this the correct behavior - and if so, can I make this div hidden?

Answer 1

I believe if you use the microdata option, you are supposed to apply the itemprop, itemscope, etc attributes to your existing search form markup. The reason you see the search button is because you are essentially adding another form to the page. With that in mind you might want to use the json-ld data.

NB: I should point out that I've seen both examples of Magento sites without any meta data appearing with sitelink search and sites with meta data that don't display it in the search results. Ultimately there is a google algorithm that determines when to show it.