A look into the new Keele web search

It’s been a while since the new site launched and we thought we’d take a little time to give an overview of some of the new features. This post will hopefully be the start of a few more technically focused articles to share with you.

Originally published August 30, 2018

It’s been a while since the new site launched and we thought we’d take a little time to give an overview of some of the new features. This post will hopefully be the start of a few more technically focused articles to share with you.

As part of the launch we implemented a new site search and it’s been performing well since launch. We wanted to have the flexibility to develop new search facilities in house and were recommended a popular service called Algolia. A trial was up and running within a day and it looked really positive so we continued with it. It has a very clear API https://www.algolia.com/doc/api-reference , an open approach on Github and is cloud based taking away the need for us to maintain and upgrade local servers and databases.

In essence, Algolia lets you push/sync data from your website, have them index it and then access that via their API using a templating language. For Keele that meant using the PHP API to collect and format the data as JSON, push that to Algolia and then use a mix of their JavaScript API and InstantSearch.js library on the frontend to display results. So once the initial data sync and connection was made, mixing result data with our design components was straightforward. For example, referencing the url and title value would be

<a href="{{ urlPath }}">{{{ _highlightResult.courseTitle.value }}}</a>

Using the service has allowed us to cherry pick searchable fields/snippets rather than have a traditional engine crawl the entire site/pages. Using templating, we can also choose which bits of the returned JSON we want to show in the search result. We can also feed data that can be searched against, but only display the fields we like in the search result.

There were other options such as having a text search field built in vanilla JS however Algolia gave us the advantage of typo tolerance, instant ‘as you type’ results , quick and intuitive synonym configuration, an analytics dashboard and also the ability to easily create facets. For the facets we just fed course levels etc as ‘_tags’ in the JSON.

We’re using the JavaScript framework VueJS on the new site but at the time we rolled the site out, Algolia Vue InstantSearch was in beta. It worked just fine but didn’t yet have url sync (search terms in the url/slug etc). So to ensure users could bookmark/share searches and use the back button, we stuck with the vanilla JS library. We may move over now that Vue InstantSearch is out of beta.

We’ve had high usage and feedback has been great. As comparison, many users of the old search have commented that the new one brings back more relevant results.

We don’t use Algolia for the site search although I believe it’s possible to feed Algolia with entire site data so long as it’s in a uniform format but for Keele, the simple Google Custom Search is effective and meets requirements for now.

In the next technical article I’ll go into more detail on how we used Algolia for our Events search.

Chris Beard, Web Development Manager.