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:
- They will leave your site
- 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?
Relevanssi plugin all the way. Super easy to use (even with custom post types and custom fields) and works very nicely indeed.
Relevanssi has limits though since it still has to search through the index DB table on your site. Algolia search responses time are sub 100ms, if not faster, since it is external. Relevanssi is fine up to 2k or so posts, anything more then go for external search.
That google/duckduckgo trick that you opened your article with is clever.
Elasticsearch
You ever hear of Apache Solr? It is a very capable java-based search engine that offers fuzzy searching and “did you mean?”. I’ve successfully got it working on many Drupal sites and can even search the content of uploaded files. There looks to be a WordPress implementation available as well.
We use Swiftype for our enterprise search. Same as Algolia, it requires a lot of structure work on your part. Once you have that in place it’s lightening fast and has a few features I really like, such as Results Ranking. It’s a bit light on the metrics side, but hoping to see improvement there.
SearchWP is my favourite. You can have multiple search engines (e.g. one for your whole site and one on your shop just for products) each with their own configuration and results relevance weightings. It’s a doddle to get up and running and there’s a nice bunch of extensions available.
I wrote a WordPress plugin to force your default search out to Google https://github.com/kingkool68/wordpress-screw-it-just-use-google No JavaScript needed.
I use swiftype. Originally they had good pricing for smaller sites, but then the pricing went way up. At this point I started experimenting with Algolia (and found their customer service to be impressive). However I ended up staying with swiftype. It took a bit of work to get it properly working, but has been great for autocompletes.
I Avoid search like the plague. Like you said it’s hard, and it’s easier to try to help someone built for providing that service do it better by finding what information they need, providing it so you can focus on other things.
I’m not a fan of giving up, but picking battles (like implementing or learning N search providers tech) I’m a fan of. It’s also an admittance to some extent someone has already given up. The structure is too deep, and the site isn’t intuitive if people on-site need to search across the entire site (if it’s vast, allow ordering by facet, build showcase areas etc).
The first search I ever built allowed finding cheats for games by name and platform. It made the most sense at the time, only my friends used it. It also ended up making less sense than clicking a platform, then a letter or genre, then a game (don’t build a search past basic without checking it’s being used). Don’t want to manually scan a list? Most browser clients provide on-page search that had your visitors covered since the 90’s. (Android is generally lacking in this, but all requests are slower anyway)
For clients I’ve setup a few search solutions. Most of it centres around trying to have 1000 top-tasks, either lack of direct links prominently featured, or lack too broad an offering.
One project I really enjoyed (and then enjoyed retiring) was a bespoke site search for a manufacturer of fashion accessories in a niche, that wanted to distribute on their own as well as re-selling. Their blog was separate to their web-store as e-com solutions off-the-shelf tend to have really poor publishing controls. Managing servers or even paying for them to be managed turned out to not be a priority for their core business too, so although initially promising, there were not funds to take it further. We managed to get the initial and combine BigCommerce product search and WordPress Blog and Page search to be pretty snappy. Turns out the people at Algolia etc are focusing on something really difficult, that doesn’t directly generate revenue for customers, and can be addressed in other ways. At a certain point, even being faster probably isn’t an advantage. Can you tell the difference between 300ms and 100ms when you’re not in a shooter? I’m not saying the human body can’t, just that context might be king for how fast, lenient, etc a site needs to be.
This year browse by swatch and style have proven much more effective for the same client as it doesn’t rely on striking a balance between accuracy, speed and design. It also doesn’t lean too heavily on any platform and is portable. If the business needs to shed or switch up suppliers, they can generally take an information architecture with them, preserving what they know works so they can resume experimenting once the migration is complete.
DuckDuckGo apparently uses their own implementation of Apache Solr according to this document:
https://duck.co/help/company/architecture
I’m using lunr which works great on small-medium size static websites, it has served me great. It is extendable which means you can write custom functions to add to its process (called a “pipeline”) and also supports multiple languages.
That bit of JS trickery is not really necessary, btw. – you can pass the site domain as an independent GET parameter/hidden form field named
as_sitesearch
as well.Actually, you can fine-tune quite a bit more, if you go to https://www.google.de/advanced_search – words to exclude, a preferred language for content to be surfaced (if your site is multi-language under one domain maybe), whether to search in title, URL or whole page content, limit for specific file types, …
All those turn into GET parameters when submitted, so it is quite easy to figure out what goes where, and pre-fill certain options using hidden fields on your own form.
The “numbers ranging from … to” feature even allows to add a unit of measurement (examples given
10..35 kg
,£300..£500
) – provided your content was structured well enough and indexed thoroughly by Google, that might even make you dream up features like a “no-cost price range search” for online shops, or stuff like that. (How well that would actually work in practice, might need testing.)If you want to avoid the hassle of preparing and sending all your data over some providers will crawl your site for you so you don’t even need to do anything but embed their code on your pages. I use these guys: https://zesearch.co/ mainly because they’re cheaper and it was simple to set it all up.
I’ve finally arrived at SearchIQ for a client, after using Google CSE (almost impossible to style the Google submit button). It actually looks and feels like your Algolia implementation. Though I’m getting bugged to upgrade to paid on the dashboard, for now I’m using the free version. Like Algolia, dropdown results as-you-type and then a dedicated page for all results. Shows icon-sized thumbnails too and you can add a generic image for pages/posts lacking an available image. Setup experience was a breeze.
Up front disclosure- I work at Cludo. That being said, if you’re looking for an easy to use platform that’s strong on the analytics front, give us a look. I’d say the biggest differentiators for us are the customizations and custom results rankings we enable, as well as direct phone and email support to all our clients. It’s also a very easy implementation (you can test it for free at the link below)
Here’s a link if you want to know a bit more- https://www.cludo.com/en/internalsitesearch1/
If I search something, I do that in Google Websearch. I would type “search csstricks” for this article (and finde it immediately).
I do so with every css question I have. I never use inbuilt Googlesearch in sites, I hate the design and they are not helpfull. Because 9 from 10 onsite searches are not useful, I never try them anymore. There should be a navigation or some sitemap that helps to find something. So I would not spend $59/month.
On the other hand – how many user use your onsitesearch?
While not updated for a few years, Perlfect http://www.perlfect.com/freescripts/search/ is an excellent script to create your own on-site search.
We run a fairly large website ( 12,000+ pages ) and have struggled with consistent search for years. Mostly because of bad structure/data in the first place. Since Algolia has been so quick and easy to implement, it’s given us more of a focus on getting the content right or at least, we can now cherry pick page content/data to export to Algolia in JSON format. We’re not at a point of feeding the entire site, but Algolia has been particularly useful for things like product pages.
Got to say I’m a fan. I know there are other options out there but since we’re a small team, Algolia has been a good fit.