Waarom gebruiken mensen überhaupt een zoekfunctie binnen een website? Omdat ze op zoek zijn naar voor hun relevante content die ze blijkbaar niet (snel genoeg) kunnen vinden door gewoon te browsen op je website.

Soms levert een zoekresultaat inderdaad het juiste antwoord op de zoekopdracht van je klant (zoals informatie over het retourbeleid van een bedrijf) of een lijst met relevante producten of content (zoals blogartikelen over pagebuilder-plugins). Ongeacht de zoekopdracht is er één ding zeker:

Bezoekers verwachten snelle en goede resultaten als ze zoeken op je WordPress-website.

Als je naar het online gedrag van consumenten in het algemeen kijkt, is dit eigenlijk ook niet meer dan logisch. Google heeft bijvoorbeeld een nagenoeg onhaalbare richtlijn gesteld voor wat betreft online zoeken en mensen zijn dus eigenlijk enorm verwend. Volgens SparkToro zijn inmiddels meer dan de helft van de zoekopdrachten bij Google “zero click. Dat betekent dat Google zijn zoekalgoritme zo efficiënt heeft gemaakt dat mensen meestal niet eens een website hoeven te bezoeken om een antwoord op hun vragen te krijgen.

De bezoekers van jouw website verwachten natuurlijk geen zero-click resultaat. Ze gebruiken de zoekopdracht om een bepaald deel van je website te vinden. Maar een zoekopdracht bij Google en bij WordPress hebben wel degelijk overeenkomsten: bezoekers willen snelle, gemakkelijke en bovenal superrelevante resultaten krijgen.

Er is alleen één klein probleem. De standaard zoekfunctie van WordPress is nou niet echt om over naar huis te schrijven.

Daarom leggen we in dit artikel uit wat je moet weten over het optimaliseren van de zoekfunctie van je WordPress-website voor jouw bezoekers.

Hoe belangrijk is een interne zoekfunctie eigenlijk?

Als je een website op de juiste manier ontwerpt neem je je bezoekers als het ware bij de hand om ze door je website heen te leiden. Een goed georganiseerd menu helpt daarnaast ook een boel.

Desalniettemin kan een interne zoekfunctie een belangrijk hulpmiddel zijn.

Zie de zoekfunctie van je site als een snel één-tweetje met je bezoekers. Wanneer je zoekfunctie goed werkt, kan het je bezoekers binnen enkele seconden van stap 1 naar stap 5 brengen.

Dit is vooral erg prettig bij WordPress-websites met een grote hoeveelheid content. Hier wat voorbeelden:

eCommerce

Webshops zoals Nordic Ware helpen bezoekers vanaf het moment dat ze op de site komen:

Nordic Ware: startpagina met een zoekfunctie in de header
Nordic Ware: startpagina met een zoekfunctie in de header

Bezoekers worden gestuurd om naar producten te zoeken door de zoekbalk rechtsboven te gebruiken:

Nordic Ware: zoekresultaten
Nordic Ware: zoekresultaten

Door de zoekfunctie voor producten prominent te tonen hoeven bezoekers nooit door het menu en/of categorieën te zoeken om een specifiek product te vinden.

Blogs, podcasts en nieuwssites

Websites met een grote hoeveelheid content zoals Kinsta, waar we nu 39 pagina’s met blogartikelen hebben, hebben zeker profijt van een zoekbalk:

Kinsta: blogpagina
Kinsta: blogpagina

Door de zoekfunctie – die is afgestemd op de blogs – te gebruiken, kunnen gebruikers snel naar de onderwerpen zoeken die voor hun relevant zijn.

WordPress zoekbalk bovenaan de Kinsta-blog
WordPress zoekbalk bovenaan de Kinsta-blog

Naarmate blogs groter worden, kan het navigeren ervan lastiger worden. Aangezien je de overzichtspagina’s vanuit snelheidstechnisch oogpunt kort wil houden, is het een slecht idee om meer artikelen per pagina te laten zien.

Je kunt dan beter een zoekbalk gebruiken om bezoekers te helpen bij het vinden van voor hun interessante artikelen.

Advertentie-websites

Op websites die advertenties verzamelen (denk aan verkoop of verhuur van huizen, Marktplaats, professionele diensten) is ergens naar zoeken meestal het eerste wat bezoekers doen. Zie bijvoorbeeld Trulia:

Trulia: zoeken op de startpagina naar huizen
Trulia: zoeken op de startpagina naar huizen

