May
27
2016

Showing Magento’s search engine below Google’s sitelinks

This is a guide to implementing the necessary markup to tell Google about your own Magento store’s search engine, which can then be used in some listings when users are searching for terms related to your website.

Keep reading to learn how to show your Magento website’s search engine in the Google Search Engine Results Page (SERP). For more information about Google Sitelinks, see this documentation.

When search appears in Google sitelinks

Even when implemented correctly, the Google sitelinks search box will not appear for all search terms. Typically, the sitelinks and search form will only appear when a user searches Google for a term related to your business or organisation.

For example, if your company is called Widgets Ltd, and a user searches for “Widgets Ltd”, the sitelinks search form may appear. If a user searches for the more generic term “widgets”, it’s unlikely to appear.

See the example below – Mothercare.ie, a Magento Enterprise store, shows sitelinks for key product categories below the store’s main listing. You can also see that Google adds another search field below the primary listing, labelled “results from mothercare.ie”:

The code snippet is fairly simple:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "https://www.example.com/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://www.example.com/catalogsearch/result/?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>

This tells Google that your website, www.example.com, allows searches to be performed by passing a key word or key phrase to https://www.example.com/catalogsearch/result/?q=.

How to get Google to show your Magento store’s search field in results pages

Showing Magento’s search engine below Google’s sitelinks involves adding a small snippet to the <head> element of your Magento store. This only needs to be on the homepage, so whilst you could amend your theme’s layout files to add the snippet, this guide will add it using Magento’s CMS tools.

  1. Log in to your Magento administration panel
  2. Navigate to CMS > Pages
  3. Edit your store’s homepage
  4. Open the Design tab in the left-hand column
  5. In the Layout Update XML field, enter the code snippet below
  6. Click the Save Page button
  7. (You may need to clear your store’s caches via System > Cache Management).
<![CDATA[
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "https://www.example.com/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://www.example.com/catalogsearch/result/?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
]]>

Don’t forget to swap out www.example.com for your own website’s domain name!