IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Google Free SearchWeb

Web Search et Search

Le célèbre moteur de recherche Google permet aux webmasters d'intégrer à leurs pages un formulaire de recherche, de limiter la recherche à leur site et de personnaliser la page de résultats. Et tout ça, gratuitement.
Article pour une intégration intelligente.

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Avertissement

Cet article a pour but d'expliquer en détail les possibilités offertes par le service Free Search de Google. Les détails techniques et analyses présentés ici le sont à but pédagogique. L'utilisation du service Google Free Search implique l'enregistrement préalable et le respect des conditions imposées par Google. Rappel est fait de l'interdiction de falsifier son identifiant numérique.

L'auteur de cet article décline toute responsabilité quant à l'utilisation qui pourra être faite des données présentées ici.

II. Qu'est-ce donc que le service Google Free Search  ?

Google propose aux webmaster d'utiliser le moteur de recherche Google pour effectuer des recherches limitées aux pages de leur site et de personnaliser la page de résultats.

Ce service est totalement gratuit.

III. Quel intérêt ?

L'intérêt pour un webmaster de disposer d'un tel service est de pouvoir proposer aux internautes de lancer des recherches par mots clés sur son site. Il n'a pas besoin de développer son propre moteur, car il utilise Google.

Google est rapidement devenu la référence des outils de recherche sur Internet. Il est rapide, simple (page d'accueil quasi vierge, requête d'interrogation simplifiée), efficace (fonctionne sur la popularité des pages), indexe près de la moitié du web (6 milliards de pages)…

IV. Comment utiliser ce service ?

Pour utiliser ce service, il faut tout d'abord vous enregister sur la page : http://www.google.com/services/free.html. Puis à l'issue de votre enregistrement, le code HTML du formulaire à intégrer à vos pages vous sera fourni.

Lisez aussi attentivement les termes de bonne utilisation du service : http://www.google.com/services/terms_free.html.

Une FAQ est également à votre disposition : http://www.google.com/faq_freewebsearch.html

À rappeler que la recherche s'effectue dans l'index de Google et pas sur votre site directement. Il cherchera parmi son index, les pages qui proviennent de chez vous.

V. La procédure d'enregistrement

L'enregistrement se fait en quatre étapes.

V-A. Étape n° 1 : Choix de l'option de recherche (Select a Search Option)

Il s'agit ici de choisir entre :

- une recherche sur votre site (Free WebSearch plus SiteSearch) ;

- une recherche sur Internet (Free WebSearch).

Si vous optez pour une recherche sur votre site, n'oubliez pas de préciser l'adresse de votre site. Vous pouvez spécifier plusieurs adresses en les séparant par un point virgule.

V-B. Étape n° 2 : Personnalisation (Customize)

Votre ou vos adresse(s) sont rappelées en début de page et peuvent être modifiées.

Vous allez maintenant entrer l'URL (URL of your logo) de votre logo qui sera affiché en haut de page. Donnez aussi ses dimensions en pixels (Size of your logo). Et précisez enfin son alignement (Alignment of your logo) : centré (center) ou aligné à gauche (left).

Passons aux couleurs de la page de résultat. Vous allez spécifier la couleur de fond du logo de Google (Google logo background color) car celui-ci sera placé en dessous du vôtre. À noter que le logo de Google est accompagné du formulaire de recherche qui sera lui aussi affecté par cette couleur.

Ensuite, choisissez la couleur du fond de la page (Background color), du texte de la description des pages trouvées, du formulaire, des messages d'erreur (Text color), des liens hypertextes (Link color), des liens déjà visités (Visited link color), des liens durant le clic (Active link color), l'image de fond de la page (Background URL), la couleur de l'URL des pages trouvées (Alternate text color), celle du texte important (Important text color), du texte restant… (Faint text color).

