HTML

Moteurs de recherches

Ajouter votre moteur de recherche dans le navigateur

Peu utilisée, cette technique est possible depuis plus d’une décennie déjà, notamment avec Firefox. En fait depuis le projet « OpenSearch ». S’il est vrai que construire son propre moteur de recherche n’est pas évident, les SGC auraient quand même pu faciliter la chose. Enfin, il faut dire que Google ne donne pas grand place. Ces services gratuits n’ont pas aidé à marginaliser la pratique. Et pourtant c’est très efficace.

Je ne pensais pas un jour faire un tutoriel sur le sujet, discret, la technique n’est pas très utilisée par les internautes non plus. Mais la dernière version de Firefox met du piquant ...un détail. En effet Firefox 36.0.1 ajoute un petit + verte sur le champ de recherche indiquant à l’internaute qu’un nouveau moteur de recherche est disponible. Qu’il peut ajouter le moteur et effectuer une recherche sur le site qu’il consulte. Justement. cet incitatif charmant m’a du coup incité à faire ce petit tutoriel ; -)

Donc il vous faut absolument un script de recherche personnelle pour votre site Web, mais aussi un contenu significatif (!) J’aime bien par exemple faire ma recherche directement sur « Stack overflow », un forum de programmeur très populaire que Google me retourne quasiment 1 fois sur 2 ! Mais pourquoi faire un détour sur Google à chaque fois, et du coup informer le monde entier de mes habitudes ? Alors qu’il suffit de passer directement via le moteur de recherche de « Stack overflow » installé dans mon navigateur préféré !

Exemple

Il suffit d’un simple fichier XML pour indiquer au navigateur le URL du script de recherche et les variables de recherches. Et une balise HTML d’entête pour indiquer au navigateur où se trouve ce fichier, communément nommé « recherche.xml »

Balise d’entête

<link rel="search" type="application/opensearchdescription+xml" title="[Trucsweb.com] Tutoriels" href="/recherche.xml">

Fichier XML : recherche.xml

<?xml version="1.0" encoding="UTF-8" ?> 
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
               xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  <ShortName>Trucsweb.com</ShortName> 
  <Description>Webmesterie et références pour Webmestre.</Description>  
  <Url type="text/html" template="http://www.trucsweb.com/recherche/?q={searchTerms}" /> 
  <Url type="application/x-moz-keywordsearch" template="http://www.trucsweb.com/recherche/?q={searchTerms}" />
  <Image height="16" width="16" type="image/vnd.microsoft.icon">http://www.trucsweb.com/favicon.ico</Image>
  <Developer>Django Blais (http://oznogco.com)</Developer>
  <Attribution>Recherche Copyright 1997-2015, Tous droits réservés</Attribution>
  <SyndicationRight>open</SyndicationRight>
  <AdultContent>false</AdultContent>
  <Language>fr-ca</Language>
  <OutputEncoding>UTF-8</OutputEncoding>
  <InputEncoding>UTF-8</InputEncoding>
  <moz:SearchForm>http://www.trucsweb.com/recherche/</moz:SearchForm>
</OpenSearchDescription>

Comme on peut voir, l’important c’est de bien indiquer l’URL du script ou de la page de recherche. En ajoutant la variable, « q » déjà une convention. Le navigateur remplacera le {searchTerms} par les mots-clés saisis. Delà l’importance de bien indiquer l’encodage. On pourrait spécifier la méthode POST/GET. Comme la forme suivante avec plusieurs variables :

<Url type="text/html" method="post" template="http://www.trucsweb.com/recherche/">
    <Param name="Clé/Valeur" value="{searchTerms}"/>
    ...
    <Param name="Clé/value" value="{searchTerms}"/>
</Url> 

Il existe 2 types recherches

• type="text/html" : La page HTML.
• type="application/x-suggestions+json" : Une suggestion, notamment en format json.

Firefox permet aussi type="application/x-moz-keywordsearch" pour les mots-clés entrés directement dans la barre d’adresse. D’ailleurs Firefox permet plusieurs fonctionnalités supplémentaires dont certaine ne font pas partie des spécifications OpenSearch. Creating OpenSearch plugins for Firefox.

On peut aussi ajouter 2 moteurs :

<link rel="search" type="application/opensearchdescription+xml" title="Recherche de tutoriels" href="tutoriel.xml">
<link rel="search" type="application/opensearchdescription+xml" title="Recherche de logiciels" href="logiciels.xml">

Les images

// En format PNG à 64 pixels.
<Image height="64" width="64" type="image/png">http://www.trucsweb.com/favicon.png</Image>
// Version encodé Base64
<Image height="16" width="16">data:image/x-icon;base64,%00%00%01%00%01%00%10%10%10%00%00%00%00%00%28...00%00%01%00%00%00%01%00%00%FF%FF%00%00=</Image>

Références

• OpenSearch
• OpenSearch Plugin Generator
• Creating OpenSearch plugins for Firefox