Smart 404

The Smart 404 feature replaces 404 pages with a Site Search 360 page that provides relevant search suggestions.

An incomprehensible 404 page might force many of your visitors to leave your website and choose a competitor instead. Using our new Smart 404 feature, you can make sure that your visitors always find what they are looking for.

The Smart 404 feature returns results from the Site Search 360 index based on the URL content. We take URL elements, except for the domain, and use them as a search query for our system. An important note is that we remove the "404" text from the URL so as to not influence the results with it.

Simply add a smart404 object to your ss360Config and let us do the job of finding out what the visitor expected to find. All you need to do is specify a unique identifier that indicates your 404 page (for example, page title), a CSS selector pointing to a page block where alternative results should be rendered, and a caption:

var ss360Config = {
   ...,
   smart404: {
      identifier: 'Page not found', // The string in the title that identifies the page as a 404 page
      resultSelector: '#ss360-404', // A CSS selector that points to the area in which the alternative links should be shown
      caption: 'Try checking this instead:' // Caption for 404 results
   }
};

Here's a live example of what a Smart 404 page may look like.

The https://docs.sitesearch360.com/beef-burgers URL no longer exists, but let's imagine a site visitor landed on this page somehow. Smart 404 allows you to automatically break down the URL path of the broken page and trigger a search for beef burgers in this case:

Here's the configuration for the example above:

window.ss360Config = {
    siteId: 'spoonacular.com', /* Replace with your site id */
    searchBox: {
        selector: '#searchBox' /* Replace with css selector of your search box */
    },
    results: {
        embedConfig: {
            contentBlock: '.example__page-content-block' /* Replace with the css selector of the DOM element you want to use */
        }
    },
    smart404: {
        caption: 'We couldn\'t find what you were looking for but these results might help',
        identifier: 'page not found',
        resultSelector: '#ss360-404',
    }
};