Het is cruciaal dat het zoekproces op deze sites eenvoudig is en bovendien goed werkt. Zoek bijvoorbeeld op een locatie, een naam, of een functie. Vervolgens kunnen gebruikers op de resultatenpagina de resultaten verder filteren:

Trulia: voorbeeld van een resultatenpagina
Trulia: voorbeeld van een resultatenpagina

Kenniswebsites

Een zoekfunctie is vooral erg handig voor hulpwebsites of kenniswebsites voor producten, zoals Elementor:

Elementor: onderwerpen en tellers bij de kennisbank
Elementor: onderwerpen en tellers bij de kennisbank

Een zoekfunctie helpt om bezoekers sneller antwoorden op hun vragen te vinden dan wanneer ze handmatig zouden zoeken:

Elementor: de documentatie doorzoeken op "template"
Elementor: de documentatie doorzoeken op “template”

In veel gevallen kunnen gebruikers van SaaS-producten hun problemen zelf oplossen. Als je dus wil zorgen dat je live chat en helpdesk niet bestookt worden met makkelijkere, dan moet je je site zo instellen dat mensen makkelijk antwoorden kunnen vinden in je kennisbank.

Conclusie

Als je ergens een grote hoeveelheid van hebt op je website, denk dan niet dat je navigatie er wel voor zorgt dat je bezoekers kunnen vinden wat ze zoeken. Het bouwen van een zoekfunctie zoals de Fast Pass helpt ze om snel antwoorden te vinden.

Hoe voeg je de zoekfunctie toe aan je WordPress-website

Je hebt verschillende mogelijkheden om een eenvoudige zoekfunctie op je WordPress-website te implementeren:

Het toevoegen van een zoekfunctie aan je menu, via je thema

Afhankelijk van het WordPress-thema dat je hebt geïnstalleerd, kun je wellicht met een paar klikken een zoekfunctie toevoegen aan je website. In dit voorbeeld gebruik ik het Astra thema, die overigens erg snel blijkt te zijn!

Het eerste wat je doet is naar Weergave > Customizer te gaan:

WordPress - navigeer naar het Customize menu
WordPress – navigeer naar het Customize menu

Daarna ga je naar Header> Primary Menu.

WordPress - pas het menu aan
WordPress – pas het menu aan

Onder “Last Item in Menu”, selecteer je “Search” in het dropdownmenu.

WordPress - voeg een zoekbalk toe aan je menu
WordPress – voeg een zoekbalk toe aan je menu

Dit voegt een zoekicoontje en zoekbalk toe aan als het laatste element in je menu.

WordPress - zoekbalk toegevoegd via de thema-instellingen
WordPress – zoekbalk toegevoegd via de thema-instellingen

Wanneer je andere WordPress-thema’s gebruikt, vind je deze instellingen wellicht op een andere plek. Als het beschikbaar is, vind je het meestal onder de instellingen van de “Header”. Het alternatief is handmatig een zoekfunctie toevoegen via de hieronder beschreven opties.

Voeg de zoekfunctie toe met een WordPress-widget

WordPress widgets maken het mogelijk om functies en content toe te voegen op plekken naast, boven en onder je daadwerkelijke content. Denk bijvoorbeeld aan de zijbalk en de footer.

Een voorbeeld van zo’n contentblok is dus een zoekbalk.

Begin door Widgets te vinden in het Weergave-menu.

WordPress- vindt het Widgets-menu
WordPress- vindt het Widgets-menu

Hier vind je alle beschikbare widgets. Afhankelijk van het thema of sjabloon dat je gebruikt, zie je hier misschien alleen maar een zijbalk of footer, of een meer uitgebreide selectie:

Voorbeeld van widgets
Voorbeeld van widgets

Je moet nu beslissen waar je je zoekbalk wilt hebben.

Stel dat je van plan bent elke dag nieuwe content voor je blog te publiceren, dan weet je dus dat je archief snel zal groeien. Dan is het verstandig om op elke blogpagina een zoekbalk te hebben.

Scroll helemaal naar onder bij je widgets en selecteer de “Zoeken”-widget.

Search widget
Search widget

Je kunt er direct op klikken en kiezen waar je de zoekbalk wilt hebben:

Toevoegen van een Search-widget via het dropdown menu.
Toevoegen van een Search-widget via het dropdown menu.

Je kunt de widget ook naar het element slepen waar je het wilt gaan laten zien.

Toevoegen van de Search-widget door te slepen.
Toevoegen van de Search-widget door te slepen.

Als je de widget hebt waar je ‘m hebben wilt, geef je de widget een naam:

Geef de Search-widget een titel

