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


C’est LA grande tendance web du moment, celle dont il faut au moins connaître l’existence : la recherche vocale. 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 !

En 2014 déjà, 55% des adolescents et 41% des adultes aux Etats-Unis faisaient au moins une fois par jour une recherche vocale sur mobile, que ce soit en demandant à leur téléphone d’appeler quelqu’un ou en posant une question quelconque…

C’est une tendance intéressante pour le référencement et en termes 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.
La recherche vocale, une tendance pour les utilisateurs de smartphones
La recherche vocale, une tendance pour les utilisateurs de smartphones

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.

Demande d'autorisation du micro
Demande d’autorisation du micro

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 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.

A ce jour, la recherche vocale ne semble fonctionner correctement que sur Google Chrome. Ça reste donc une fonctionnalité très expérimentale. J’ai décidé de la tester malgré tout, comme je l’avais fait avec le format AMP (qui m’apporte aujourd’hui beaucoup de trafic). Le test est en place sur mon blog culture notamment, car plus de 60% des visiteurs qui le consultent sont sur mobile.

Les premiers résultats chez moi sont timides. A l’échelle d’un blog qui reçoit entre 50000 et 75000 visites mensuelles selon l’actualité, il y a seulement une dizaine de recherches vocales par mois. Mais c’est un chiffre qui mérite d’être suivi de près, ne serait-ce que comme un témoignage de l’évolution de cette tendance.

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

Utilisez-vous la recherche vocale en tant qu’internaute ?

Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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

  • Edith

    Bonjour,
    Je viens de procéder à l’intégration des codes sur mon blog et tout fonctionne parfaitement, je vous en remercie.
    Juste un petit détail pour celles et ceux qui veulent faire l’intégration. Sur mon thème, je n’ai que « search.php » donc j’ai ajouté le « searchform.php » en plus avec une petite modification et tout fonctionne à merveille.
    Merci pour ce très bon tuto
    Cordialement
    Édith

    Répondre à Edith
    • Marlène

      Merci Edith pour le témoignage ! Pour ma part, la recherche vocale est encore assez peu utilisée par les visiteurs.

      Répondre à Marlène
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.