On-Site Search

Avatar of Chris Coyier
Chris Coyier on

CSS-Tricks is a WordPress site. WordPress has a built-in search feature, but it isn’t tremendously useful. I don’t blame it, really. Search is a product onto itself and WordPress is a CMS company, not a search company.

You know how you can make a really powerful search engine for your site?

Here you go:

<form action="https://google.com/search" target="_blank" type="GET">
  
  <input type="search" name="q">
  <input type="submit" value="search">
  
</form>

Just a smidge of JavaScript trickery to enforce the site it searches:

var form = document.querySelector("form");

form.addEventListener("submit", function(e) {
  e.preventDefault();
  var search = form.querySelector("input[type=search]");
  search.value = "site:css-tricks.com " + search.value;
  form.submit();
});

I’m only 12% joking there. I think sending people over to Google search results for just your site for their search term is perfectly acceptable. Nobody will be confused by that. If anything, they’ll be silently pleased.

Minor adjustments could send them to whatever search engine. Like DuckDuckGo:

https://duckduckgo.com/?q=site%3Acss-tricks.com+svg

Still:

  1. They will leave your site
  2. They will see ads

To prevent #1, Google has long-offered a site search product where you can create and configure a custom search engine and embed it on your own site.

There has been lots of news about Google shutting down that service. For example, “Google site search is on the way out. Now what?” Eeek! This was quite confusing to me.

Turns out, what they are really are shutting down what is known as Google Site Search (GSS), which is an enterprise product. It shuts down entirely on April 1, 2018. Google has another product called Google Custom Search Engine (CSE) that doesn’t seem to be going anywhere.

CSE is the thing I was using anyway. It has a free edition which has ads, and you can pay to remove them, although the pricing for that is also very confusing. I literally can’t figure it out. For a site like CSS-Tricks, it will be hundreds or possibly thousands a year, best I can tell. Or you can hook up your own AdSense and at least attempt to make money off the ads that do show.

In the wake of all that, I thought I’d try something new with search. Algolia is a search product that I’d heard of quite a few people try, and it seems pretty beloved. With a little help from the wonderfully accommodating Algolia team, we’ve had that going for the last few months.

If we were to set up an implementation difficulty scale where my HTML/JavaScript form up there is a 1 and spinning up your own server and feeding Solr a custom data structure and coming up with your own rating algorithms is a 10, Algolia is like a 7. It’s pretty heavy duty nerdy stuff.

With Alogolia, you need to bring all your own data and stucture and get it over to Algolia, as all the search magic happens on their servers. Any new/changed/deleted data needs to be pushed there too. It’s not your database, but generally any database CRUD you do will need to go to Algolia too.

On that same difficulty scale, if you’re adding Algolia to a WordPress site, that goes down to a 3 or 4. WordPress already has it’s own data structure and Algolia has a WordPress plugin to push it all to them and keep it all in sync. It’s not zero work, but it’s not too bad. The plugin also offers a UI/UX replacement over the default WordPress search form, which offers “instant results” as a dropdown. It really is amazingly fast. Submit the form anyway, and you’re taken to a full-page search results screen that is also taken over by Algolia.

For disclosure, I’m a paying customer of Algolia and there is no sponsorship deal in place.

It’s a pretty damn good product. As one point of comparison, I’ve gotten exactly zero feedback on the switch. Nobody has written in to tell me they noticed the change in search and now they can’t find things as easily. And people write in to tell me stuff like that all the time, so not-a-peep feels like a win.

I’m paying $59 a month for superfast on-page search with no ads.

It’s almost a no-brainer win, but there are a few downsides. One of them is the ranking of search results. It’s pretty damn impressive out of the box, returning a far more relevant set of results than native WordPress search would. But, no surprise, it’s no Google. Whatever internal magic is happening is trying it’s best, but it just doesn’t have the data Google has. All it has is a bunch of text and maybe some internal linking data.

There are ways to make it better. For example, you can hook up your Google Analytics data to Algolia, essentially feeding it popularity data, so that Algolia results start to look more like Google results. It’s not a trivial to set up, but probably worth it!

Anyway!

What do y’all use for search on your sites?