Sla de veranderingen op en bezoek je website om te checken dat alles er goed uitziet.

Zoekbalk toegevoegd aan het blog
Zoekbalk toegevoegd aan het blog

Je kunt de zoekbalk nu bovenaan het blog zien, waar je lezers het meteen kunnen gebruiken.

Toevoegen van een zoekfunctie aan de content van je websites via WordPress-tools

Alhoewel het soms handig is dat je bezoekers altijd toegang tot de zoekfunctie hebben, kan het ook zijn dat je de zoekfunctie liever in de content van je pagina’s hebt.

Er zijn een paar manieren om dat te doen:

Met de WordPress-Editor

De Gutenberg Editor heeft het veel makkelijker gemaakt om een pagina te ontwerpen, zonder dat je HTML of shortcodes hoeft te gebruiken.

Eén van de elementen die je hier mee kunt toevoegen aan je pagina’s is een search-widget:

Search-widgetblock in Gutenberg
Search-widgetblock in Gutenberg

Als je deze methode gebruikt heb je meer controle over hoe de zoekbalk er precies uitziet. Zo kun je de titel van de zoekbalk veranderen, de tekst van de placeholder en de zoekknop:

Aanpassen van je zoekbalk via Gutenberg
Aanpassen van je zoekbalk via Gutenberg

Je kunt zelfs de stijl van het zoekblok aanpassen via aanpasbare CSS-classes.

Met een pagebuilder-plugin

Mensen die liever werken met een drag-and-drop-plugin zoals Elementor, kunnen de search-widget toevoegen via die plugin. Het proces lijkt erg op dat van Gutenberg.

Met een nieuwe pagina of artikel open en de Elementor-editor geactiveerd, zoek je op de WordPress search-widget binnen je elementenlijst:

Search-widget in Elementor
Search-widget in Elementor

Sleep het zoek-element naar waar je het op de pagina wilt hebben. Dit is bijvoorbeeld een 404-pagina die gebruikers een zoekbalk biedt om alsnog op de juiste plek uit te komen.

Voorbeeld van een 404-pagina met zoekbalk
Voorbeeld van een 404-pagina met zoekbalk

Zoals je kunt zien geeft een page builder-plugin je meer controle dan de Gutenberg-editor over waar de zoekbalk precies verschijnt.

Met een thema

Soms zul je ook een thema of sjabloon vinden dat direct een zoekfunctie toevoegt aan de content van je website. Maar het type thema dat dit automatisch doet is vaak erg gespecialiseerd, zoals het Residence Real Estate thema:

Demo van het Residence Real Estate thema
Demo van het Residence Real Estate thema

Aangezien het zoeken op dit soort advertentie-websites al snel ingewikkeld wordt, is het logisch dat de ontwikkelaar van het thema de zoekfunctionaliteit meteen bij het sjabloon inbouwt.

Boekingswebsites zijn nog zo’n voorbeeld van thema’s met ingebouwde zoekfuncties, zoals deze demo van het Travel Booking thema:

Demo van het Travel Booking thema
Demo van het Travel Booking thema

Het scheelt natuurlijk een hoop als er al zoekfunctionaliteit in je WordPress-thema is ingebouwd. En als het thema ook geoptimaliseerd is voor prestaties, dan zal je dit ook terugvinden in de zoekfunctie – weer een probleem minder dus.

Toevoegen van een WordPress zoekfunctie via code

Je kunt de zoekfunctionaliteit ook toevoegen aan je website door het er zelf in te programmeren. En vrees niet, het is eigenlijk heel simpel!

Dit doe je door naar Weergave > Editor te gaan

How to access the Theme Editor in WordPress.
Theme Editor

Hier maak je een shortcode aan voor een zoekbalk door middel van het themabestand functions.php:

Het functions.php thema-bestand
Het functions.php thema-bestand

Onderaan dit bestand voeg je het volgende stukje code toe:

add_shortcode( 'shortcodename', 'get_search_form');

Vervang “naamshortcode” met je eigen titel voor het zoekformulier. Zorg dat het alleen kleine letters bevat, geen spaties, cijfers of symbolen. Als je het bestand vervolgens updatet, kun je de shortcode op je website gaan gebruiken.

Hier is een voorbeeld:

Een aangepaste shortcode om een zoekbalk toe te voegen aan je website
Een aangepaste shortcode om een zoekbalk toe te voegen aan je website

De shortcode voeg je op dezelfde manier toe zoals je normale tekst zou toevoegen. Onthoud wel dat je het moet afsluiten met rechte haken [ ].

