Designing your search engine results page (SERP)
Of course, a beautiful search experience doesn’t mean much if the results experience isn’t helpful and clear to the searcher. Thankfully, these tips will help you round out your site’s search UX.
Include a search bar on your results page
Search often doesn’t end after the first attempt. Whether the results presented don’t meet the searcher’s needs, or the searcher just decides to look for something else, it just makes sense to not force them to backtrack.
By placing a search bar on your results page — which Webflow does by default — you make it easy (and less frustrating) for searchers to give it another go. And if they’re looking for information on multiple subjects, they can easily open result after result in a new tab, without ever leaving the SERP.
Build a great empty state (aka, no results page)
Any designer worth the name knows the value of a great empty state. The core idea is that if you can’t provide someone with exactly what they’re looking for, you can propose alternative actions that keep users moving forward, instead of leaving them clueless.
In many interfaces, an empty state is the natural one for suggesting a creative action. No Google Docs yet? Why not create one?! No projects in your Webflow site? Hmmm … that blue button must be important.
But in search, there’s no creative action to suggest. Instead:
- Clearly state that there are no results for the searched terms. This is vital — you don’t want anyone to miss the result of their search amidst your suggestions for next steps.
- Don’t blame the user. It’s not their fault your site doesn’t have any content on said topic, so don’t be throwing in flippant comments like “We don’t write about web design, silly.”
- Give the searcher a next step. What you do here may depend on your site and its purpose, but you might try: suggesting alternative search terms, highlighting popular content, and adding a link back to the homepage. This is exactly what Google does with its “best match” suggestion.
Exclude content wisely
When a search algorithm “crawls” a site to create an index of its content, it’s not exactly what you’d call smart by default. In other words: it crawls and indexes everything. Which means a whole lot of duplicate results, as well as a host of results that might not be particularly useful for the searcher.
Thankfully, Webflow’s site search feature helps creates smarter results by:
- Automatically excluding Symbols, Collection Lists, utility pages, and password-protected pages
- Allowing you to tick a checkbox to exclude anything else you want to
Excluding Symbols and Collections Lists helps because these elements tend to contain content that’s repeated in multiple places on your site, only a few of which might actually be helpful. For example, if you made your main navigation menu a Symbol and it included the word blog, then any query of the word blog would return … every single page of your website!
Those default exclusions will get you a long way toward a fairly clean result set, but you’ll want to consider excluding:
- Any purely “functional” Collections. Collections that you created for reference or filtering, but that have non-useful Collection Templates (i.e., blank or content-free) should probably be omitted.
Example: In my spare time, I’m building a curation site to highlight awesome, content-driven websites. The site has a reference collection for “colors used.” I’ve designed pages for these colors, but at the moment, they’re just a full-page swatch of the color with its name and hex code. Not wildly useful, so I might want to exclude that from search for now.
- Displayed metadata elements. On the same project, every curated website’s detail page has a little table showing fonts, colors used, and a rating (expressed as an emoji). On previewing search results, I note that these elements display oddly — and worse, make little sense without context that the design provides. So I’ll probably omit the element containing those bits of metadata to clean up my results.
- Anything else that looks funky in results. It’s challenging to abstract all the potential problems with content exclusions, so just be sure to try lots of different queries on your site, and omit anything that doesn’t translate well from page to SERP.
Keep the slugs
By default, Webflow’s site search displays the page slug (the parts of the URL after the domain) for each result on a SERP.
Displaying the slug in search helps users better understand your site structure overall, and more importantly, helps them make decisions about which results are most appropriate for their needs.
For instance, if a person wants to find all your blog posts on content strategy, but isn’t interested in case studies that mention it, keeping the slug will help them home in on just the blog posts.
If your search solution doesn’t do this by default, consider turning it on. Or just, you know, use Webflow.
Highlight search terms in your results
Another useful feature of search is highlighting search terms in results. In Webflow and Google, this means that any words you searched for will be bolded in your result list. Like slugs, highlighting helps users quickly home in on the results that are most appropriate for their needs.
The highlighted terms draw the searcher’s eye, affirming that this content does indeed align with their query and encouraging them to read the contextualizing language around the search term’s appearance.
For example, if someone queries “design” on your site, which discusses all forms of design, highlighted terms can help searchers differentiate between posts on fashion design and typographic design.
Display results rationally
Based on your own experience with search, you might be tempted to make your SERPs display results in a simple list — just like Google does, right?!
But hold on a sec. Switch over to Google Images and try again. See? Now you’ve got a grid.
We discuss this in a little more depth in “How — and why — to build content curation sites with Webflow CMS,” but the long and short of it is:
- If an image can convey the bulk of required information, use an image-focused grid
- If a bit of text can convey the bulk of required information, use a text-focused list (and add images if useful)
When in doubt: steal from Google
Every internet user’s expectations around search are set by Google. So don’t be afraid to do what they do. It may not be “innovative” or whatever, but it sure will work.