Plan du site (sitemap) consultable avec Navibar pour Firefox

FAIRE UNE SITEMAP

ceci est un copié-collé de mon tuto : sylvain.sab.free.fr/html.php#sitemap

Attention : ce tutoriel vous apprendra à faire une sitemap, pas une googlemap. Si c'est ce que vous voulez, il existe le logiciel gratuit YoodaMAP.

Sur certains sites, si vous utilisez Firefox muni de l'extension Navibar, vous avez déjà vu un plan du site dans le panneau latéral. Vous trouvez ceci très pratique et vous aimeriez en faire profiter les visiteurs de votre site mais vous ne savez pas comment faire ? Ce n'est pas très compliqué. Il existe des logiciels qui font ceci en quelques clics, mais ils sont payants.

Ne vous fiez pas non plus aux versions d'évaluation de ces logiciels, la plupart ont des restrictions assez contraignantes(ex: sitemap pro : seulement 6 urls!!). Toutefois si vous trouvez un logiciel gratuit qui fait ça bien, vous pouvez l'ajouter dans cet article.

Vous devrez faire un fichier que vous nommerez "sitemap.rdf" et que vous déposerez à la racine de votre site. Vous pouvez faire ce fichier avec le bloc-notes mais c'est plus pratique d'avoir un logiciel qui colore et range le code, comme PSPad editor. Si vous n'avez pas ce logiciel ou un logiciel similaire je vous invite à le télécharger. En plus il est multi-codes.

Quand vous avez téléchargé et installé le logiciel, créez un nouveau fichier texte que vous nommerez "sitemap.rdf", puis ouvrez le avec votre éditeur. Vous voyez une page vide. C'est normal pour le moment. Nous allons maintenant remplir cette page. Tout d'abord il faut indiquer la version de votre fichier .xml, c'est à dire la première version. Vous devez écrire sur la première ligne de votre fichier le code

<?xml version="1.0"?>

Vous devez ensuite indiquer le code qui suit : ce sont diverses adresses en rapport avec la validité de votre fichier.

<rdf:RDF xmlns="www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdf="www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:map="www.oaklett.org/map/1.0#" xmlns:dc="purl.org/dc/elements/1.1/">

Vous avez terminé la première partie. Maintenant nous allons faire votre sitemap. Une sitemap est présentée sous forme d'arborescence : des dossiers contenant des fichiers ou d'autres dossiers.

Nous allons indiquer le contenu de votre sitemap. Vous n'êtes pas obligé d'indiquer tout le contenu de votre site dans la sitemap, c'est vous qui choisissez ce que les visiteurs pourront voir ou pas. Vous pouvez aussi y mettre des liens externes (vers d'autres sites).Vous choisissez également l'organisation des dossiers et des fichiers de votre sitemap : elle ne dépend pas de celle de votre site.

la première partie de ma sitemap est :

<rdf:Description rdf:about="urn:sitemap:root">
<map:container>
<rdf:Seq>
<rdf:li rdf:resource="syl:home"/>
<rdf:li rdf:resource="syl:cestquoi"/>
<rdf:li rdf:resource="syl:configurer"/>
<rdf:li rdf:resource="syl:logiciels"/>
<rdf:li rdf:resource="syl:temp"/>
[...]etc
</rdf:Seq>
</map:container>
</rdf:Description>

? Ça veut dire quoi tout ce charabia ?

Ne vous inquiétez pas. Ceci vous paraitra beaucoup plus clair une fois que vous aurez fini de lire ce tutoriel.

Je vous explique ce code :

<rdf:Description rdf:about="urn:sitemap:root">

Cette ligne est obligatoire pour une sitemap. Elle indique le début de l'arborescence et les éléments qui seront au "premier niveau"(disons ça comme ça).

<map:container>
<rdf:Seq>
Indique le début du contenu de la sitemap, de ce que les visiteurs de votre site verront. Obligatoire également.

<rdf:li rdf:resource="syl:home"/>
<rdf:li rdf:resource="syl:cestquoi"/>
<rdf:li rdf:resource="syl:configurer"/>

Veut dire : l'élément "syl:home" sera affiché en premier, puis celui "syl:cestquoi", etc...
Obligatoire aussi, a moins de ne rien vouloir mettre dans sa sitemap...

</rdf:Seq>
</map:container>
</rdf:Description>