Alhoewel je de zoekbalk niet in je editor zult kunnen zien, kun je een preview van je website bekijken om het in je front-end te zien:

Zoekbalk toegevoegd d.m.v. shortcode
Zoekbalk toegevoegd d.m.v. shortcode

Let op: ook al is dit maar een kleine bewerking aan je thema – en volstaat deze korte uitleg voor dit artikel – is het altijd beter om een child-thema aan te maken en daar de codewijzigingen aan toe te voegen dan de code van je thema rechtstreeks aan te passen.

Een opmerking over de beperkingen van de WordPress zoekfunctionaliteit

Je hebt nu wel in de gaten dat er legio mogelijkheden zijn om de eenvoudige zoekfunctionaliteit van WordPress toe te voegen aan je website. Maar is deze zoekfunctie wel voldoende?

Helaas is het antwoord enigszins teleurstellend. Tenzij je een hele kleine website hebt of je kan leven met beperkte zoekfunctionaliteiten, is deze basisfunctionaliteit waarschijnlijk te beperkt. Laat me dat even toelichten.

De standaard zoekfunctie van WordPress zoekt door de volgende typen content binnen je blogartikelen en webpagina’s:

  • Paginatitels
  • Teksten van alinea’s
  • Afbeeldingstitels
  • Bijschriften van afbeeldingen
  • Alternatieve teksten voor afbeeldingen
  • Bestandsnamen

Dit is natuurlijk ontzettend gelimiteerd. Als je bijvoorbeeld resultaten wilt van andere typen content (bijvoorbeeld je WooCommerce-producten) zal de basisfunctionaliteit dat niet laten zien. Dat geldt voor meer elementen op je website, zoals:

De zoekfunctie van WordPress is niet alleen beperkt in het soort resultaten dat het toont. Het is ook erg beperkt qua grootte. Hoe groter je website wordt, hoe moeilijker het wordt om de resultaten te krijgen en hoe langer je bezoekers dus moeten wachten.

Maar wat moet je doen als je een krachtigere oplossing wilt dan de standaard zoekfunctie van WordPress?

Laten we enkele mogelijkheden bekijken.

Hoe verbeter je de interne zoekfunctie van je WordPress-website

Het volgende stukje over het verbeteren van de zoekfunctie is voor jou relevant als je:

  1. Meer dan duizend pagina’s met content of producten op je website hebt.
  2. Ziet in je data dat je interne zoekfunctie veel gebruikt wordt, maar niet tot conversies leidt.
  3. Je zoekfunctie veel te doen krijgt, maar je webhostingserver moeite heeft de verzoeken te verwerken (oftewel langer dan enkele seconden nodig heeft om de resultaten te laden).
  4. Jouw website wil kunnen opschalen zonder dat je bang hoeft te zijn dat je zoekfunctie het op een gegeven moment begeeft.
  5. Denkt dat je niet genoeg hebt aan de standaard zoekfunctionaliteit. Je bent op zoek naar iets geavanceerder en flexibeler.

Ben je er klaar voor? Hier zijn 6 cruciale verbeteringen die je kunt doorvoeren bij je WordPress zoekfunctie:

Tip 1: Make een speciale zoekpagina

Maak een speciale zoekpagina voor je gebruikers, in plaats van alleen een simpele zoekbalk.

Voorbeeld: zoeken naar "denim" in het menu
Voorbeeld: zoeken naar “denim” in het menu

Het is niet dat je bezoekers onbekend zijn met het gebruiken van een zoekopdracht in een zoekbalk, maar je kunt hun bezoekerservaring sterk verbeteren met een speciale zoekpagina.

Om deze te maken, moet je back-end toegang hebben tot je website, via FTP of een bestandsmanager.

Als je in je WordPress-database bent, ga je naar het volgende bestandspad:

/wp-content/themes/[je themanaam]/page.php

page.php is het bestand dat de basisstructuur van je webpagina’s bepaalt. Het is dus een sjabloon voor de pagina’s. Hier ga je nu een sjabloon voor je zoekpagina maken.

Kopieer page.php en noem het nieuwe bestand searchpage.php. Vervolgens open je dit om het te bewerken.

Voorbeeld van page.php code gekopieerd naar een nieuw bestand
Voorbeeld van page.php code gekopieerd naar een nieuw bestand

De meeste code binnen dit bestand zul je moeten vervangen, aangezien dit bedoeld is voor een standaard webpagina of blogartikel. Je wilt juist alles weg hebben zodat je alleen dat overhoudt wat je nodig hebt voor je zoekpagina. Zo ziet mijn zoekpagina eruit:

