Ajouter la recherche à votre site en 15 minutes

Mon site a été créé à l’aide d’un générateur de site statique et déployé sur un CDN, je suis donc très satisfait de sa rapidité. Mais il y a une fonctionnalité qui m’a toujours manqué : la recherche.

Comme cela a été mentionné à plusieurs reprises, Jamstack ne signifie pas « statique » – nous pouvons parfaitement créer des sites entièrement dynamiques alimentés par JavaScript côté client en interaction avec des API (principalement tierces). La recherche fait partie de cette catégorie.

Pendant tout ce temps, je n’avais pas ajouté de recherche à mon site parce que j’étais fatigué que cela se révèle être une tâche difficile. Je ne suis pas exceptionnellement doué en JavaScript ou CSS, donc je craignais que la création d’une entrée de recherche élégante (ou, du moins, respectable) qui suggère des résultats au fur et à mesure que l’utilisateur tape, et l’intégrer dans mon site, ne relèverait pas de mes capacités.

Et puis, tout d’un coup, en moins de 15 minutes en fait, j’ai eu une recherche sur mon site !

Cela a été rendu possible grâce à Recherche sur site 360un service permettant de rechercher n’importe quel site, qu’il soit basé sur Jamstack (comme le mien), WordPress (pour lequel ils ont un plugin), ou toute autre pile. J’avais prévu de faire d’abord des recherches sur ce service, mais il s’est avéré que, même avant la fin de mes recherches, j’ai fini par installer leur service et avoir effectué une recherche sur mon site, à mon plus grand plaisir (et initialement inattendu).

L’essentiel de l’ensemble du processus est le suivant : lorsque j’ai ouvert un compte gratuit, ce service a indexé mon site directement à partir de l’Internet ouvert sans me demander de fournir la moindre configuration. Il m’a ensuite conduit à travers quelques étapes pour configurer l’interface utilisateur de recherche et a finalement produit un lien vers un fichier JavaScript avec ma configuration personnalisée. Comme j’ai inclus ce JS sur mon site et actualisé le navigateur, voilà, j’ai eu une recherche !

Cela n’a vraiment pas pris de temps, et il a également fière allure. Dans cet article, je vais vous montrer comment ajouter une recherche à votre site à l’aide de Site Search 360, comme je l’ai fait. Au moment où vous avez fini de lire cet article, si vous suivez, vous avez peut-être déjà effectué une recherche. 🙏

Ajout de la recherche à votre site Web avec Site Search 360

Sur la page d’accueil de Recherche sur site 360, il y a une entrée demandant « Entrez votre domaine (site.com) ». Faites-le et cliquez sur « Test gratuit ». Ensuite, il dira: « Ouais! Votre essai gratuit est prêt », et vous demande d’entrer votre adresse e-mail pour terminer l’inscription. Faites-le, et cliquez sur « Go! ».

Après cela, le service passera une minute ou deux à indexer votre site (ou peut-être un peu plus, selon la quantité de contenu de votre site), puis vous informera que tout est prêt.

Cliquez sur « Commençons ! » pour accéder au tableau de bord de l’application, où un processus d’intégration vous guidera dans la configuration de la recherche pour votre site.

Étant donné que le contenu de votre site est maintenant indexé, lorsque vous cliquez sur « Testez maintenant ! » l’aperçu de l’interface utilisateur de recherche utilisera déjà le contenu réel de votre site. Remarquez comment, même avant de commencer à personnaliser l’apparence et la convivialité, il a fière allure !

Cliquez sur « Plus de résultats » dans la liste déroulante des suggestions pour visualiser à quoi ressembleront les résultats de la recherche. (Ci-dessous, nous verrons comment cette liste, affichant initialement la vignette, le titre, l’URL et l’extrait de l’élément avec le terme correspondant en gras, peut être modifiée.)

Cliquez sur le bouton « Search Designer » pour personnaliser l’interface utilisateur de recherche et reproduire le style sur votre site. Cette étape n’est pas ponctuelle : vous pouvez y revenir à tout moment (même après que votre configuration personnalisée a été publiée et que la recherche est déjà installée sur votre site).

L’écran de bienvenue demande comment nous aimerions commencer. Puisque nous sommes de nouveaux utilisateurs, nous devons repartir de zéro et cliquer sur « Commencer maintenant ».

Nous utilisons maintenant le Concepteur de recherche qui vous aidera à modifier l’apparence visuelle de l’entrée de recherche, de la liste déroulante et des résultats.

Lorsque vous modifiez les styles, ceux-ci sont immédiatement reflétés dans le volet de droite.

Dans le concepteur de recherche, vous pouvez configurer les éléments suivants (parmi beaucoup d’autres) :

• Les couleurs primaires, secondaires, d’arrière-plan, de texte, d’icône et de bordure, la taille du texte, la taille des coins arrondis et d’autres styles ;
• La langue (parmi 19 langues prises en charge à ce jour) ;
• Utiliser une entrée de recherche que vous avez déjà sur votre site ou celle de Site Search 360 ;
• Activation des suggestions de saisie semi-automatique (affichées au fur et à mesure que l’utilisateur tape);
• Connectez-vous à Google Analytics et Google Tag Manager ;
• Activer la recherche vocale ;
• Mises en page pour afficher les résultats sur ordinateur et mobile.

