We know the many benefits of the static web. For both static and dynamic websites, search is a feature people expect, whether it be a sitewide search or a more tailored faceted search for your products, services, or other content.
Depending on your technology stack, search may be added to your website using a number of search products such as Apache Solr, Apache Lucene, Elasticsearch, or via the site’s CMS or web framework. The Quant Search feature gives you the power to easily add faceted Algolia search pages to your static website.
First, you’ll need a Quant account and a process for pushing your website content into Quant. Syncing content can be done in different ways depending on your website technology. For Drupal, WordPress, and popular static site generators, we provide integrations to push your content into Quant. We also have an API for custom web applications.
Second, your Quant project must have search enabled which is an add-on feature. You can enable search in the Dashboard by editing the project and clicking the
Enable Search checkbox.
Once search is enabled in the Dashboard, look at the Search settings for your project. You will see that there is nothing in the search index (
Records: 0) even though you have previously synced content to Quant. Don’t worry… we will get that updated.
By default, Quant Search is set up to use the
h1 of the page for the search result title and metatags (
og:image) for the search result summary and optional image. See the
Default content extractors on the Search settings page.
These “extractors” can be changed to be whatever you want. You just need to add the
xpath information that corresponds to the content within the page. Check out this xpath cheatsheet.
For this example, we’ll stick with the defaults.
h1 of the page is used for the search result title. If you have multiple
h1s, the first one will be used. If you have no
h1s, the content will not be indexed.
h1 is missing, the source website has likely been intentionally modified to remove the
h1 from the page. The website should be updated to make sure at least one
h1 is present and is the title of the content. This is important for SEO as well.
The "meta description" is normally added to sites for improved SEO. This text is often what is shown in search engine results. To see if your content has this information, view the source code in your browser for a content page and make sure the meta description is showing up. It should look something like:
<meta name="description" content="An Italian inspired quiche with sun dried tomatoes and courgette. A perfect light meal for a summer day." />
If the meta description is missing, have your website team add this feature and then update all your pages to add relevant text.
For content that has images, you can configure the search results to show them. By default, this is grabbed from the
og:image in the page. Using an
og:image metatag in your content is also a best practice for SEO. You can view the content page’s source code to see if this is already in your content. It should look something like:
<meta property="og:image" content="http://umami.quantcdn.io/sites/default/files/styles/large_3_2_2x/public/mediterranean-quiche-umami.jpg" />
og:image is missing from your content, either have your website team add this feature or, alternatively, you can grab the image in the page a different way by changing the
xpath. Check out this xpath cheatsheet.
By default, the search result content is the same as the meta description. If your content is well-structured, you can update the
xpath to point at the correct DOM element. Check out this xpath cheatsheet.
Search facets can be added to search pages so that users can filter the content based on the facets. The facets that can be added depend on what website technology you are using and what structured metadata and content is available in the web pages.
For example, for Drupal websites, you can easily add content types and vocabularies as facets and, for WordPress, you can filter by content type, categories, and tags. You can also add custom “extractors” to your search settings that pull metadata out of the page and then use those for facets. An example is if you had a product type and added that to your page as a metatag or other structured markup. Then, a product type facet could be added to a search page that would allow filtering by types. You can also combine preconfigured facets (e.g. WordPress content types) with custom facets extracted from the content metadata.
Index Your Content
Once your content has the correct metatag information, you can push your content to Quant and it will update the search index and you'll see the search index status change.
Note, if you add content to the index that should be removed, click the
Clearbutton to clear the search index and then sync the content again.
Create Search Page
Now that the content has been indexed, we need a way to search for it, so let’s create a search page within the Dashboard.
1. Go to the Dashboard Search page.
2. Click the
Create button in the
Search pages section.
3. Choose a template and click the
Next button. You can change this later.
4. Configure the page settings including
Filtering. Then, click the
5. Configure the design settings including
Tag display, and
Custom CSS. Then, click the
6. For now, we’ll use the defaults, so click the
Submit button and you will see your search page listed. You can make as many search pages as you’d like. You can also edit the search page configuration later.
7. Click on the
Preview button to see your search page. If you have not provided any CSS yet, it will default to a simple style that can be used as-is for any site.
Search Page Styling
For some sites, the basic default styling will be sufficient. Or, perhaps just adding a bit of
Custom CSS in the search page. But, there are other options for styling as well.
- Edit the search page with the Code Editor to make adjustments. Here, you can add a header, footer, or other elements and styles to the markup.
- Add the search page in an iFrame on another page on your site, so it’s nested within it.
- Use the Algolia key provided on the Integrations page and build your own frontend (for example, using InstantSearch.js).
Note, if you edit the search page markup and then update the configuration afterwards, your markup changes will be overridden. One approach is to have a hidden search page that contains the latest configuration, alongside a public-facing search page that you tweak the markup. Then, if you do make configuration changes, just copy/paste that part of the hidden search page into your public-facing search page as needed.