Comment mettre en place la recherche vocale sur WordPress (sans plugin) ?

C'est l'une des tendances web dont on parle beaucoup, de celles dont il faut au moins connaître l'existence : la recherche vocale (ou "voice search"). En 2016, le PDG de Google Sundar Pichai affirmait que 20% des recherches Google étaient des recherches vocales. Tous les professionnels du web en parlent… pour une bonne raison : on utilise de plus en plus son mobile pour parler !

L'essor des assistants vocaux (Google Home, Alexa) s'inscrit aussi dans cette tendance... et même si les recherches vocales n'ont pas pris pour le moment les proportions auxquelles les études s'attendaient, elles demeurent intéressantes à "surveiller".

La recherche vocale pose donc de vraies questions en termes de référencement et d'expérience utilisateur. J'ai donc décidé de vous en parler dans cet article, en vous expliquant à quoi ça sert et comment permettre la recherche vocale sur WordPress.

La recherche vocale, un changement pour le SEO ?

La recherche vocale désigne le fait d'utiliser la voix pour remplir un formulaire de recherche au lieu de taper sa requête à la main. Autrement dit, vous allez utiliser le micro de votre smartphone (ou, plus rarement, de votre ordinateur) pour poser une question.

Pas besoin de taper sur le clavier, de réfléchir à la façon de simplifier sa question en langage "moteur de recherche", c'est rapide, facile à utiliser… bref, la recherche vocale séduit de plus en plus !

Evidemment, on ne s'exprime pas de la même manière à l'oral et lorsque l'on fait une recherche sur un moteur. Par exemple, là où l'on demande à Google "bon restaurant paris", on dira peut-être à l'oral "où trouver un bon resto à Saint-Germain-des-Prés".

La formulation est donc plus longue et la recherche s'effectue souvent "en contexte" : par exemple, au moment où l'on cuisine on va demander à Google "par quoi remplacer un oeuf dans une recette ?" ; au moment où l'on a faim pendant un week-end à Londres, on va demander "Où manger des burgers à Camden ?"

En termes de référencement, ça signifie que…

• Ce type de recherche va souvent porter sur des mots clés de longue traîne, c'est-à-dire des mots clés plus spécifiques et précis que des mots clés génériques.
• La recherche vocale met souvent l'accent sur les questions : qui, que, quoi, où, comment, quand, pourquoi…
• La recherche vocale utilise un vocabulaire conversationnel : plus que jamais, il est important de savoir comment s'expriment les gens qui fréquentent votre site.

Ce sont d'ores et déjà des éléments dont vous pouvez tenir compte dans vos contenus si vous ne le faites pas déjà : essayer de répondre aux questions que les internautes se posent (un site comme Answer The Public peut vous aider à identifier ces questions), proposer des contenus sur des sujets très précis et apprendre à bien choisir ses mots-clés.

Mettre en place la recherche vocale sur WordPress

Autant le dire tout de suite : j'ai été surprise de la facilité et de la rapidité avec laquelle on peut proposer cette fonctionnalité à ses lecteurs pour peu qu'on soit habitué à personnaliser son blog ! J'ai utilisé la méthode de reconnaissance vocale développée par Digital Inspiration en l'adaptant à un blog WordPress.

1. Ajouter le CSS du moteur de recherche

Direction la feuille de style de votre thème WordPress (ou du thème enfant si vous en avez créé un pour personnaliser votre blog). Elle se trouve généralement dans le dossier wp-content > themes > nomdevotretheme > style.css.

Copiez-y ces quelques lignes, qui vont nous permettre d'afficher une petite icône représentant un micro à côté du moteur de recherche :