La liste déroulante de recherche peut être configurée davantage, permettant d’afficher les requêtes précédemment recherchées ainsi que les requêtes prédéfinies. Dans mon cas, j’ai décidé de suggérer déjà les requêtes de recherche qui permettent à mon site d’être bien classé sur Google.

Une fois la configuration terminée, revenons au processus d’intégration.

L’étape suivante consiste à ajuster les résultats de la recherche, en indiquant comment extraire les données (pour le titre, les images et l’extrait) de la page Web. La configuration automatique par défaut fonctionne déjà très bien (extraction des données du <meta> attributs), vous pouvez donc très probablement ignorer cette étape.

Vous avez pratiquement terminé maintenant ! Il ne reste plus qu’à publier la configuration.

Revenez au processus d’intégration et cliquez sur « Installer maintenant ! ». Cela ouvrira une fenêtre modale ; copiez le code HTML et collez-le dans le code source de votre site (avant la fermeture </body>) et cliquez sur « Publier ».

Redéployez votre site, actualisez le navigateur et qu’avez-vous ? Votre site a maintenant la recherche !

Mise à jour de l’apparence visuelle

Comme je l’ai mentionné plus tôt, vous pouvez continuer à configurer l’interface utilisateur de recherche même après le lancement de la recherche. Désormais, vous pouvez facilement accéder au Search Designer depuis le menu de l’application sur la gauche (sous l’élément « Design & Publish »). Après avoir effectué quelques modifications, cliquer sur « Publier » appliquera déjà le nouveau style sur votre site sans avoir à copier/coller de nouveau code ou à redéployer le site.

Dans mon cas, j’ai peaufiné un peu plus la configuration. J’ai changé d’avis sur la position de l’entrée de recherche, préférant l’afficher en haut de la navigation. La solution était d’envelopper le menu de navigation dans un nouveau <div id="nav-wrapper"> puis injectez l’entrée « Avant » le #nav-wrapper sélecteur.

J’ai également remarqué que la mise en page n’avait pas l’air correcte sur mobile car l’entrée de recherche était alignée au centre, tandis que le logo et le menu de navigation étaient alignés à gauche.

Le concepteur de recherche accepte les CSS personnalisés, je pourrais donc fournir un extrait de code CSS supplémentaire pour remplacer le style par défaut de l’entrée de recherche, en l’alignant sur la gauche.

J’ai cliqué sur « Publier », j’ai actualisé le navigateur, et maintenant le style sur mobile semble correct.

Enfin, j’ai également décidé d’activer la fonction « Groupes de résultats », qui divise les résultats en différentes catégories de notre choix. (Les pages contenues dans un groupe sont définies via un modèle d’URL ; par exemple, j’ai défini le groupe « Blog » pour qu’il contienne des URL de type /blog/....) Dans mon cas, je souhaite afficher les résultats des groupes « Blog », « Guides » et « Meta » et masquer les résultats des « Tags ».

Désormais, lorsque le visiteur saisit une requête de recherche, les résultats de la liste déroulante sont organisés par les groupes choisis, ce qui facilite grandement la recherche des informations souhaitées. Par exemple, lors de la recherche de « espace de noms », « Meta » contiendra une page décrivant la fonctionnalité ; Les « Guides » contiendront des pages expliquant comment utiliser et configurer cette fonctionnalité ; et « Blog » affichera les articles de blog annonçant la fonctionnalité.

De même, lorsque vous cliquez sur « Afficher tous les résultats », la fenêtre modale est organisée en onglets (à raison d’un onglet par groupe), ce qui facilite le défilement vers le bas et la navigation dans les résultats au sein de chaque groupe.

Je suis super content de ces résultats ! Il n’a fallu que 15 minutes pour passer de 0 à 100, l’interface utilisateur est vraiment belle et la recherche est super rapide. Dans l’ensemble, l’expérience de mes visiteurs est convaincante. Dirigez-vous vers mon site et jouer avec l’entrée de recherche pour comprendre pourquoi j’en suis si satisfait.

Affiner la recherche

Ce que j’ai montré ci-dessus ne fait qu’effleurer la surface, car c’est ce qui est inclus dans le forfait gratuit ! Vérifiez page de tarification pour voir toutes les autres fonctionnalités disponibles dans le service pour chacun des différents niveaux.

Par exemple, si vous avez un site riche en contenu, comme un blog ou une boutique en ligne, et que vous souhaitez filtrer vos résultats de recherche (par catégorie, date, prix, etc.), vous pouvez le faire :

Et puis, Site Search 360 a un super pouvoir qui le distingue de ses concurrents : son intelligence artificielle moteur de recherche sémantique de produits optimise en permanence le classement des résultats de recherche, en promouvant les résultats les plus populaires au sommet. Si vous avez activé la recherche de commerce électronique, indiquez simplement ce qui est important pour vous de vendre dans votre boutique en ligne, et le moteur réorganisera automatiquement les résultats en fonction de plusieurs facteurs de classement.

Emballer

J’ai été personnellement très impressionné par Recherche sur site 360la puissante offre de recherche de . En seulement 15 minutes, mon site disposait d’une fonctionnalité de recherche que je repoussait depuis si longtemps. Problème résolu!

Si vous aussi vous voulez ajouter sans effort la recherche à votre site, allez Vérifiez-le.

(il)