Adding Search To Your Site In 15 Minutes
Leonardo Losoviz is a freelance developer and writer with an ongoing quest to integrate innovative paradigms Serverless PHP server-side components GraphQL More aboutLeonardo
Adding Search To Your Website With Site Search 360
This article has been kindly supported by our dear friends at Site Search 360 who help folks optimize their search and boost their best content by using powerful analytics to reveal the intention behind every search. Thank you
Website Development Company
My site has been created using a static site generator and deployed to a CDN so Im super happy with how fast it is. But there has been a functionality that Ive been missing all along search.
As its been mentioned many times Jamstack doesnt mean static we can perfectly create fully dynamic sites powered by JavaScript on the client-side interacting with mostly third-party APIs. Search falls within this category.
All this time I hadnt added search to my site because I was weary it would prove to be a difficult task. Im not exceptionally skilled in JavaScript or CSS so I feared that creating an elegant or at least respectable search input that suggests results as the user types and integrating it into my site would fall outside of my abilities.
Wordpress Development Services
This was made possible thanks to Site Search 360 a service providing search for any site whether based on Jamstack like mine WordPress for which they have a plugin or any other stack. I had planned to do some research on this service first but as it turned out even before my research was over I ended up installing their service and having search on my site to my absolute and initially unexpected delight.
Updating The Visual Appearance
The gist of the whole process is As I signed up for a free account this service indexed my site straight from the open Internet without asking me to provide any configuration. It then drove me through a few steps to configure the search user interface and finally produced a link to a JavaScript file with my custom configuration. As I included this JS on my site and refreshed the browser voil I had search
It really took no time and it also looks great. In this article Ill show you how to add search to your site using Site Search 360 as Ive done. By the time you finish reading this article if you follow along you may already have search.
Wordpress Website Development
On the homepage of Site Search 360 theres an input asking to Enter your domain site.com. Do it and click on Free test. Then it will say Yeah Your free trial is ready and ask you to enter your email to complete the registration. Do it and click on Go.
After this the service will spend a minute or two indexing your site or maybe a few more depending on how much content your site has and then inform you that its all ready.
Click on Lets Get Started to go to the application dashboard where an onboarding process will guide you in setting-up search for your site.
Since your sites content has been indexed by now when clicking on Test now the preview of the search UI will already use your sites actual content. Notice how even before you start customizing the look and feel it looks great
Click on More results in the suggestions dropdown to visualize what the search results will look like. Below well see how this list initially displaying the items thumbnail title URL and excerpt with the matching term in bold can be modified.
Click on the Search Designer button to customize the search UI and replicate the style on your site. This step is not a one-time off you can come back to it at any moment even after your custom configuration has been published and search is already installed on your site.
The welcome screen asks how wed like to start. Since we are new users we must start from scratch and click on Start now.
We are now using the Search Designer which will help you edit the visual appearance of the search input dropdown and results.
The search dropdown can be further configured allowing to display the previously-searched queries and also predefined queries. In my case Ive decided to already suggest those search queries that make my site rank high on Google.
The next step is to tweak the search results indicating how to extract the data for the title images and excerpt from the webpage. The default automatic configuration already works very well extracting the data from the attributes so you can quite likely skip this step.
Go back to the onboarding process and click on Install now. This will open a modal window copy the HTML code and paste it into your sites source code before the closing