<?php
/*
Template Name: Search Page
*/
?>
<?php
get_header(); ?>

<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
<h1>Search Our Shop</h1>
<p>Welcome to the online shop of awesomeness! Here you will find all kinds of products to revolutionize how you work, live, and play.</p>
<p>Use the search form below to get yourself moving in the right direction.</p>

<?php get_search_form(); ?>

		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer(); ?>

De WordPress Codex biedt meer informatie over wat je wel en niet kunt doen tijdens het maken van een eigen zoekpagina. Maar als je het resultaat van de code hierboven prima vindt, dan is het enige wat je moet doen de content veranderen tussen:

<main id="main" class="site-main" role="main">

En:

<?php get_search_form(); ?>

Als je het searchpage.php bestand opgeslagen hebt kun je teruggaan naar WordPress. We moeten nu een nieuwe pagina aanmaken, liefst met de naam “Search” of “Zoeken”.

Stel een titel in en open de “Page Attributes” op de zijbalk. Je ziet dan een sjabloon voor de “Search Page”, die je net hebt aangemaakt:

Sjabloon voor Search Page
Sjabloon voor Search Page

Selecteer dit sjabloon en publiceer de pagina. Je zult het nu kunnen zien op de live URL, onder https://jouwdomeinnaam.com/search/. En als je inderdaad (grotendeels) de code hierboven hebt gebruikt, ziet dat er ongeveer zo uit:

Voorbeeld van een aangepaste zoekpagina in WordPress
Voorbeeld van een aangepaste zoekpagina in WordPress

Nu deze pagina is aangemaakt en gepubliceerd, kun je er verder mee doen wat je wilt. Je kunt het toevoegen aan je menu of er naartoe linken. Zorg dat de eventuele link ernaartoe wel goed geplaatst is.

Tip 2: Zorg dat je zoekfunctie verder reikt dan alleen pagina’s en artikelen

De tip hierboven zorgt voor een nieuwe locatie voor je zoekpagina, maar verandert niets aan de beperkte zoekfunctionaliteit. Gelukkig zijn er enkele plugins die ons hiermee kunnen helpen.

Upgrade de standaard zoekfunctie van WordPress met WP Extended Search

Als je alleen maar wilt dat je zoekfunctie meer typen artikelen doorzoekt, is WP Extended Search een goede optie.

WP Extended Search instellingen in WordPress
WP Extended Search instellingen in WordPress

Met deze plugin krijgen je bezoekers resultaten van:

    • Artikelen
    • Pagina’s
    • Mediabestanden
    • Categorieën
    • Tags
    • Samenvattingen
    • Medata (zoals auteursnamen)

Deze plugin is lichtgewicht en eenvoudig in te stellen, en verbetert je zoekfunctionaliteit. Prima dus voor blogs en websites van kleinere bedrijven.

Upgrade de zoekfunctionaliteit van WooCommerce met Advanced Woo Search

Als je een e-commerce website hebt kun je ook de Advanced Woo Search plugin gebruiken.

Zodra je deze activeert, kun je de WooCommerce zoekbalk overal op je website plaatsen. Als je alle standaard zoekbalken van WordPress wilt vervangen met de WooCommerce-versie, heeft de plugin een handige optie “Seamless integration” die dat automatisch voor je doet.

Je kunt de nieuwe zoekbalken natuurlijk ook handmatig toevoegen als widget of shortcode. Net wat jij handig vindt.

Het formulier ziet er net zo uit als het standaard WordPress-zoekformulier:

Voorbeeld van Advanced Woo Search
Voorbeeld van Advanced Woo Search

Allereerst zoekt deze nieuwe zoekfunctie ook door de content van je WooCommerce-producten én metadata, inclusief de titel, SKU, korte beschrijving, categorie, tag en ID.

Allereerst zoekt deze nieuwe zoekfunctie ook door de content van je WooCommerce-producten én metadata, inclusief de titel, SKU, korte beschrijving, categorie, tag en ID.

En dit is het tweede verschil:

Advanced Woo Search: live zoekresultaten
Advanced Woo Search: live zoekresultaten

Zodra je bezoekers hun zoekopdracht beginnen te typen, zien ze meteen overeenkomende zoekresultaten. Dit staat bekend als ‘live’ zoekopdracht en wordt onmiddellijk uitgevoerd, dankzij het gebruik van AJAX.

Als dit je aanspreekt, maar je op zoek bent naar iets robuusters of snellers, lees dan vooral door.

