Using Algolia for a better 404 experience

[mmorris8]

Most 404 errors are off by one letter typos. So I wanted to have Algolia do a search on just the link facet to get matches, and do this while PHP renders the 404 page. This wasn't as straight forward as I thought, so I figured I'd shared.

I resorted to using a replica index of my main wordpress search index that is configured to search only on the link facet. If there's a better way to accomplish this I'm all ears - not too happy about needing to use up an index to do this.

After that the build was pretty close to the PHP examples given in the docs

$response = $client->search(
  ['requests' => [
    ['indexName' => ALGOLIA_INDEX_PREFIX . 'wp_search_link', 'query' => $_SERVER['REQUEST_URI']]
  ]],
);

$context['results'] = $response['results'][0];

Note, I maintain different indexes for different environments. This allows me to try out different configurations without disturbing prod.

And in the Twig template we print this out. (I use Timber / Twig to render pages as using PHP directly is horrible).

  {% if (results.hits) %}
  <p>The following pages are similar to the URL tried.</p>
  <ul>
    {% for hit in results.hits %}
    <li><a href="{{ hit.link }}">{{ hit.title }}</a></li>
    {% endfor %}
  </ul>
  {% else %}
  <p>No page matches the URL tried.</p>
  {% endif %}

Hope someone finds this useful.

[Haroenv]

This is very interesting! I remember a project we made internally once that adds algolia in the DNS layer to automatically redirect to existing typo matching pages. This is of course a more realistic way to search for the pages that are similar to the current one.

Thanks for sharing 🦋