Les couleurs peuvent être données en code hexadécimal (par exemple « #EE00A5 ») ou bien en langage naturel (par exemple « ivory »).

V-C. Étape n° 3 : Enregistrement (Register)

C'est l'enregistrement à proprement parler. Donnez votre nom (Your Name), votre email (Email), votre mot de passe (Password) que vous devez confirmer (Confirm Password), le nom de votre société (Company Name), et l'URL de votre site (URL of Your Web Site).

Attention, certaines sont obligatoires.

V-D. Étape n° 4 : Le code HTML de votre formulaire (HTML for your Search Box)

Et voilà, si tout c'est bien passé vous êtes enregistré et google vous fourni le code source HTML du formulaire que vous devez placer sur vos pages pour utiliser ce service.

Un exemple de votre formulaire se trouve en bas de page.

Et Google vous invite à revenir dans cet espace pour modifier vos paramètres. Bien qu'on verra par la suite qu'on peut se passer de cette formalité…

VI. Résumé de la procédure d'enregistrement

ÉTAPE 1

Choix de l'option de recherche

Select a Search Option

 

Une recherche sur votre site

Free WebSearch plus SiteSearch

 

Sélectionner cette option pour permettre à Google de restreindre la recherche aux pages d'un ou plusieurs sites web. Votre formulaire ressemblera à ceci :
Image non disponible

 

Entrez les domaines de recherche

Enter the domain(s) to be searched

 

À ne remplir que si vous avez coché l'option précédente. Spécifier ici la liste des domaines de recherche possibles. S'il y en a plusieurs, utiliser le point-virgule comme séparateur. Notez bien que la recherche n'aura lieu que sur l'un de ces domaines, et c'est l'internaute qui cochera le domaine sur lequel lancer la recherche.

 

Une recherche sur Internet

Free WebSearch

 

Sélectionner cette option pour permettre à Google d'effectuer ses recherches sur tout l'Internet. Votre formulaire ressemblera à ceci :Image non disponible

ÉTAPE 2

Personnalisation

Customize

 

URL de votre logo

URL (location) of your logo

 

Entrez l'URL de votre logo. Il sera affiché en haut de la page de résultats. Il doit être au format GIF, JPEG ou PNG pour être vu par tous les navigateurs.

 

Dimensions de votre logo (en pixels)

Size of your logo (in pixels)

 

Entrez la largeur (width) et la hauteur (height) de votre logo.

 

Alignement de votre logo

Alignment of your logo

 

Choisissez parmi les valeurs proposées : centré (center) ou aligné à gauche (left).

 

Couleur de fond du logo de Google

Google logo background color

 

Le logo de Google sera placé en dessous du vôtre. À noter que le logo de Google est accompagné du formulaire de recherche qui sera lui aussi affecté par cette couleur. Les couleurs peuvent être données en code hexadécimal (par exemple « #EE00A5 ») ou bien en langage naturel (par exemple « ivory »).

 

Couleur du fond

Background (BGCOLOR) color

 

Cette couleur affectera le fond de la page de résultats.

 

Couleur de texte

Text (TEXT) color

 

Cette couleur s'appliquera au texte de la description des pages trouvées, du texte du formulaire, des messages d'erreurs.

 

Couleur des liens hypertextes

Link (LINK) color

 

Cette couleur est affectée à l'affichage des liens.

 

Couleur des liens déjà visités

Visited link (VLINK) color

 

Couleur des liens déjà visités.

 

Couleur des liens durant le clic

Active link (ALINK) color

 

Couleur des liens hypertextes durant le clic.

 

Image de fond

Background URL

 

URL de l'image de fond de la page.

 

Couleur des l'URL

Alternate text color

 

Couleur des URL des pages trouvées.

 

Couleur du texte important

Important text color

 

Couleur du texte important. Non implémenté.

 

Couleur supplémentaire

Faint text color

 

Couleur des éléments qui ne répondent pas aux définitions précédentes.

ÉTAPE 3

Enregistrement

Register

 

Votre nom complet

Your Name (first & last)

 

Entrez ici votre nom de famille suivi de votre prénom.

 

Email

Email

 

Saisissez votre adresse électronique.

 

Mot de passe

Password

 

Entrez un mot de passe.

 

Confirmation du mot de passe

Confirm Password

 

Entrez à nouveau votre mot de passe.

 

Nom de votre société

Company Name

 

Si ce service est destiné au site web d'une entreprise, entrez le nom de cette dernière.

 

URL de votre site web

URL of Your Web Site

 

Spécifiez le nom de votre site web.

ÉTAPE 4

Code HTML de votre formulaire

HTML for your Search Box

 

Et voilà, c'est fini. Vous n'avez plus qu'à sauvegarder le code source HTML que vous fournit Google.

VII. Intégration de votre formulaire à vos pages

Par la suite, on ne s'intéressera qu'au cas de la recherche à domaine(s) limité(s) (Free WebSearch plus SiteSearch). Les domaines choisis étant : cyberzoide.developpez.com et developpez.com.

Par souci de mise en page, les listes de paramètres des champs cachés (input hidden) cof contiennent des espaces. Ces espaces ne doivent pas être reproduits sous peine d'erreur !

Google vous fournit à peu près ce code source :

 
Sélectionnez
<!-- Search Google -->
<center>
<FORM method=GET action=http://www.google.com/custom>
<TABLE bgcolor=#FFFFFF cellspacing=0 border=0>
<tr valign=top><td>
<A HREF=http://www.google.com/search>
<IMG SRC=http://www.google.com/logos/Logo_40wht.gif border=0 ALT=Google align=middle></A>
</td>
<td>
<INPUT TYPE=text name=q size=31 maxlength=255 value="">
<INPUT type=submit name=sa VALUE="Google Search">
<INPUT type=hidden name=cof VALUE="GIMP:maroon; T:black; BIMG:http://cyberzoide.developpez.com/images/fond.gif; LW:124; ALC:red; L:http://cyberzoide.developpez.com/images/logo_google.gif; GFNT:purple; LC:teal; LH:421; BGC:white; AH:center; VLC:gray; S:http://cyberzoide.developpez.com; GL:2; GALT:navy; AWFID:654gf454fg5454df;">
<font face=arial,sans-serif size=-1><input type=hidden name=domains value="developpez.com;cyberzoide.developpez.com"><br>
<input type=radio name=sitesearch value="" checked> Search WWW <input type=radio name=sitesearch value="developpez.com"> Search developpez.com <input type=radio name=sitesearch value="cyberzoide.developpez.com"> Search cyberzoide.developpez.com
</font><br>
</td></tr></TABLE>
</FORM>
</center>
<!-- Search Google -->

… que vous copiez-collez dans vos pages.

VIII. Aspect de votre formulaire

Votre formulaire va ressembler à ceci :

Image non disponible

C'est en fait un tableau de couleur de fond Google logo background color, le texte étant de couleur Text (TEXT) color. Ce tableau comporte deux cellules, l'une qui contient le logo cliquable de Google, et l'autre le champ de saisie de texte, le bouton de validation et un choix exlusif entre différentes options. Ces options sont : rechercher sur Internet ou se limiter au(x) domaine(s) spécifié(s). On remarquera que c'est la recherche sur Internet qui est cochée par défaut.

IX. Exemple de page de résultat

Image non disponible

X. Étude détaillée du code source

On va d'abord corriger le code source pour le rendre compatible XHTML, puis l'aérer et enfin en coloriser la syntaxe. Ce qui devient :

 
Sélectionnez
<!-- Search Google -->
<center>
<form method="GET" action="http://www.google.com/custom">
<table bgcolor="#FFFFFF" cellspacing="0" border="0">
<tr valign="top">
<td>
<a href="http://www.google.com/search">
<img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="middle" />
</a>
</td>
<td>
<input type="text" name="q" size="31" maxlength="255" value="" />
<input type="submit" name="sa" value="Google Search" />
<input type="hidden" name="cof" value=" GIMP:maroon; T:black; BIMG:http://cyberzoide.developpez.com/images/fond.gif; LW:124; ALC:red; L:http://cyberzoide.developpez.com/images/logo_google.gif; GFNT:purple; LC:teal; LH:421; BGC:white; AH:center; VLC:gray; S:http://cyberzoide.developpez.com; GL:2; GALT:navy; AWFID:654gf454fg5454df;" />

<font face="arial,sans-serif" size="-1">
<input type="hidden" name="domains" value="developpez.com;cyberzoide.developpez.com" /><br />
<input type="radio" name="sitesearch" value="" checked="checked" /> Search WWW 
<input type="radio" name="sitesearch" value="developpez.com" /> Search developpez.com 
<input type="radio" name="sitesearch" value="cyberzoide.developpez.com" /> Search cyberzoide.developpez.com
</font><br />
</td>
</tr>
</table>
</form>
</center>
<!-- Search Google -->

Ce code source nous apprend beaucoup de choses.

  1. Le formulaire appelle le script http://www.google.com/custom avec la méthode GET.
  2. Le logo affiché est celui-ci : http://www.google.com/logos/Logo_40wht.gif. Et le lien cliquable pointe vers la page http://www.google.com/search.
  3. Le champ texte (input text) a pour label q.
  4. Il existe un champ caché (input hidden) de label cof et de valeur GIMP:maroon; T:black; BIMG:http://cyberzoide.developpez.com/images/fond.gif; LW:124; ALC:red; L:http://cyberzoide.developpez.com/images/logo_google.gif; GFNT:purple; LC:teal; LH:421; BGC:white; AH:center; VLC:gray; S:http://cyberzoide.developpez.com; GL:2; GALT:navy; AWFID:654gf454fg5454df;
    Notez bien que les espaces que j'ai introduits après chacun des points virgule devront être supprimés dans un vrai formulaire.
    Ce champ est très intéressant puisqu'il contient les paramètres de personnalisation de la page de résultats.

    Code du champ

    Nom du champ

    Description

     

    GIMP

    Important text color

    Couleur du texte important, codée en hexadécimal ou en langage naturel (ex. : red ou #02A5FC)

     

    T

    Text (TEXT) color

    Couleur de texte

     

    BIMG

    Background URL

    Image de fond

     

    ALC

    Active link (ALINK) color

    Couleur des liens durant le clic

     

    L

    URL (location) of your logo

    URL de votre logo

     

    GFNT

    Faint text color

    Couleur supplémentaire

     

    LC

    Link (LINK) color

    Couleur des liens hypertextes

     

    BGC

    Background (BGCOLOR) color

    Couleur du fond

     

    AH

    Alignment of your logo

    Alignement de votre logo (vaut center : centré ou left : gauche)

     

    VLC

    Visited link (VLINK) color

    Couleur des liens déjà visités

     

    GL

    Google logo background color

    Couleur de fond du logo de Google, n'est pas codé comme les autres, ici vaut 0 (pour White : blanc), 1 (pour Gray : gris) ou 2 (pour Black : noir).

     

    GALT

    Alternate text color

    Couleur des l'URL

     

    AWFID

     

    Chaîne de caractères d'identification.

     

    S

    URL of Your Web Site

    URL de votre site

     

    LW

    Size of your logo (in pixels) : width

    Largeur de votre logo en pixels

     

    LH

    Size of your logo (in pixels) : height

    Longueur de votre logo en pixels

     
  5. Il existe un autre champ caché de label domains et de valeur la liste des domaines qui doivent être reproduits dans le formulaire qui sera affiché dans la page de recherche.

  6. Et on a des boutons (input radio) de label sitesearch et de valeur l'URL du site sur lequel faire la recherche.

Essayons de modifier certaines valeurs. Par exemple la valeur de T. Et hop, surprise, la couleur du texte change.

Passons maintenant à sitesearch et mettons l'URL d'un autre site, lancer la recherche… Et constatez que Google est aller faire sa recherche non plus sur votre site, mais sur celui indiqué dans sitesearch.

Pareil pour domains, il n'affichera dans le formulaire de la page de résultat que des boutons permettant de sélectionner les domaines indiqués par domains plus le choix de choisir Internet tout entier.

Quelle conclusion tirer de ce constat, Google n'utilise pas de données contenues chez lui, dans une base de données, mais uniquement les données que vous lui fournissez. Vous pouvez donc lui dire presque n'importe quoi.

Note : Le changement de AWFID n'a pas été testé !

Mais pourquoi alors devoir s'enregistrer si les données de personnalisation ne sont pas stockées chez Google ?

XI. Nouveau formulaire personnel

Nous avons à présent toutes les données en main pour créer de toute pièce un nouveau formulaire qui va chercher dans tel ou tel site et utilisera tel ou tel paramètres pour l'affichage de la page de résultat.

En voici un exemple :

Image non disponible

Dont voici le code source :

 
Sélectionnez
<a href="http://cyberzoide.developpez.com/search.php3">    
    <img width="22" height="35" src="http://cyberzoide.developpez.com/images/px_search.gif" border="0" />    
    <img width="168" height="35" src="http://cyberzoide.developpez.com/images/mn_search.gif" border="0" />    
</a><br />
<form method="GET" action="http://www.google.com/custom">    
    <input type="text" name="q" size="10" maxlength="255" value="" />       
    <input type="image" src="http://cyberzoide.developpez.com/images/go.gif" align="absmiddle" border="0" />    
    <input type="hidden" name="cof" value="GIMP:maroon; T:black; LW:124; ALC:red; L:http://cyberzoide.developpez.com/images/logo_google.gif; GFNT:purple; LC:teal; LH:421; BGC:white; AH:center; VLC:gray; S:http://cyberzoide.developpez.com; GALT:navy; AWFID:654gf454fg5454df;" />    
    <input type="hidden" name="domains" value="cyberzoide.developpez.com" />    
    <input type="hidden" name="sitesearch" value="cyberzoide.developpez.com" />
</form>

XII. Protection contre la pornographie

Parmi les autres offres de Google, il y a le simple formulaire de recherche sur l'Internet disponible ici : http://www.google.com/searchcode.html.

On peut choisir un formulaire un peu spécial qui s'appelle Google SafeSearch Box et qui permet de filtrer les pages à caractère pornographique. En étudiant un peu le code source HTML de ce formulaire, on y découvre un champ caché (input hidden) de label safe et de valeur vss. En l'intégrant à votre formulaire Google Free Search, vous pourrez permettre à vos visiteurs d'échapper à la pornographie.

À noter que ce filtre anti porno n'est pas parfait, on peut constater lors d'essais que la majorité des pages pornos sont filtrées, mais pas toutes.

XIII. Liens

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Hugo ETIEVANT. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.