Indique la fin du contenu de votre sitemap. Obligatoire.

C'est maintenant que cela devient intéressant. Je vous ai parlé "d'éléments", nous allons maintenant les rajouter dans votre sitemap. Nous allons par exemple indiquer le contenu de l'élément

<rdf:li rdf:resource="syl:home"/>

il faut mettre du code qui donnera le titre du contenu ainsi qu'un lien vers la page correspondante. Le code

<rdf:Description rdf:about="syl:home">
    <dc:title>Ssylvainsab - Accueil</dc:title>  <dc:identifier>ssylvainsab.free.fr/index.html</dc:identifier>
</rdf:Description>

Indique le contenu de l'élément "syl:home"

Voici la signification de ce code :

<rdf:Description rdf:about="syl:home">

Indique le début d'un élément et dit : Cet élément est l'élément "syl:home".

<dc:title>Ssylvainsab - Accueil</dc:title>

Veut dire : Le titre de cet élément est "Ssylvainsab - Accueil"

<dc:identifier>ssylvainsab.free.fr/index.html</dc:identifier>

Indique la page vers laquelle dirige l'élément.

</rdf:Description>

Indique la fin du contenu de l'élément.

donc le code :

<?xml version="1.0"?>

<rdf:RDF xmlns="www.w3.org/1999/02/22-rdf-syntax-ns#"
        xmlns:rdf="www.w3.org/1999/02/22-rdf-syntax-ns#"
        xmlns:map="www.oaklett.org/map/1.0#"
        xmlns:dc="purl.org/dc/elements/1.1/">

    <rdf:Description rdf:about="urn:sitemap:root">
        <map:container>
            <rdf:Seq>
                <rdf:li rdf:resource="syl:home"/>
            </rdf:Seq>
        </map:container>
    </rdf:Description>

<rdf:Description rdf:about="syl:home">
    <dc:title>Ssylvainsab - Accueil</dc:title>
    <dc:identifier>ssylvainsab.free.fr/index.html</dc:identifier>
</rdf:Description>

</rdf:RDF>

Veut dire : La version de ce fichier est la version 1.
Le contenu de la sitemap sera l'élément "syl:home".
Le titre de l'élément "syl:home" est Ssylvainsab - Accueil et c'est un lien vers la page ssylvainsab.free.fr/index.html.

Evidemment une sitemap avec seulement la page d'accueil n'aurait pratiquement aucun intérêt. Il vous faut donc rajouter des éléments.

Nous allons voir ici comment faire pour ajouter des dossiers à votre sitemap. Par exemple, nous voulons que la sitemap contienne la page d'accueil et un dossier de photos. il faudra entrer le code :

[...]
<rdf:Description rdf:about="urn:sitemap:root"><!--Le début de la sitemap-->
    <map:container><!--Le contenu de la sitemap-->
        <rdf:Seq>
            <rdf:li rdf:resource="pagedaccueil"/><!--On affichera en premier l'element "pagedaccueil"-->
            <rdf:li rdf:resource="photos"/><!--On affiche ensuite l'element "photos"-->
        </rdf:Seq>
    </map:container><!--On ferme le contenu de la sitemap-->
</rdf:Description>

<rdf:Description rdf:about="pagedaccueil"><!--Ceci est l'element "pagedaccueil"-->
    <dc:title>Accueil</dc:title><!--Le titre de cet element est "Accueil"-->
    <dc:identifier>www.monsite.com/index.html</dc:identifier><!--Il y a un lien vers ma page d'accueil sur cet element-->
</rdf:Description><!--On ferme l'element "pagedaccueil"-->

<rdf:Description rdf:about="photos"><!--Ceci est l'element "photos". C'est un dossier avec mes photos-->
    <dc:title>Les Photos de Mes Vacances</dc:title><!--Le titre du dossier est "Les Photos de Mes Vacances-->
    <dc:identifier>www.monsite.com/photos/index.html</dc:identifier><!--Il y a un lien vers la page de mes photos sur cet element -->
    <map:container><!--Le contenu de l'element "photos"-->
        <rdf:Seq>
             <rdf:li rdf:resource="photo1"/><!--On affiche d'abord la premiere photo-->
            <rdf:li rdf:resource="photo2"/><!--Puis la deuxieme-->
            <rdf:li rdf:resource="photo3"/><!--puis la troisieme-->
            <rdf:li rdf:resource="photo4"/><!--...etc-->
            <rdf:li rdf:resource="photo5"/><!--etc-->
        </rdf:Seq>
    </map:container><!--On ferme le contenu du dossier-->