.speech{border:1px solid #DDD;width:300px;padding:0;margin:0}.speech input{border:0;width:250px;display:inline-block;height:45px;padding:5px}.speech img{width:40px}

Ici, on attribue au moteur de recherche une largeur fixe de 300 pixels (incluant le champ de recherche de 250 pixels et l'icône microphone à côté), vous pouvez bien sûr l'ajuster selon vos besoins.

2. Ajouter le script de reconnaissance vocale

Ce script va permettre la reconnaissance vocale de ce que votre visiteur dicte dans son micro.

<script type="text/javascript">
function startDictation() {
    if (window.hasOwnProperty('webkitSpeechRecognition')) {
      var recognition = new webkitSpeechRecognition();
      recognition.continuous = false;
      recognition.interimResults = false;
      recognition.lang = "fr-FR";
      recognition.start();
      recognition.onresult = function(e) {
        document.getElementById('transcript').value
                                 = e.results[0][0].transcript;
        recognition.stop();
        document.getElementById('labnol').submit();
      };
      recognition.onerror = function(e) {
        recognition.stop();
      }
    }
  }</script>

Je vous conseille de l'ajouter dans le pied de page de votre blog, juste avant la balise </body>. Ce pied de page se nomme en général "footer.php" et se trouve dans le dossier de votre thème WordPress (ou du thème enfant) : wp-content > themes > nomdevotretheme > footer.php.

Seul élément à modifier si nécessaire : la ligne recognition.lang = "fr-FR";. Il s'agit de la langue de référence utilisée pour la reconnaissance vocale. De nombreuses langues sont prises en charge donc si vous avez un site dans une autre langue que le français, ça peut vous être utile !

3. Intégrer la recherche vocale au formulaire de recherche WordPress

Vous pouvez utiliser ce code, à insérer à la place de votre formulaire de recherche actuel (pensez à faire une sauvegarde avant). Le code du formulaire de recherche se trouve souvent dans un fichier intitulé searchform.php dans le dossier de votre thème WordPress.

<form role="search" id="labnol" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <div class="speech">
	<input type="text" id="transcript" placeholder="Que cherchez-vous ?" value="<?php echo esc_attr(get_search_query()); ?>" name="s" />
	<img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif" />
    </div>
</form>

Le code va afficher une petite image représentant un micro à côté du champ de recherche. Quand on clique dessus, ça active le script "startDictation" qui initie la dictée vocale. Votre site demande alors au visiteur l'autorisation d'utiliser son micro. Si le visiteur valide, il peut alors dicter sa demande… et la recherche se lance automatiquement sur le blog.

Il faut savoir que la recherche vocale n'empêche pas le visiteur d'utiliser la recherche classique s'il le souhaite, vous pouvez même envisager de conserver deux boutons (un bouton "loupe" et un bouton "micro") si vous pensez que ça rend les choses plus claires.

Si vous utilisez une police d'icônes comme Font Awesome, vous pouvez aussi personnaliser le code pour utiliser l'icône micro de Font Awesome à la place de l'image.

Remplacez simplement la ligne :

<img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif" />

... par la ligne :

<i class="fa-microphone" onclick="startDictation()"></i>

Et c'est tout ! Bien sûr, d'un thème à l'autre, il peut y avoir des ajustements de mise en forme à effectuer mais la base se résume à ces quelques étapes.

La recherche vocale, un démarrage timide

Lorsque j'ai mis en place la recherche vocale sur mon blog culturel, j'ai constaté que l'usage restait assez peu répandu. Le blog recevait à l'époque entre 50000 et 75000 visites mensuelles... pour seulement une petite dizaine de recherches vocales par mois.

A ce jour, la recherche vocale ne semble fonctionner correctement que sur Google Chrome. Je n'ai pas pu la mettre en place sur le format AMP, que j'utilise sur mobile. Ça reste donc une fonctionnalité très expérimentale et pour ma part, j'ai finalement préféré la retirer histoire de ne pas affecter le temps de chargement des pages pour une option si peu utilisée !

Comment assurer le tracking de la recherche vocale ?

La vraie question que se posent beaucoup de gens au sujet de la recherche vocale, c'est comment l'identifier, la mesurer, la suivre ? Je n'ai pas de réponse universelle mais pour ma part, j'avais opté pour une méthode simple pour le tracking de la recherche vocale.

Je suivais avec Google Analytics les clics sur le bouton "Recherche vocale". Au niveau de ma ligne :

<i class="fa-microphone" onclick="startDictation()"></i>

J'avais tout simplement ajouté un petit bout de code qui permettait à Google Analytics de suivre les clics sur le bouton "Recherche vocale", comme ceci :

<i class="fa-microphone" onclick="startDictation();gtag('event','click',{'event_category' :'Recherche vocale'});"></i>

Ça me permettait ensuite d'accéder à l'information depuis le rapport Analytics Comportement > Evénements > Principaux événements. En ajoutant une dimension secondaire "Chemin de la page niveau 1", je pouvais voir l'intitulé de la page consultée par le visiteur, qui comportait sa requête dans l'URL.

J'espère que cet article vous aiguillera si vous voulez aussi tenter l'aventure de la recherche vocale !