Custom, Embeddable Site Search with Swiftype

By  on  

As hard as we try to make our website navigation and content structure as logical as possible, a large percentage of users would prefer a simple search box to find what they need.  That being the case, we need to ensure that site search is as accurate and smart as possible.  Oftentimes developers will try to roll their own site search (yuck), use an open source utility (usually yuck), or reach to Google Site Search, which will soon be unavailable.  Search is hard but that's where a service like Swiftype can come to the rescue.  Swiftype is a site search and third party content search service that allows you to provide incredible search capabilities to your users in very little time.

Quick Hits

  • Free to sign up!
  • Create your own site search and web crawler for any URL for improved search
  • Full analytics to monitor what users are searching for
  • Conversion tracking to get insight on what is and isn't working in your marketing and page structure
  • Result customization allows you to promote certain pages over others in search results
  • Provides a WordPress plugin for easy integration
  • Direct Swiftype to recrawl your site at any time
  • Enterprise search service allows you to index third party services (Dropbox, GitHub, Box, etc.) so you can search multiple services in one place

Site Search Setup

After you've signed up for a free trial account at Swiftype, the first step is creating a search property.  Simply provide a URL to the website and a name and Swiftype will immediately start indexing the site contents.

You can preview search results at any time with Search Preview feature.  I executed dozens of searches I thought would be popular and was really happy with search result order.  There were a few searches, however, where I would prefer one result was a bit higher than another, and that's where I found the Result Rankings feature very helpful!

Modifying Result Rankings

Swiftype does an excellent job of indexing content and providing the most relevant results but there may be cases where you'd like to manually modifying the order of search results based on keyword.  For example, one of my site's most popular posts is about upgrading Node.js but I'd much, much prefer my post on Using NVM to Manage Node.js Versions showed up first, since the first post provides legacy information.  Google Webmaster Tools doesn't allow me to modify result order so I'm somewhat helpless in correcting the issue on Google, but Swiftype allows me to correct the issue for my own site search:

All I need to do is drag and drop the result times and Swiftype remembers the preferred result order.  You can provide any warnings or notices on the legacy page but there's nothing like the user never seeing that page because the preferred search result is first!

Customize Keyword Weights

Since you probably know your content structure better than Swiftype does, Swiftype offers you the ability to experiment with custom weighting of keywords in different sections of the content, including headings, body content, images, etc:

Once you've played with the weighting of different aspects of site content, you can preview search results based on those weights.  If you find better weighting -- awesome!  If not it means Swiftype's done an excellent job with their default weighting system.

Analytics and Conversion Tracking

Analytics and conversion tracking are a huge part of marketing and sales analysis.  Google Analytics can provide you with that information but the variable they don't account for is the ability to custom weight search results as well as the ability to modify search ranking;  Swiftype lets you control more of search so that user searches can turn into conversions!

All you have to do is add the conversion tracking code provided by Swiftype and you instantly have conversion tracking!

Enterprise Search

While exploring Swiftype's capabilities, I found Enterprise Search and was blown away.  Web development has gotten so big that we've broken off into a number of specialties like ops, front end, back end, and so on.  At the same time we've started using more specialized web services.  There are team tools like HipChat, Slack, and a variety of other tools for text and video communication.  We have file storage and hosting services like Google Drive, Dropbox, Box, and Microsoft's OneDrive.  We have so many focused services now, however, that we run info a frequent problem:  where the hell do we find anything?

Which service did I upload those files to?  What site or git repository had the code and documentation for the API I need to use?  Choice is good but it also complicates our ability to find what we need.   Swiftype's enterprise search service allows you to search between multiple external services so you can find what you need faster.

Adding Sources

After you've signed up for a free trial account, the next step will be adding "sources" (services to index for search) via Swiftype's elegant interface.  Swiftype offers a bunch of sources for services I use frequently, including GitHub, Dropbox, etc.:

Click on each service to authorize Swiftype (via traditional OAuth which we're all used to).  Swiftype indexes each service to make search for its contents quick and easy!

Adding a Web Crawler

While Swiftype features a number of popular services, if you have any website you'd like to add to your search result pool, you can easily do so using Swiftype's Web Crawler Source feature.  You may want to add your websites, your intranet, a documentation site, or any site for that matter.  Simply provide Swiftype the URL to crawl and Swiftype will immediately start indexing the website.  I added my website:

Web Crawler sources, much like Swiftype's preconfigured sources, are synced periodically to ensure the latest content is available for search:

No information other than the base URL is required so adding any website you wish to be indexed is simple and convenient.  You don't even need to be the website owner -- you can choose which content providers you believe are trustworthy for yourself, your teammates, and your organization.


Both of Swiftype's awesome offerings, Site Search and Enterprise Search, are really impressive.  The amount of control you can take over your own site's search is amazing; no mystery box of logic or frustration over search result order -- you can customize all of that, making the search experience much more effective than Google.  I enjoyed using Enterprise Search as well.  I was instantly able to search a host of GitHub source, my blog, and Dropbox code samples at the same time; no more wondering which service was hosting the information I wanted.

Instead of rolling your own search or using a lacking free alternative, give Swiftype a shot.  I've found WordPress' search underwhelming so I look forward to using Swiftype in my upcoming redesign.  Users demand to get to the information they need faster -- Swiftype gets them there!

Recent Features

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    Create a Trailing Mouse Cursor Effect Using MooTools

    Remember the old days of DHTML and effects that were an achievement to create but had absolutely no value? Well, a trailing mouse cursor script is sorta like that. And I'm sorta the type of guy that creates effects just because I can.

  • By
    CSS Fixed Positioning

    When you want to keep an element in the same spot in the viewport no matter where on the page the user is, CSS's fixed-positioning functionality is what you need. The CSS Above we set our element 2% from both the top and right hand side of the...


  1. 300$ a month for the basic plan!?

    Thanks, but I’d rather roll my own search.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!