Tip 3: Verbeter de manier waarop zoekresultaten worden getoond

Laten we het eens hebben over de manier waarop je zoekresultaten worden getoond aan je bezoekers en hoe je dat kunt verbeteren.

Onderstaand voorbeeld laat het belang van deze tip goed zien:

Standaard weergave van zoekresultaten
Standaard weergave van zoekresultaten

WordPress geeft standaard de zoekresultaten op deze manier weer. Bovenaan de pagina staat “Zoekresultaten voor: [zoekwoord]” en daaronder staan dan alle artikelen en pagina’s die daarmee overeenkomen. Als er een uitgelichte afbeelding is (zoals de broek hierboven), wordt die volledig weergegeven.

Vervolgens wordt er een deel van de beschrijving weergegeven:

Zoekresultaten met een grote afbeelding en deel van de beschrijving
Zoekresultaten met een grote afbeelding en deel van de beschrijving

Dit is slechts één van de resultaten. Stel je voor hoe irritant het is om langs al deze zoekresultaten te gaan als er meerdere matches met “denim” zijn, laat staan tientallen of zelfs honderden.

Om dit op te lossen, gaan we een WordPress-plugin gebruiken.

Verbeter de layout van je zoekformulier met Ivory Search

Net als de plugins die hierboven werden genoemd, zorgt Ivory Search ervoor dat je kunt kiezen welke typen content en metadata er doorzocht worden. Maar met deze plugin hoef je niet meer te kiezen tussen standaard pagina’s en e-commerce. Je kunt kiezen wat je wilt:

Ivory Search instellingen
Ivory Search instellingen

Wat verder noemenswaardig is aan deze plugin is dat het ook de mogelijkheid heeft om je zoekformulier naar smaak aan te passen:

Ivory Search: ontwerp op maat in de thema Customizer
Ivory Search: ontwerp op maat in de thema Customizer

Je krijgt de volledige controle over alle aspecten van je zoekformulier:

      • Kleuren
      • Tekst
      • Stijl
      • Animatie van het formulier
      • Laad-afbeelding

Daarnaast kun je zaken zoals live AJAX-zoeken instellen en zorgen dat je bezoekers de resultaten in realtime kunnen zien:

Live zoekresultaten met een -livezoekbalk door Ivory Search
Live zoekresultaten met een -livezoekbalk door Ivory Search

Zie deze plugin als de volgende stap binnen het zoeken in WordPress.

Aanpassen van de weergave van zoekresultaten met Ajax Search

Alleen het uiterlijk van je zoekbalk zal geen blijvende indruk maken op je bezoekers. Het gaat er vooral om hoe je de resultaten laat zien.

Met de Ajax Search Lite en Pro plugins, zullen je bezoekers onder de indruk zijn van een snellere en slimmere zoekfunctie.

Hier zijn enkele voorbeelden van wat je ermee kan:

Ajax Search plugin: zoekgedrag
Ajax Search plugin: zoekgedrag

Behaviors maakt de zoekervaring veel efficiënter voor bezoekers door zaken zoals het direct openen van het zoekformulier zodra ze beginnen met typen, en ze door te sturen naar de zoekresultaten wanneer ze op Enter drukken.

Ajax Search plugin: autocomplete en suggesties
Ajax Search plugin: autocomplete en suggesties

Autocomplete & Suggestions gebruiken features van Google Search om het zoeken nog sneller en makkelijker te maken voor bezoekers.

Ajax Search plugin: markeren van sleutelwoorden
Ajax Search plugin: markeren van sleutelwoorden

Keyword Highlighting is verder een nuttige feature die de woorden markeert waarop bezoekers hebben gezocht. Hierdoor zien je bezoekers sneller welke resultaten voor hun relevant zijn.

Zo ziet dat eruit:

Gemarkeerde zoekwoorden
Gemarkeerde zoekwoorden

De plugin geeft je ook de mogelijkheid te bepalen hoe de resultaten weergegeven moeten worden: hoe de resultatenpagina gestructureerd is en welke elementen zichtbaar moeten zijn (bijvoorbeeld de uitgelichte afbeelding + uittreksel + naam van de auteur).

Daarnaast kun je de zoekmachine opdracht geven om zelf afbeeldingen te zoeken. Als een uitgelichte afbeelding bijvoorbeeld niet beschikbaar is, dan kun je ervoor zorgen dat in plaats daarvan de eerste afbeelding op de pagina wordt gebruikt.

Je kunt ook bepalen in hoeverre elke afbeelding verkleind moet worden. Zo kun je de resultatenpagina veel overzichtelijker en korter maken – vooral belangrijk naarmate je hoeveelheid content toeneemt.

