Table of Contents
In this tutorial, we will take a closer look at Google Custom Search Engine as a way to implement search functionality on your static website.
For that purpose, I created a basic WordPress website with based on the demo of Simply Static Pro.
Simply Static will automatically be pre-installed and configured for you so that you can follow the next steps seamlessly.
What is Google CSE?
Google provides a service called Google Custom Search Engine which offers a customizable search of your website based on the results indexed on Google.
Using the search is free as long as you don’t want to disable the output of Google Ads results. if you only want to show results from your own website without the ads, you need to pay $5 / 1000 requests.
How to set up Google CSE?
Visit the Google CSE homepage here and log in with your Google account. You will get to your CSE dashboard, where you can create a new search engine.
You have to give it a name that is only used internally. Besides that, you need to set the source (which should be the URL to your static website, not your WordPress website). Solve the reCAPTCHA and click on Create.
You will be redirected to the project overview. Here you can configure quite a lot of details, and we will cover that in a moment, but for now, copy and save the Search Engine IDA unique attribute used to identify a single element on a webpage. It is often used for linking, styling, or scripting. as we will need that for the next step.
Google CSE in WordPress
We’ve done the basics in the Google CSE dashboard. Now let’s prepare the search in WordPress. There is an excellent free pluginA piece of software that adds specific features to WordPress., WP Google Search, which you can install directly from your WordPress installation.
After installation, go to Settings -> WP Google Search and add your Search Engine ID:
I would also recommend enabling the Support Overlay Display option, as this will avoid users being redirected to the search results page in WordPress (and not the static site).
I used the v3 CSSCascading Style Sheet. It’s a language used for describing the look and formatting of a document written in HTML. (Use default corrections CSS v3) as this matched my theme’s style the best, but that’s totally up to you.
That’s it for the configurationThe setup process where you specify the settings and options for how a software or system will operate. of the plugin. We can now add the search box to our website.
Display the search box in WordPress
To output the Google CSE search box on your website, you must add the shortcode [wp_google_searchbox] to your desired page/post, and it will render the search box for you:
Convert WordPress to static
We now can use the free Simply Static plugin to get a statically converted version of our WordPress website as a ZIP file.
In Simply Static -> Settings -> DeploymentThe act of pushing the static files generated by Simply Static to a live environment where users can access them., I configured the following:
Then we switch to Simply Static -> Generate and click the “Generate Static Files” button. Once the process is finished, you can download the ZIP file from the link provided to you:
Deploy the static site
There are a ton of different options when it comes to deploying your static website. To make things simple, I used the Drag & Drop uploader from Netlify to deploy my website quickly:
We are online now! Great, but one thing you will notice is that if you do that with a new website, the search box will not return any results right away:
That’s because our testing website isn’t indexed right now. It will work fine if it’s an already existing website, but if you just deployed your static site for the first time, it will take a couple of days for Google to indexA list or database used to make searching faster. your website and show the results here.
Summary
As you have seen, adding a search functionality with Google CSE to your static website is pretty straightforward but comes with a couple of downsides:
- you will have ads as long as you don’t use the premium API plan
- the search box isn’t that customizable compared to other solutions
- you may not want to share that data with Google
If you are looking for other search integrations, please check out my overview guide here.
Also worth mentioning, Simply Static Pro also provides a ready-to-go implementation of Fuse.jsA lightweight JavaScript library for searching, which allows for more flexible and forgiving searches. and AlgoliaA record of all the actions and changes made within the Simply Static plugin. It helps you track what has been done. to enable search on your static website.
