pankaj
pankaj

Reputation: 1733

Google sitelink search box with Google custom search

We want to implement Google sitelink search box with Google custom search. In the Google documentation, I found that we need to include the below code to enable sitelink search box

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

But we are stuck at "target" node in the above properties. Since we dont have any own search page, we want to use Google custom searh, so what value should I fill in this "target" node.

We have already created a Google custom search engine for our site. And found below code there

<script>
  (function() {
    var cx = 'CX_ID';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

We want to implement sitelink search box like Mashable, Imdb

enter image description here

Please suggest, how to point Google custom search in sitelink search box code.

Thanks

Upvotes: 6

Views: 2903

Answers (4)

SimonTheSorcerer
SimonTheSorcerer

Reputation: 11

You will need Google CSE WordPress plugin: https://wordpress.org/plugins/google-cse/

  1. Install it.
  2. Enable Custom Search API
  3. Generate API
  4. Use the your generated API and custom Search Engine ID
  5. Find your built in WordPress search on the site

Now you will be able to use SearchAction Shema.org markup (Sitelink search box).

Only works with WordPress.

Upvotes: 1

Mousey
Mousey

Reputation: 1865

Shishdem's links do not identify what the write for the target either, after some guess work this works

https://example.com/index.html?q={search_term_string}

for a search box included as a part of the index.html page

if you search box is on the sitemap page use

https://examples.com/sitemap.html?q={search_term_string}

I was only able to find this because the 404 page included the search box, so it returned 404 then results appeared, so I tweaked the code.

This ignores anything else on that page and appears to come up with the right results, so should fit into the JSON-LD (or microdata if you prefer). JSON-LD might be better since google recommends it but states microdata is accepted. Reference to link in original question documentation.

Upvotes: 1

Shishdem
Shishdem

Reputation: 498

The only solution:

For this you need a search page on your own website.

For the "target" parameter, do a search on your site and take that URL and replace the search term you used to do the search with "{search_term_string}"

If you make a search page on your website where you use a custom Google Search, you should be able to take that link for the target-property.

The reason for this is that Google does not supply the search functiop

will send the user directly to your website's own search pages.

Sources:

Upvotes: 1

Related Questions