</rdf:Description>

<rdf:Description rdf:about="photo1"><!--Ceci est le contenu de l'element "photo1"-->
    <dc:title>Moi a la plage</dc:title><!--Le titre de cet element est "Moi a la plage"-->
    <dc:identifier>www.monsite.com/photos/premierephoto.jpg</dc:identifier><!--Il y a un lien vers la photo de moi a la plage dans cet element-->
</rdf:Description><!--On ferme l'element "photo1"-->

<rdf:Description rdf:about="photo2"><!--Ceci est le contenu de l'element "photo2"-->
    <dc:title>Moi a la montagne</dc:title><!--Le titre de cet element est "Moi a la montagne"-->
    <dc:identifier>www.monsite.com/photos/deuxiemephoto.jpg</dc:identifier><!--Il y a un lien vers la photo de moi a la montagne dans cet element-->
</rdf:Description><!--On ferme l'element "photo2"-->

<rdf:Description rdf:about="photo3"><!--On ouvre l'element-->
    <dc:title>Moi et mes amis</dc:title><!--Le titre est "Moi et mes amis"-->
    <dc:identifier>www.monsite.com/photos/troisiemephoto.jpg</dc:identifier><!--Il y a un lien vers la photo de moi et mes amis-->
</rdf:Description><!--On ferme l'element-->

<rdf:Description rdf:about="photo4"><!--On ouvre l'element-->
    <dc:title>Mon chien</dc:title>
    <dc:identifier>www.monsite.com/photos/monchien.jpg</dc:identifier><!--photo de mon chien-->
</rdf:Description><!--On ferme l'element-->

<rdf:Description rdf:about="photo5"><!--...etc-->
    <dc:title>Moi</dc:title>
    <dc:identifier>www.monsite.com/photos/photo.jpg</dc:identifier><!--...etc-->
</rdf:Description><!--etc-->

</rdf:RDF>
[...]

Voici ce que le visiteur verra lorsqu'il visitera votre site :
sylvain.sab.free.fr/img/autres/navibarexemple.jpg

Si vous ne voulez pas mettre de lien sur un dossier, il suffit de mettre une ancre (un dièze) à la place. Exemple :

<rdf:Description rdf:about="photos"><!--Ceci est l'element "photos". C'est un dossier avec mes photos-->
    <dc:title>Les Photos de Mes Vacances</dc:title><!--Le titre du dossier est "Les Photos de Mes Vacances-->
    <dc:identifier>#</dc:identifier><!--J'AI MIS UN DIEZE DONC IL N'Y A PAS DE LIENS ATTRIBUE A CE DOSSIER-->
    <map:container><!--Le contenu de l'element "photos"-->
        <rdf:Seq>
             <rdf:li rdf:resource="photo1"/><!--On affiche d'abord la premiere photo-->
            <rdf:li rdf:resource="photo2"/><!--Puis la deuxieme-->
            <rdf:li rdf:resource="photo3"/><!--puis la troisieme-->
            <rdf:li rdf:resource="photo4"/><!--...etc-->
            <rdf:li rdf:resource="photo5"/><!--etc-->
        </rdf:Seq>
    </map:container><!--On ferme le contenu du dossier-->
</rdf:Description>

Vous pouvez faire autant de dossiers et de fichiers que vous voulez à l'interieur d'autant de dossiers que vous voulez. Par contre attention, il ne faut pas mettre d'accent ou d'autre caractère à part "-" ou "_" dans votre fichier, sinon il y aura à la place un point d'interrogation. Il faut utiliser les entités (par exemple é pour é) ou encoder en iso.


Voila, vous savez maintenant comment faire une sitemap. Notez qu'il existe un validateur pour ce type de documents : www.w3.org/RDF/Validator/

Si votre document est valide, voici ce qui doit s'afficher :

"Validation Results
Your RDF document validated successfully."

Si votre document n'est pas valide, vérifiez :

• Que toutes les balises sont bien fermées dans le bon ordre
• Que vous n'avez pas oublié de guillemets
• Que vous n'avez pas mi un caractère invalide