Tenslotte zorgt deze plugin er niet alleen voor dat je resultaten er beter uit zien. Het zorgt er ook voor dat je bezoekers ze sneller voor hun neus hebben.

Ajax Search plugin: geoptimaliseerde prestaties voor een snellere zoekfunctie
Ajax Search plugin: geoptimaliseerde prestaties voor een snellere zoekfunctie

Er zijn drie aparte optimalisaties binnen de plugin die je prestaties kunnen verbeteren:

      • Het toepassen van een aparte AJAX-handler.
      • Het uitschakelen van het verkleinen van afbeeldingen.
      • JavaScript laden in de footer.

Met deze drie instellingen wordt je webserver minder snel overbelast met continue zoekopdrachten.

Maar dit is nog maar het topje van de ijsberg als het gaat om het versnellen van je zoekfunctie binnen WordPress. Hieronder gaan we nog een stapje verder met behulp van Elasticsearch.

Tip 4: Versnellen van zoeken binnen WordPress

Alhoewel de features en het uiterlijk van de zoekfunctie van je WordPress-installatie prominente plek verdienen in dit artikel, is het ook belangrijk hoe lang het duurt om resultaten te laden.

Krijg een supersnelle en geavanceerde zoekfunctie met Elasticsearch

Er zal een moment komen waarop het gebruik van WordPress-zoekplugins je MySQL database simpelweg te veel belast. En als de zoekopdrachten je site zodanig belasten dat deze eronder leidt, dan is de enige garantie voor een optimale zoekervaring het gebruik van Elasticsearch.

Elasticsearch is een opensource zoekmachine met ingebouwde analytics en staat bekend om zijn snelheid, stabiliteit en schaalbaarheid – het is een onderdeel van de volledige Elastic-stack. Wanneer je Elasticsearch combineert met Logstash (voor het verwerken van data) en Kibana (voor data-visualisatie en management), wordt je zoekfunctie verrassend krachtig:

  • Zoeken binnen meer typen content (zoals PDF’s) en metadata
  • Fuzzy matching zodat je bezoekers nooit meer “geen resultaten” zien
  • Suggesties voor gerelateerde content
  • Geo-specifieke content suggesties
  • Faceted (multi-filter) zoekfunctie
  • Snellere opdrachtverwerking
  • Realtime toegang tot zoekdata

Alhoewel Elasticsearch opensource en gratis is, heb je er wel managed Elasticsearch hosting voor nodig (en dat is dan weer niet gratis). Dit kun je op verschillende manier krijgen:

1. ElasticPress 
De ElasticPress plugin maakt het mogelijk om de zoekmogelijkheden van ElasticPress naadloos te integreren in je bestaande WordPress-website. Deze plugin is een populaire oplossing om te integreren met WordPress hosts die ondersteuning bieden voor Elasticsearch.

ElasticPress instellingen
ElasticPress instellingen

2. Elastic
Als je dat wilt, kun je het beste meteen bij de bron beginnen: Elastic. Je hebt een paar verschillende opties om je zoekmachine te implementeren.

Je kunt de volledige stack krijgen en zo ook je voordeel doen met de geavanceerde data-verwerking en -management tools. Dit is standaard onderdeel van de configuratiewizard:

Elastic: configureren van de volledige stack
Elastic: configureren van de volledige stack

Daarnaast kun je volledig bepalen hoe je Elasticsearch-server wil optimaliseren:

Kiezen van de wijze van optimalisatie binnen Elastic
Kiezen van de wijze van optimalisatie binnen Elastic

Aanbevelingen worden gedaan op basis van het soort query’s je site zal afhandelen. Dit maakt het makkelijk om te beslissen hoe je het beste je site kan versnellen en je zoekmachinerankings kan verbeteren.

Als je het opzetten nog verder wilt vereenvoudigen, kun je ook de Site Search tool van Elastic gebruiken.

A look inside the Elastic Site Search tool and dashboard.
Elastic Site Search dashboard

Je gaat dan naar een dashboard waar je, zodra je site geïndexeerd is, verschillende dingen kunt instellen:

  • Installeer van je zoekmachine via een stukje JavaScript code.
  • Aanpassen van hoe je zoekmachine werkt qua volgorde van resultaten, belang van resultaten en synoniemen.
  • Het beheren van de content die tevoorschijn komt in de resultaten.
  • Opzetten van tracken van conversies.
  • Instellen van zoeksuggesties.
  • Bekijken van je zoekdata.

