Sitelinks search box (WebSite)

A sitelinks search box allows users to search your site or app directly from the search results page, offering real-time suggestions and other features.

Google Search might automatically display a search box specific to your website when it appears as a search result, without any additional effort on your part. This search box is powered by Google Search. However, you can enhance its functionality by adding WebSite structured data, which helps Google better understand your site.

If Google Search has already provided a sitelink search box for your site, you can manage certain aspects of it by adding WebSite structured data.

Kindly Refer Google Doc to know more about sitelinks search box rich result.

1.siteSearchBoxFieldName

This is configured inside richiejs.config.js file.

richiejs.config.js

/** @type {import("@cresteem/richie-js").rjsOptions} */
const config = {
  preference: {
    siteSearchBoxFieldName: "searchTerm",
  },
};
 
exports.default = config;

2. domainAddress

This also configured inside richiejs.config.js file.

richiejs.config.js

/** @type {import("@cresteem/richie-js").rjsOptions} */
const config = {
  domainAddress: "cresteem.com",
};
 
exports.default = config;

Function and parameters

💡

By default input file is overwriiten with result so destination is optional

This is only for API method. We prefer CLI method for keeping it simpler (refer - Working with API & CLI).

func_params.js

const richResultType = 'searchbox';
const filePath = 'pages/Sitesearch/searchpage.html';
const destination = 'dist/pages/Sitesearch/searchpage.html'; /* optional */
 
richie([richResultType], filePath, destination);

Example of a Instance & FS structure

File system structure

- - searchpage.html

Instance

search.html

<body>
  <h1>Search Form</h1>
 
  <form onsubmit="return search()">
    <label for="searchInput">Search:</label>
    <input type="text" id="searchInput" name="searchTerm" />
    <button type="submit">Search</button>
  </form>
 
  <div id="result"></div>
</body>

Output of a Instance

search.html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://www.cresteem.com/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate": "https://www.cresteem.com/pages/Sitesearch/searchpage?q={searchTerm}"
    },
    "query-input": "required name=searchTerm"
  }
}
</script>

Let’s see what’s next!

Profile Page Software App