webmestre : conception de sites et administration de serveurs

Transcription

WEBMESTRE : CONCEPTION DE SITES ET
ADMINISTRATION DE SERVEURS WEB
ALGORITHMIQUE / PROGRAMMATION ORIENTÉES INTERNET
Cours et TP A3 (1/2 module)
Chapitre 3
LES BALISES META ET l’INDEXATION D’UN SITE WEB
CONSERVATOIRE NATIONAL DES ARTS ET METIERS
Le plus grand soin a été apporté à la réalisation de ce support pédagogique afin de vous fournir une information
complète et fiable. Cependant le Cnam Champagne-Ardenne n’assume de responsabilité, ni pour son utilisation,
ni pour les contrefaçons de brevets ou atteintes aux droits de tierces personnes qui pourraient résulter de cette
utilisation.
Les exemples ou programmes présents dans cet ouvrage sont fournis pour illustrer les descriptions théoriques. Ils
ne sont en aucun cas destinés à une utilisation commerciale ou professionnelle.
Le Cnam ne pourra en aucun cas être tenu responsable des préjudices ou dommages de quelque nature que ce soit
pouvant résulter de l’utilisation de ces exemples ou programmes.
Tous les noms de produits ou autres marques cités dans ce support sont des marques déposées par leurs propriétaires respectifs.
Ce support pédagogique a été rédigé par Michaël KRAJECKI, Maître de Conférences à l’Université de ReimsChampagne-Ardenne.
c
Copyright 2001-2004
Centre d’Enseignement A Distance du Cnam Champagne-Ardenne.
Tous droits réservés.
Toute reproduction, même partielle, par quelque procédé que ce soit, est interdite sans autorisation préalable du
Cnam Champagne-Ardenne. Une copie par xérographie, photographie, film, support magnétique ou autre, constitue
une contrefaçon passible des peines prévues par la loi, du 11 mars 1957 et du 3 juillet 1995, sur la protection des
droits d’auteur.
Table des matières
1 INTRODUCTION
2
2 LES META-TAGS DESTINÉS AU RÉFÉRENCEMENT
2.1 LES BALISES META . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2 DÉFINITION DES MOTS CLÉS ET DE LA DESCRIPTION . . . . .
2.3 LES AUTRES META-TAGS UTILES POUR LE RÉFÉRENCEMENT
2.4 QUELQUES MOTEURS DE RECHERCHE . . . . . . . . . . . . . .
.
.
.
.
2
2
2
3
3
3 LES CARACTÈRES SPÉCIAUX ET LA LANGUE
3.1 LES CARACTÈRES SPÉCIAUX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.2 DÉFINITION DE LA LANGUE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.3 UTILISATION DE PLUSIEURS LANGUES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
4
5
5
4 LA BALISE <BASE> POUR DÉFINIR DES ADRESSES URL COMPLÈTES
6
5 QUELQUES META-TAGS UTILES
6
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Algorithmique / Programmation orientées Internet 1
1
INTRODUCTION
Les Meta-Tags sont essentiellement destinés aux robots des moteurs de recherche et aux navigateurs. Les différentes balises <meta> permettent en effet de référencer votre site (par l’intermédiaire de mots clés par exemple), de
préciser le codage utilisé pour les caractères spéciaux.
Dans un premier temps, nous allons nous concentrer sur les meta-tags destinés aux robots. Puis, nous verrons
les autres utilisations de cette balise <meta>.
Vous trouverez également une présentation détaillée des Meta-tags à l’adresse suivante :
www.allhtml.com/metatags/ .
2
LES META-TAGS DESTINÉS AU RÉFÉRENCEMENT
Le référencement d’un site WEB est aujourd’hui indispensable car près de huit internautes sur dix trouvent
l’adresse d’un site internet par l’intermédiaire de moteurs de recherche ou d’annuaires spécialisés. Je vous conseille
à ce sujet la lecture des guides proposés sur www.referencement-fr.com .
2.1
LES BALISES META
Les balises <meta> sont placées obligatoirement dans l’entête du document (c’est à dire entre les balises <head>
et </head>). En fait, il existe une balise <meta> essentielle pour laquelle nous pouvons définir différents attributs :
charset, content, dir, http-equiv, lang, et name.
2.2
DÉFINITION DES MOTS CLÉS ET DE LA DESCRIPTION
Lors de la définition de vos documents, il est indispensable de définir en plus de la balise <title> (qui est un
meta-tag), les meta-tags keywords et description.
Pour définir les mots-clés de votre site WEB, procédez ainsi :
<META NAME="keywords" CONTENT="mot-clé1,mot-clé2,mot-clé3,...">
Il est fortement conseillé d’utiliser des mots-clés en rapport direct avec votre site. De même, inutile de reprendre
plusieurs fois le même mot-clé en vu d’un meilleur classement auprès des moteurs de recherche. Dans la plupart
des cas, votre site sera simplement ignoré...
Par exemple, si vous avez créé un site consacré à l’aquariophilie, vous pouvez définir ainsi les mots-clés :
<META NAME="keywords" CONTENT="aquariophilie,aquarium,scalaire,clown">
Comme la définition des mots-clés, il est indispensable de proposer une courte description de votre site WEB.
Dans un grand nombre de cas, cette définition sera reprise par les moteurs de recherche pour proposer un résumé de
votre site. Il est donc fortement conseillé de bien construire son résumé. Celui-ci devra être court (quelques phrases)
car sinon il sera probablement tronqué.
LES BALISES META ET l’INDEXATION D’UN SITE WEB 2
La définition de la description se présente ainsi :
<META NAME="description" CONTENT="une brève description de la page">
Voici par exemple les deux balises meta définies par le site www.aqualink.com .
<html>
<head>
<meta name= " D e s c r i p t i o n " content= " AquaLink
i s a f r e e WWW S e r v i c e d e d i c a t e d t o t h e Aquarium Hobby " >
<meta name= " KeyWords " content= " aquarium ,
f i s h , c o r a l , r e e f , f r e s h w a t e r , marine , tank , hobby ,
a q u a l i n k , aquaria , s e r v i c e , f r e e , " >
< t i t l e > AquaLink < / t i t l e >
< / head>
2.3
LES AUTRES META-TAGS UTILES POUR LE RÉFÉRENCEMENT
Il existe d’autres informations utiles lors du référencement d’un site Web, parmi lesquelles :
<META NAME="author" CONTENT="nom de l’auteur"> Cette balise vous permet de préciser le nom de l’auteur.
Cependant, il semble que peu de moteurs de recherche exploitent réellement cette information.
<META NAME="Robots" CONTENT="instructions pour les robots"> Cette balise vous permet d’indiquer aux moteurs de recherche si vous souhaitez que votre site soit ou non, indexé par eux. Les instructions possibles sont :
All (valeur par défaut) : le site sera entièrement référencé (pages et liens hypertextes).
None : vos pages ne sont pas indexées.
Index : seule la page qui définit ce meta-tag sera indexée.
NoIndex : la page n’est pas indexée, mais les liens définis pourront éventuellement être indexés.
Follow : autorise les robots à suivre les liens hypertextes définis.
NoFollow : pour le contraire.
Exemples :
<META NAME="Robots" CONTENT="None">
<META NAME="Robots" CONTENT="Index,Nofollow">
2.4
QUELQUES MOTEURS DE RECHERCHE
Voici les adresses des principaux moteurs de recherche disponible en France.
– AltaVista France : fr.altavista.com
– Lycos : www.fr.lycos.de
– Voila : www.voila.fr
– Google : www.google.fr
– Nomade : www.nomade.fr
– Yahoo : fr.yahoo.com
Il existe également des outils pour effectuer simultanément des recherches sur plusieurs moteurs. Dans cette
catégorie des Meta-moteurs, l’un des plus connus est Copernic. Vous pouvez télécharger gratuitement une version
sur www.copernic.com
F IG . 1 – La page d’accueil de Google
3
LES CARACTÈRES SPÉCIAUX ET LA LANGUE
Comme nous l’avons précisé dans le chapitre précédent, il faut être particulièrement attentif aux problèmes liés
aux caractères accentués nécessaires à certaines langues.
3.1
LES CARACTÈRES SPÉCIAUX
Pour préciser le codage de vos pages Web, vous disposez de la solution suivante :
<meta http-equiv="content-type" content="text/html ; charset=iso-XXXX-X">
F IG . 2 – Copernic
En particulier, pour les documents rédigés en français, je vous rappelle que le codage utilisé est la table iso-latin1
dont le code est iso-8859-1. Si vous souhaitez utiliser directement les accents dans vos documents, il est impératif
de définir la balise suivante :
<meta http-equiv="content-type" content="text/html ; charset=iso-8859-1">
Si vous ne prenez pas cette précaution, votre page risque de ne pas s’afficher correctement quand le navigateur
utilisé est dans une langue différente par exemple. Ce défaut est également possible lors de l’utilisation d’un système
d’exploitation différent.
3.2
DÉFINITION DE LA LANGUE
Il est souhaitable de définir la langue utilisée dans le document HTML. Cette information sera utile, à la fois aux
moteurs de recherche et aux navigateurs pour réaliser un affichage adaptée à la langue.
<META HTTP-EQUIV="Content-language" CONTENT="code de la langue">
Voici les codes utilisés pour quelques langues courantes :
L ANGUE
Allemand
Anglais (Grande Bretagne)
Français
C ODE
de
en-gb
fr
L ANGUE
Américain
Espagnol
Italien
C ODE
en-us
es
it
Vous trouverez une liste plus complète sur www.allhtml.com/metatags/metatags78.php
3.3
UTILISATION DE PLUSIEURS LANGUES
Il est parfaitement possible, de définir des résumés et les mots-clés dans plusieurs langues. Cette solution est
particulièrement intéressante quand vous développez un site WEB multi-lingue. Voici un exemple où l’information est
disponible en français et en anglais.
<html>
<head>
<meta h t t p −equiv = " Content −Type " content= " t e x t / html ; c h a r s e t= i s o −8859−1" >
< t i t l e > Le s i t e du Roi du Web < / t i t l e >
<meta name= " d e s c r i p t i o n " lang= " f r " content= " Le
s i t e du r o i du Web : sa v i e , son oeuvre " >
<meta name= " d e s c r i p t i o n " lang= " us " content= " The
King ’ s Web pages : h i s l i f e , h i s work " >
<meta name= " keywords " lang= " f r " content= " r o i , web , v i e " >
<meta name= " keywords " lang= " us " content= " king , web , l i f e " >
< / head>
<body>
<h1> Le s i t e du Roi du Web / The King ’ s Web pages < / h1>
<p>
...
< / p>
< / body>
< / html>
4
LA BALISE <BASE> POUR DÉFINIR DES ADRESSES URL COMPLÈTES
Lors de l’inclusion d’images ou d’autres objets dans nos pages HTML, nous utilisons souvent des adresses URL
incomplètes pour préciser l’image à inclure.
Il est fortement conseillé de procéder ainsi, car cela permet de mettre à jour plus rapidement un site quand son
adresse a changé. Cependant, si un visiteur a sauvegardé une de nos pages localement sur son disque dur, il risque
d’avoir une mauvaise surprise lors d’une prochaine consultation. En effet, si les différentes ressources utilisées n’ont
pas été rapatriées localement, le navigateur sera incapable de retrouver les adresses complètes des images incluses.
C’est pourquoi, nous vous conseillons de définir le meta-tag <base> qui permettra au navigateur de retrouver le
bon répertoire sur le bon site.
Voici un exemple d’utilisation :
< !DOCTYPE HTML PUBLIC " − //W3C / / DTD HTML 4.01 T r a n s i t i o n a l / / EN" >
<html>
<head>
< t i t l e > Le s i t e du Roi du Web < / t i t l e >
<meta h t t p −equiv = " Content −Type " content= " t e x t / html ; c h a r s e t= i s o −8859−1" >
<base href = " f i l e : / home / k r a j e c k i / enseignement / cnam / p l e i a d /
2003/ cours / chap3 / SourceHTML / Image / " >
< / head>
<body>
<h1> Le s i t e du Roi du Web < / h1>
<img src= " image . j p g " a l t = " Le r o i du Web" >
< / body>
< / html>
Dans ce cas, quelque soit la localisation de cette page, le navigateur sera en mesure de télécharger l’image
Image/roi.jpg. En effet, grâce à la balise <base>, votre navigateur connaît l’URL complète de l’image qui est
http ://www.leroiduweb.com/Image/roi.jpg.
5
QUELQUES META-TAGS UTILES
Il existe d’autres meta-tags que vous pouvez définir selon vos besoins. En voici une présentation qui n’est pas
exhaustive.
<META HTTP-EQUIV="Refresh" CONTENT="x ;URL=adresse"> Cette balise META charge automatiquement la
page spécifiée au niveau de l’attribut URL après un délai de x secondes. Elle est fréquemment utilisée pour
rediriger automatiquement un visiteur dans le cas où l’adresse de votre site WEB a changé.
<META NAME="Copyright" CONTENT="Copyright date nom"> Pour réserver les droits concernant les informations disponibles sur votre site WEB.
<META NAME="Generator" CONTENT="nom de l’éditeur Html utilisé"> Cette balise n’a pas d’utilité directe, ni
pour un internaute, ni pour les moteurs de recherche. En général, elle est définie automatiquement par les
éditeurs WEB. Par exemple, voici le meta-tag généré par Netscape Composer :
<meta name="GENERATOR" content="Mozilla/4.77 [fr]
(X11 ; U ; Linux 2.4.3-20mdk i686) [Netscape]">
<META HTTP-EQUIV="Reply-to" CONTENT="votre adresse e-mail"> Cette balise permettra au visiteur averti de
votre site de connaître votre adresse électronique. Cette information peut être particulièrement utile dans le cas
où l’internaute a aspiré votre site WEB et le consulte localement sur sa machine. Elle est alors un complément
appréciable de la balise suivante.
<META HTTP-EQUIV="Reply-to" CONTENT="URL de votre page d’accueil"> Il est parfois utile de rappeler l’adresse
de la page d’accueil de votre site WEB.
<META HTTP-EQUIV="Expires" CONTENT="date"> Cette balise META informe le navigateur de la date à laquelle
la page Html doit être considérée comme obsolète. Ainsi, quand vous accédez à un document présent dans le
cache de votre navigateur, il pourra automatiquement effectuer une recherche sur le réseau si la page présente
est périmée. Exemple :
<META HTTP-EQUIV="Expires" CONTENT="Wed, 23 Apr 2002 10 :49 :02 GMT">
Attention, les moteurs de recherche peuvent supprimer les pages périmées de leurs bases de données.

webmestre : conception de sites et administration de serveurs

Transcription

Documents pareils

Grille d`évaluation d`un site Internet Inform ations générales

Fiche de l`AWT Promotion d`un site web

Optimisation de votre site internet pour le référencement

VTT : Commençal Meta 6

eGuide : les moteurs de recherche

creation de site

Le html - Club informatique de Saint Priest en Jarez

Le langage HTML - Les exercices

Le langage HTML

Meta, douceur d`un vent de safran