Het is niet zo robuust als de Elastic-stack, maar dit is een goede optie als je gewoon op zoek bent naar een sterke zoekfunctie die eenvoudig te implementeren en beheren is.

3. Amazon Elasticsearch
Het is natuurlijk niet verrassend dat Amazon een eigen Elasticsearch service heeft. Als je reeds AWS hosting gebruikt, dan is dit een goede optie.

Net als de mogelijkheden hierboven, is dit een managed service die het mogelijk maakt een snelle zoekmachine met geavanceerde zoekopdrachten op je website te hebben.

Tip 5: Cachen van je resultatenpagina

Een andere manier om de zoekfunctie op je WordPress-website sneller te maken is door het cachen van je zoekresultaten. Door caching in te schakelen, hoeven je servers niet de hele tijd dezelfde zoekopdrachten opnieuw te doen. In plaats daarvan zal je website een statische resultatenpagina ophalen en weergeven, waardoor je bezoekers bijna onmiddellijk de resultaten zien.

Je kunt caching mogelijk maken via een WordPress caching-plugin.

Eén van de beste plugins is W3 Total Cache, die ook focust op het cachen van resultatenpagina. Een goede plugin om mee te beginnen dus als je op zoek bent naar een caching-oplossing die je zoekprestaties verbetert.

Een andere optie is WP Rocket. Alhoewel het niet standaard zoekresultaten cachet, hebben ze de Cache Search Results helper plugin specifiek daarvoor gemaakt.

Nog een andere manier om je zoekresultaten te cachen is door de eerder genoemde Ajax Search Pro plugin te gaan gebruiken. Ik heb al een paar manieren genoemd waarop de Lite versie hiervan je zoekprestaties verbetert. De Pro versie biedt nog meer optimalisatie, inclusief het pre-cachen van afbeeldingen en cachen van zoektermen.

Tip 6: Activeren van Search Tracking binnen Google Analytics

Als laatste, maar zeker niet de minst belangrijk tip, schakel Search Tracking in binnen Google Analytics. Dit vind je onder Admin > All Web Site Data > View Settings.

Activeren van search tracking bij Google Analytics
Activeren van search tracking bij Google Analytics

Om Search Tracking binnen je website in te schakelen, zet je dit op “ON”. Hierna zul je een nieuw veld zien, genaamd “Query parameter”. Dit is het element binnen je URL (en je database) dat een zoek-opdracht en -resultaat definieert.

De zoekparameter voor Google Analytics
De zoekparameter voor Google Analytics

In dit geval definieert de letter “s” een zoekopdracht op de website. Als je niet zeker weet wat je eigen zoekparameter is, doe dan zelf een zoekopdracht en vind de letter of het woord na het vraagteken.

Als je zoekfunctie bezoekers de mogelijkheid geeft categorieën en filters toe te passen, dan kun je ook de zoekcategorieën inschakelen. In dat geval zul je meerdere zoekparameters in moeten stellen.

Als je dit eenmaal hebt ingesteld binnen Google Analytics, zul je al je zoekdata kunnen bekijken onder Behavior > Site Search.

Site zoekdata binnen Google Analytics
Site zoekdata binnen Google Analytics

Net zoals alles binnen Google Analytics, biedt dit je echt een schat aan informatie om in te graven:

Let goed op wat je bezoekers doen binnen de zoekfunctie, zodat je de rest van je website beter voor ze kunt inrichten.

Samenvatting

De zoekfunctie van WordPress lijkt simpel en dat is ook zo mits je slechts een stuk of tien pagina’s hebt waar je je bezoekers doorheen moet ploegen.

Je kunt een eenvoudige zoekfunctie toevoegen op verschillende plekken binnen je pagina, zoals de header, footer, zijbalk of direct binnen de content. Er zijn ook andere manieren waarop je deze zoekfunctie kunt toevoegen:

  • Via de instellingen van je thema
  • Via een WordPress-widget
  • Via een pagebuilder-plugin
  • Via een themasjabloon
  • Door te programmeren

Maar vergeet niet: hoe groter en complexer je website wordt, hoe belangrijker een geavanceerde zoekfunctie wordt, zodat je bezoekers een prettige ervaring blijven houden. Want een betere gebruikerservaring leidt bijna altijd tot meer conversies – en daar pluk jij weer de vruchten van.

Suzanne Scacca

Suzanne Scacca is a WordPress, web design, and SEO specialist. When she’s not testing WordPress tools or scouring the web for awesome design examples, she’s on Twitter sharing tips on how to make the web a better place.