-Le HTML pour le référencement

Nous abordons maintenant l’optimisation du code HTML proprement dite. Avant d’entrer dans le vif du sujet, nous devons faire quelques rappels à propos du langage HTML.

-HTML, le minimum

Ces rappels représentent le minimum de connaissances nécessaires en HTML sans lesquelles il est vain d’espérer pouvoir optimiser vos pages web. Ceux qui sont familiers du HTML n’y apprendront rien de nouveau et y trouveront même quelques approximations à portée purement pédagogique.

HTML, Kezako ?

A chaque page web, que vous visitez sur Internet, est associé un fichier au format HTML que votre navigateur (Internet Explorer, Opera, Firefox ou autre) reçoit et a la charge d’afficher.

Ce fichier au format texte (donc humainement lisible) décrit l’apparence que doit avoir la page web correspondante (texte, images, mise en forme, etc.).

Par exemple, en vous rendant sur la page d’accueil du journal du Net, vous pouvez afficher le fichier qu’a reçu votre navigateur (clic droit + Afficher la source dans Internet Explorer). Dans un éditeur de texte s’affiche alors le texte suivant (code HTML) de la page d’accueil du journal du Net.

Cette description est faîte en HTML. Le HTML (Hyper Text Markup Language) est un langage standard qui repose sur des balises (de mise en forme, en général). Il existe des balises pour afficher du texte, pour le mettre en gras, pour insérer des images, etc. Les balises (tags en anglais) sont toujours présentées entre chevrons <nom de la balise>. Le texte mis en forme est la plupart du temps encadré par une balise ouvrante et une balise fermante.

Par exemple, pour afficher en gras le texte baladeur mp3, on utilise la balise b (pour bold, gras en anglais) comme suit,

<b>baladeur mp3</b>

Autre exemple, pour afficher en titre de premier niveau le texte voiture de sport, on utilise la balise h1 comme suit,

<h1>voiture de sport</h1>

-Structure d’une page HTML

Une page HTML est divisée en deux sections : un entête (HEAD) et un corps (BODY). On trouve dans l’entête des balises spécifiques d’entête qui fournissent des informations d’ordre général sur le document à afficher. Et on trouve dans le corps le document à afficher et ses mises en forme par des balises spécifiques de corps.

Voici comment s’organise une page HTML.

Code HTML :


<HTML>

        <HEAD>


… Balises d’entête -> informations d’ordre général …
  

         </HEAD>
 

                   <BODY>


… Balises de corps -> page web et mise en forme …
  

                    </BODY>


 </HTML>

 

Aller plus loin

Les connaissances qui précèdent sont succinctes et sont le minimum nécessaire à la compréhension de l’optimisation du code HTML de vos pages web. Davantage de connaissances en HTML est néanmoins préférable.

Vous trouverez sur le site du zéro un excellent tutorial sur le XHTML, un « HTML amélioré » (compris par les moteurs de recherche). Vous devriez en peu de temps faire d’immenses progrès.

Pour aller encore plus loin, il peut être intéressant de consulter les standards HTML 4.01 et XHTML 1.1.

Le tag Title

Nous abordons maintenant l’optimisation. Nous commencerons par la balise Title du code HTML proprement dite.

Le tag Title, Kezako ?

Lorsqu’on examine le code html de la page web

http://www.google.fr/search?hl=fr&q=baladeur+mp3&btnG=Rechercher&meta=lr%3Dlang_fr

(clic droit + Afficher la source dans Internet Explorer), on peut y voir en début de fichier le petit bout de code suivant.

Ce bout de code <title>baladeur mp3 – Recherche Google</title> permet d’afficher dans la barre des titres (d’où le nom de balise Title) de la page de résultats de Google la mention baladeur mp3 – Recherche Google.

 

-Le tag Title, selon la norme HTML 4.01

La norme HTML 4.01 dit que : chaque document HTML doit avoir un et un seul élément TITLE, cet élément TITLE doit se trouver dans la section HEAD (l’entête) du document, l’élément TITLE ne fait pas partie du flux de texte (il devrait être affiché comme titre de la page ou de la fenêtre), l’élément TITLE peut contenir des caractères accentués ou spéciaux, enfin, l’élément TITLE nécessite obligatoirement une balise ouvrante et une balise fermante.

Ci-dessous un exemple d’élément TITLE correctement formé.

Code HTML :


<HTML>
  

     <HEAD>
    

              <TITLE>

     Catalogue de baladeurs mp3

              </TITLE>


                      … autres éléments d’en-tête …
  

              </HEAD>
  

        <BODY>

                 … corps du document …
  

         </BODY>


</HTML>

Il est vivement conseillé de se conformer à cette norme car les moteurs de recherche apprécient les documents correctement formés, c’est-à-dire formés selon la norme HTML.

Par abus de langage on désigne souvent l’élément TITLE par balise TITLE ou tag TITLE.

Pour être clair, l’élément TITLE se compose d’une balise ouvrante (<TITLE>), d’une balise fermante (</TITLE>) et du texte associé, ici Catalogue de baladeurs mp3.

 

– Le tag Title est-il vraiment important ?

Cette balise HTML est unique. Il n’y en a qu’un seul exemplaire par page HTML, en général en début de fichier. Dans la mesure où celle-ci ne fait pas réellement corps avec la page web, elle ne se voit quasiment pas. Il est donc légitime de se demander si elle est vraiment importante pour le référencement et donc si il est vraiment nécessaire d’y travailler.

Cette balise HTML est probablement la plus importante de toutes. Les moteurs de recherche y accordent une grande importance. Si il ne fallait en optimiser qu’une seule, ce serait celle- là. Il est donc impératif pour améliorer le référencement de vos pages web de parfaire leur balise TITLE. Car une balise TITLE correctement calibrée, c’est déjà une grande partie du travail de thématisation et de positionnement réalisé.

– Comment dois-je rédiger le tag TITLE de mes pages web ?

Les incontournables

Une balise TITLE différente pour chaque page

A chaque page, son titre. Ce titre doit absolument refléter le contenu réel de la page. Il est donc impératif de ne pas répéter le même titre sur toutes les pages de votre site web. Car vous perdriez une occasion de varier vos mots-clés. Dans l’idéal, vous ne devriez pas avoir deux pages de votre site web avec la même balise TITLE.

-Un titre intelligible

Il est capital de ne pas faire de vos balises TITLE des successions inintelligibles de mots-clés.

Vous devez donner envie à l’internaute de cliquer. Lorsqu’on examine les résultats Google http://www.google.fr/search?hl=fr&q=baladeur+mp3&btnG=Rechercher&meta=lr%3Dlang_fr pour le mot-clé « Baladeur mp3 », on constate que c’est le TITLE des pages (cerclé de rouge dans la capture ci-dessous) qui est rapporté par Google dans sa liste de résultats.

Vous devez donc vous attacher à faire des balises TITLE en forme de slogans attractifs, sans pour autant être racoleurs.

Par exemple,

A conseiller,

<TITLE>Lecteur MP3 – Baladeur MP3 – Achat au meilleur prix !</TITLE>.

A éviter,

<TITLE>Baladeur Baladeurs, petit prix, achat, vente, comparatif, meilleur prix, baladeur mp3, baladeurs mp3</TITLE>.

-Les mots-clés

La balise TITLE de vos pages web doit absolument contenir vos mots-clés les plus importants. De manière générale, ce sont les mots-clés situés le plus à gauche qui auront l’impact le plus fort sur le référencement de vos pages web.

Par exemple, pour le mot-clé Baladeur mp3, le titre

<TITLE>Baladeur mp3 – Achat baladeurs et lecteurs mp3</TITLE>

est préférable au titre

<TITLE>Achat baladeurs et lecteurs mp3 – Baladeur mp3</TITLE>.

-La taille

La taille optimale de la balise TITLE varie d’un moteur de recherche à l’autre. Cependant, les professionnels sont en général d’accord pour fixer cette taille optimale à une soixantaine de caractères, soit environ une dizaine de mots.

L’application de ces conseils devrait déjà avoir une incidence notable sur votre référencement. Il vous est néanmoins possible d’aller plus loin.

-En tête de fichier

On tâchera de placer ce petit bout de code HTML le plus près possible du début du fichier. Il faudra donc le placer tout de suite après l’ouverture de la balise <HEAD> et après le META qui déclare le CHARSET. De la sorte, vous pourrez utiliser les caractères accentués dans vos balises TITLE.

L’exemple suivant spécifie l’encodage de caractères du document comme étant ISO-8859-5 (qui vous permettra l’usage de caractères accentués).

<META http-equiv= »Content-Type » content= »text/html; charset=ISO-8859-5″>

Ci-dessous un exemple complet d’élément TITLE correctement formé.

Code HTML :


<HTML>
  

   <HEAD>
    

      <META http-equiv=content-type content= »text/html; charset= ISO-8859-5″>
    

              <TITLE>

                      Baladeurs mp3 – des prix en fêtes !

              </TITLE>

                       … autres éléments d’en-tête …
  

        </HEAD>
  

                 <BODY>

                         … corps du document …
  

                   </BODY>


</HTML>

-La forme du titre

On privilégiera un TITLE ayant la forme « phrase avec mot-clé + nom du site web » plutôt que « nom du site web + phrase avec mot-clé ».

Par exemple, pour le mot-clé Baladeur mp3, le titre <TITLE>Baladeur mp3 – Achat baladeurs et lecteurs mp3 – HighTechDiscount</TITLE> est préférable au titre <TITLE>HighTechDiscount – Baladeur mp3 – Achat baladeurs et lecteurs mp3</TITLE>.

Mise en garde

La modification à répétition de la balise TITLE d’une page web peut entraîner une pénalité pour les sites web jeune. On modifie la balise TITLE sur des pages qui reçoivent déjà du trafic des moteurs de recherche, pas sur des pages non encore affirmées. Les webmasters de sites jeunes devront donc s’armer de patience

-Le tag Meta/Description

Nous abordons maintenant l’optimisation de notre première balises Meta : la balise Meta/Description.

-Le tag Meta/Description, Kezako ?

Lorsqu’on examine le code html de la page web suivante (clic droit + Afficher la source dans Internet Explorer)

http://www.topachat.com/pages/g_cat_est_imageson_puis_page_est_-lecteur-mp3—baladeur-mp3.html ,

on peut y voir en début de fichier le petit bout de code suivant,

<META NAME= »Description » CONTENT= »Vente Lecteur MP3 – Baladeur MP3 au meilleur prix ! Top Achat vous propose des prix vraiment pas chers et les plus bas du net ! Top Achat, le high-tech moins cher… »>

Le tag Meta/Description définit une propriété nommée (name en anglais) Description à laquelle est affecté un contenu (content en anglais).

La propriété Description a pour valeur « Vente Lecteur MP3 – Baladeur MP3 au meilleur prix ! Top Achat vous propose des prix vraiment pas chers et les plus bas du net ! Top Achat, le high-tech moins cher… ».

La propriété Description sert à décrire le contenu d’une page web. Elle n’est pas destinée aux internautes, mais plutôt aux moteurs de recherche.

-Le tag Meta/Description, selon la norme HTML 4.01

La spécification HTML 4.01 autorise à spécifier des métadonnées (des informations sur le document plutôt que sur le contenu du document). Cependant, cette spécification ne définit aucun ensemble de propriétés de métadonnées légales. Ces métadonnées font l’objet de convention d’usage. Le Meta/Description fait partie de cet ensemble voué à la définition des métadonnées.

Ces métadonnées obéissent toutes aux mêmes règles. La norme HTML 4.01 dit que : chaque document HTML peut (non obligatoire) contenir un ou plusieurs éléments META, ces éléments META doivent se trouver dans la section HEAD (l’entête) du document, l’élément META définit une propriété auquel lui est assignée une valeur, l’élément META peut contenir des caractères accentués ou spéciaux, enfin, l’élément META nécessite obligatoirement une balise ouvrante et ne doit pas avoir de balise fermante.

Ci-dessous un exemple d’éléments META correctement formés.

Code HTML :


<HTML>
  

     <HEAD>


            … éléments d’en-tête …
    

         <META name= »author » content= »HTML4SEO Team »>
    

           <META name= »copyright » content= » HTML4SEO Copyright © 2009″>


                                    … autres éléments d’en-tête …
  

       </HEAD>
  

                <BODY>


                        … corps du document …
  

                 </BODY>


</HTML>

name définit le nom de la propriété et content sa valeur.

On a donc ici, author = HTML4SEO Team et copyright = HTML4SEO Copyright © 2009.

Attention, la norme HTML 4.01 ne dit rien des propriétés auteur et copyright présentement définies.

La norme HTML 4.01 permet un paramétrage plus poussé des tags META. Pour aller plus loin dans ce paramétrage, consultez

http://www.la-grange.net/w3c/html4.01/struct/global.html#h-7.4.4.2.

Il est vivement conseillé de se conformer au standard HTML (peu importe la version) car les moteurs de recherche apprécient les documents correctement formés, c’est-à-dire formés selon le standard HTML.

– Le Meta/Description est-il vraiment important ?

Cette balise HTML est, en principe, unique. Il n’y en a qu’un seul exemplaire par page web, en général en début de fichier. Celle-ci ne fait pas corps avec la page web, elle ne se voit pas. Elle n’est pas destinée aux internautes, mais plutôt aux moteurs de recherche.

Depuis le début des années 2000, l’influence du tag Meta/Description sur le positionnement a sérieusement diminué du fait d’abus (blindage en mots-clés). On peut donc se demander aujourd’hui si elle est vraiment importante pour le référencement et donc si il est vraiment nécessaire d’y travailler.

Ne la négligez pas !

Elle n’intervient certes plus dans l’algorithme de classement des moteurs de recherche.

Cependant, les moteurs de recherche y accordent encore de l’importance. En effet, ils y ont souvent recours pour décrire les pages web présentées dans leurs résultats de recherche.

En renseignant les tags Meta/Description de vos pages web, vous proposez aux moteurs de recherche une description de votre page web, qu’ils afficheront très probablement dans leurs résultats de recherche. De cette manière, vous maîtrisez mieux la communication faîte sur votre page web dans les SERP. Vous pouvez ainsi inciter davantage l’internaute à cliquer sur votre lien plutôt que sur ceux de vos concurrents. Dans le cas contraire, vous laissez l’initiative aux moteurs de recherche de choisir n’importe quel morceau de texte de votre page web. Et il est fort probable qu’il choisisse un bout de texte sans intérêts.

On peut constater dans cet exemple que certains liens sont plus vendeurs que d’autres.

-Une balise Meta/Description différente pour chaque page web

A chaque page, sa description. Cette description doit absolument refléter le contenu réel de la page. Dans le cas contraire, l’internaute floué ne tardera pas à quitter votre page.

Rappelez-vous, ce n’est pas la quantité de trafic qui compte mais la quantité transformée, autrement dit la qualité (dans le sens, public que vous visez). Il est donc impératif de ne pas répéter la même description sur toutes les pages de votre site web. Car cette description serait alors trop générique. Dans l’idéal, vous ne devriez pas avoir deux pages de votre site web ayant la même balise Meta/Description.

-Une description intelligible plutôt qu’un bourrage de mots-clés

Il est impératif de ne pas faire de vos balises Meta/Description des successions inintelligibles de mots-clés. La mode n’est plus au bourrage de mots-clés, mais plutôt au vrai contenu des pages web. Une ou deux phrases correctement construites ont plus de valeur qu’une série de mots-clés.

En effet, comme nous l’avons précisé plus haut, la balise Meta/Description n’entre pas directement en ligne de compte dans le référencement. Par contre, elle permet de vous dissocier des autres résultats que renvoient les moteurs de recherche (SERP) et ainsi de rendre votre page web plus attractive que celles de vos concurrents. Vous devez donner envie à l’internaute de cliquer sur votre page web.

Lorsqu’on examine les résultats Google pour le mot-clé Baladeur mp3, on constate que c’est la balise Meta/Description des pages web (cerclée de rouge – voir plus haut) qui est rapportée par Google dans sa liste de résultats.

Vous devez donc vous attacher à faire des balises Meta/Description en forme de présentation attractives, sans pour autant être racoleurs.

Par exemple,

A conseiller,

<META NAME= »Description » CONTENT= »Top Achat vous rembourse la différence si vous trouvez moins cher ailleurs ! Vente Lecteur MP3 – Baladeur MP3 au meilleur prix ! Top Achat, le high-tech moins cher… »>.

A éviter,

<META NAME= »Description » CONTENT= »XXXXXXX : catégorie Baladeur MP3 / MP4 mp3 & hifi »>

-Des mots-clés pas si importants

La balise Meta/Description ne doit pas se soucier de contenir vos mots-clés importants. Au risque d’être pénible, la balise Meta/Description n’entre pas directement en ligne de compte dans le positionnement de vos pages web dans les SERP. Elle se contente « d’assister » les moteurs de recherche dans la présentation qu’ils font de votre page web dans les SERP.

Par exemple,

A conseiller,

<META NAME= »Description » CONTENT= »Top Achat vous rembourse la différence si vous trouvez moins cher ailleurs ! Vente Lecteur MP3 – Baladeur MP3 au meilleur prix ! Top Achat, le high-tech moins cher… »>.

A éviter,

<META NAME= »Description » CONTENT= »Forum-mp3.com: télécharger mp3, Actualité, prix baladeur mp3,guide de baladeur mp3, conseil pour acheter un baladeur mp3, karaoké mp3 et sonnerie mp3. »>

-La taille

La taille optimale de la balise Meta/Description varie d’un moteur de recherche à l’autre.

Cependant, les professionnels sont en général d’accord pour fixer cette taille optimale à 250 caractères, soit environ une soixantaine de mots.

-Les caractères accentués

Si vous utilisez des caractères accentués dans vos balises Meta/Description, il faudra alors impérativement placer vos descriptions après le META qui déclare le CHARSET.

L’exemple suivant spécifie l’encodage de caractères du document comme étant ISO-8859-5 (qui permet l’usage de caractères accentués).

<META http-equiv= »Content-Type » content= »text/html; charset=ISO-8859-5″>

Ci-dessous un exemple complet d’élément Meta/Description avec charset correctement formé.

Code HTML :


<HTML>
  

        <HEAD>
    

               <META http-equiv=content-type content= »text/html; charset= ISO-8859-5″>
    

                    <TITLE>

                             …

                    </TITLE>
    

                <META name= »description » content= »… rembourse la différence… »>


                          … autres éléments d’en-tête …
  

               </HEAD>
  

               <BODY>

                        
… corps du document …
  

               </BODY>


</HTML>

Enfin, la solution de l’encodage HTML est une autre approche sur laquelle le charset est sans incidence.

Ci-dessous un exemple complet d’élément Meta/Description sans charset et avec encodage html correctement formé.

Code HTML :

<HTML>
  

     <HEAD>
    

                <TITLE>

                         …

                </TITLE>
    

                          <META name= »description » content= »… rembourse la diff&eacute;rence… »>


                         … autres éléments d’en-tête …
  

          </HEAD>
  

          <BODY>

             
… corps du document …
  

           </BODY>


</HTML>

Le « é » de différence est « html encodé » « &eacute; ».

L’application de ces conseils devrait améliorer votre taux de clics dans les SERP.

Le tag Meta/Keywords

Le tag Meta/Keywords, Kezako ?

Lorsqu’on examine le code html de la page web suivante (clic droit + Afficher la source dans Internet Explorer)

http://www.topachat.com/pages/g_cat_est_imageson_puis_page_est_-lecteur-mp3—baladeur-mp3.html ,

on peut y voir en début de fichier le petit bout de code suivant,

 <META NAME= »Keywords » CONTENT= »Lecteur, MP3, Baladeur, achat, acheter, vente »>

Le tag Meta/Keywords définit une propriété nommée (name en anglais) Keywords à laquelle est affecté un contenu (content en anglais).

La propriété Keywords a pour valeur « Lecteur, MP3, Baladeur, achat, acheter, vente ».

La propriété Keywords n’est pas destinée aux internautes, mais plutôt aux moteurs de recherche. Elle sert à décrire le contenu d’une page web à l’aide d’une liste de mots-clés représentatif de son contenu.

-Le tag Meta/Keywords, selon la norme HTML 4.01

Voir plus haut, la norme HTML 4.01 pour le Meta/Description.

– Le tag Meta/ Keywords est-il vraiment important ?

Le tag Meta/Keywords ne sert strictement à rien !

Si, peut-être à vous faire perdre du temps.

Les moteurs de recherche ont beaucoup évolué depuis les débuts de l’Internet. A l’origine cette balise les aidait à classer les documents HTML. Il était alors facile aux webmasters d’abuser les moteurs de recherche en trichant sur le contenu de ces listes de mots-clés, pas toujours conforme au contenu des pages web qu’elles étaient censées décrire. Ils y mettaient des listes interminables de mots-clés, ciblaient plusieurs marchés à la fois, tous reconnus à fort trafic et espéraient drainer ainsi un maximum de trafic souvent peu qualifié.

Les moteurs de recherche ont affiné leurs algorithmes qui maintenant se passent de cette balise. Elle ne sert donc plus à rien aujourd’hui. Les professionnelles du SEO sont tous d’accord sur ce point. Inutile donc de vous y attarder.

-Les tags H1 à H6

Nous continuons notre passage en revue des balises html avec l’optimisation des balises H1 à H6.

-Les tags H1 à H6, Kezako ?

Lorsqu’on examine le code HTML de la Faq HTML4SEO (clic droit + Afficher la source dans Internet Explorer)

http://www.html4seo.com/html4seo-faq.htm,

on y trouve le bout de code suivant,

Le chiffre de la balise (de 1 à 6) va croissant avec le niveau de détail du titre. Les titres en H1 sont les plus importants, donc les plus visibles (en général avec la taille de police la plus grande et éventuellement une couleur différente de celle du reste du texte), alors que les tags H6 sont les moins importants.

-Les tags H1 à H6 selon la norme HTML 4.01

La norme HTML 4.01 nous dit que : chaque document HTML peut (non obligatoire) contenir un ou plusieurs titres H1 à H6, chaque titre H1 à H6 nécessite obligatoirement une balise ouvrante <Hn> et une balise fermante </Hn>, il existe 6 niveaux de titrages, l’élément H1 étant le plus important et H6 le moins important.

Voici un exemple d’éléments H1, h1 et H3 correctement formés.

Code HTML :


<HTML>
  

      <HEAD>

               
… éléments d’en-tête …
  

       </HEAD>
 

       <BODY>

                 
… introduction du document …
    

           <H1>Les poissons d’eau douce</H1>


           … ici une courte introduction sur les poissons d’eau douce …
    

            <h1>En Europe</h1>


   … ici un texte présentant les spécificités de ces poissons en Europe …
    

            <H3>En Europe du nord</H3>

               
… détails sur les poissons d’Europe du nord …
    

              <H3>En Europe de l’ouest</H3>

                           
… détails sur les poissons d’Europe de l’ouest …
…
    

                <h1>En Asie</h1>


   … ici un texte présentant les spécificités de ces poissons en Asie …
…
    

                   <H1>Les poissons d’eau de mer</H1>


                                   …
  

         </BODY>


</HTML>

Le respect de la hiérarchie des balises de titre H1 à H6 n’est pas obligatoire d’après la norme mais il est fortement recommandé. Dans le précédent exemple, les titres sont correctement hiérarchisés.

A éviter, code HTML :
    

<H1>Les éléphants d’Afrique</H1>


                                    …
    

<H3>En Afrique du sud</H3>

                                    
…
   

 <h1>Les éléphants d’Asie</h1>


                                    …
   

<H3>En Asie du sud-est</H3>

Notez que le niveau d’importance de la balise ouvrante doit être strictement le même que celui de la balise fermante.

Voici un exemple de titre valide :

    <H1>Les castors lapons</H1>

Le titre suivant n’est pas valide et risque même de déstructurer toute la mise en page du document :

     <H1>Les castors lapons</h1>

– Quelle importance ont les balises H1 à H6 ?

Les balises H1 à H6 dans le corps d’une page web

Les balises H1 à H6 sont probablement les plus importantes de page web. Après la balise TITLE, la balise H1 semble la référencement. Lorsqu’ils sont bien choisis, les titres introduisent d’une certaine manière, en sont représentatifs). Ils fournissent pertinents pour identifier le document.

Les balises H1 à H6 entre elles

Pour les moteurs de recherche, les balises H1 à H6 n’ont pas toutes la même importance.

Les balises H1, les plus importantes parmi les titres, le sont aussi pour le référencement. Plus on augmente de niveau de titre (h1, H3, H4, H5 et H6), moins son contenu sera considéré par les moteurs de recherche. Le contenu d’une balise H1 sera donc plus important que celui d’une balise h1, lui-même plus important qu’une balise H3 et ainsi de suite jusqu’à H6. Les efforts d’optimisation devront donc se concentrer en priorité sur les titres en H1, puis en h1, etc.

-Des balises stratégiques pour le référencement

Les tags H1 à H6 et les autres tags HTML

Après la balise TITLE d’une page web (titre de la fenêtre du navigateur), les balises H1 à H6 (titres et sous-titres du texte de la page) sont probablement les balises HTML les plus considérées par les moteurs de recherche. Elles sont donc presque incontournables dans l’optimisation d’une page web pour un meilleur référencement.

Les tags H1 à H6 entre eux

Toutes les balises H1 à H6 ne se valent pas. Les plus importantes parmi elles sont les balises H1, qui correspondent aux titres de premier niveau. Viennent ensuite les balises h1, puis les H3, jusqu’à H6. Les titres doivent notamment être hiérarchisés pour une bonne optimisation.

Les spécialistes SEO sont généralement d’accord pour dire que les balises H1, h1 et éventuellement H3 ont une véritable influence sur le référencement. Selon ces mêmes experts SEO, les suivantes (H4, H5 et H6) sont apparemment beaucoup plus sujettes à caution. Il est donc vivement recommandé d’insérer des mots-clés stratégiques surtout dans les balises H1 (en priorité) et h1. On veillera tout particulièrement à éviter les fautes d’orthographe.

Dans l’exemple suivant, les titres de la page ne sont pas optimisés.

Code HTML :
    

<H1>Bouger à Paris</H1>


                   …
    

 <h1>Que visiter ?</h1>


                   …
    

  <H3>La tour Effeil</H3>

                  …
    

   <h1>Où dormir ?</h1>


                   …
    

     <H1>Partir pour Dunkerque</H1>

Il faut choisir avec soin les mots-clés à partir desquels les utilisateurs peuvent trouver la page web.

Code HTML :
    

<H1>Voyage à Paris</H1>


                   …
    

  <h1>La visite des monuments historiques</h1>

                    …
    

  <H3>Visiter la tour Effel</H3>

                     …
    

  <h1>Les hôtels à Paris</h1>

                    …
    

  <H1>Le tourisme à Dunkerque</H1>

– Comment bien rédiger mes balises H1 à H6 ?

SEO & internautes : le bon compromis !

En bon français, un titre doit refléter au mieux le contenu qu’il annonce. Or, un titre pertinent du point de vue de la langue n’est pas nécessairement optimal pour un bon référencement. Si un titre est correctement rédigé pour des lecteurs humains, il ne l’est pas forcément pour les moteurs de recherche. Les critères d’appréciation sont différents.

Pour un bon référencement, un titre doit contenir des mots-clés stratégiques. Il faut donc trouver le meilleur compromis entre une rédaction à destination des internautes et une rédaction à destination des moteurs de recherche. Dans la pratique, la tâche peut être ardue. Il faut savoir être fin rédacteur pour glisser opportunément les bons mots-clés dans les titres.

Par exemple, le titre, « Découvrez comment réussir votre mayonnaise » peut convenir à des utilisateurs humains comme aux moteurs de recherche mais pour ces derniers, le titre suivant sera préférable : « Recette d’une mayonnaise réussie

– Quelle taille pour les balises H1 à H6 ?

Il n’y a pas de taille canonique pour les titres. Ils peuvent être indifféremment courts ou longs. Il faut néanmoins surveiller la densité des mots-clés dans les titres. C’est un critère important. Cela peut justifier l’emploi plus récurrent de titres courts (ou éventuellement de longueur moyenne).

Dans l’exemple suivant, « De ce qu’il faut retenir quant aux principes du marketing et les définitions associées » la densité du mot-clé « marketing » est diluée par le nombre total de mots. On préférera donc le titre suivant, « Le marketing, principes et définitions »

Les images (IMG)

Passons maintenant aux illustrations.

-Les images selon la norme HTML 4.01

La norme HTML 4.01 dit que : l’élément IMG incorpore une image dans le document courant, à l’emplacement de la définition de l’élément, l’élément IMG n’a pas de contenu, il est généralement remplacé dans la ligne par l’image que désigne l’attribut src, l’attribut alt spécifie le texte de remplacement qui sera restitué si l’image ne peut s’afficher, enfin, l’élément IMG nécessite obligatoirement une balise ouvrante et ne doit pas avoir de balise fermante.

Ci-dessous un exemple d’élément IMG correctement formé.

<IMG src= »/img/logo-gnoztik.gif » alt= »logo GnoZtiK »/>

On a donc, le fichier image se situe à l’emplacement /img/logo-gnoztik.gif, l’image a pour description alternative « logo GnoZtiK ».

Consultez http://www.la-grange.net/w3c/html4.01/struct/objects.html#h-13.2, pour en savoir davantage.

– Quelle importance ont les images ?

En général, une image a valeur d’illustration. Elle est donc un élément important d’une page web mais également en soi. Elle peut améliorer le référencement de la page web qui l’accueille et peut aussi être référencée dans Google Image, source supplémentaire de trafic.

Cependant, les moteurs de recherche n’en comprennent pas le contenu. L’attribut alt permet toutefois de compenser cette défaillance en qualifiant l’image à laquelle il se rapporte.

– Comment dois-je construire les images de mes pages web ?

L’attribut ALT

Chaque image porteuse de sens se doit d’avoir une description alternative. L’attribut alt signale aux moteurs de recherche le contenu de l’image auquel il est rattaché. Faites donc des descriptions courtes (quelques mots) et, si possible, glissez-y des mots-clés (sur le principe densité/décompte énoncé plus haut).

Par exemple,

A conseiller,

<IMG SRC= »/Marrakech/Ryad/Ryad-bleu.jpg » ALT= »Marrakech, Ryad bleu »/>.

A éviter,

<IMG SRC= »/Marrakech/Ryad/Ryad-bleu.jpg »/>.

Texte et Légendes environnantes

D’après la FAQ de Google, le texte autour de l’image est capital pour contextualiser celle-ci.

Faites donc en sorte que le texte environnant soit en rapport direct avec le contenu de vos images. Si en plus ce texte contient des mots-clés, c’est encore mieux !

L’attribut SRC

Tout comme les urls, les fichiers images ont un nom complet composé de répertoires (optionnels) et d’un fichier. Faites en sorte que cet ensemble soit descriptif (mots-clés) pour vos images en portant une attention particulière au nom du fichier.

Par exemple,

A conseiller,

<IMG SRC= »/Marrakech/Ryad/Ryad-bleu.jpg » ALT= »Marrakech, Ryad bleu »/>.

A éviter,

<IMG SRC= »/img/mmrb-001.jpg » ALT= »Ryad Marrakech »/>.

Des images sans texte !

Placer du texte dans une image, c’est perdre du contenu. Rappelez-vous, les moteurs de recherche ne lisent pas le contenu des images. Gardez donc ce texte pour votre contenu !

Les liens (A)

-Les liens, Kezako ?

Un lien hypertexte, c’est un texte présent dans une page web sur lequel on peut cliquer pour se rendre sur une autre page web. Le lien représente une connexion entre deux documents web. C’est une caractéristique fondamentale du web.

-Les liens selon la norme HTML 4.01

La norme HTML 4.01 dit que : un lien part d’une ancre « source » et pointe vers une ancre « destination », chaque élément A définit une ancre, le texte (cliquable) de l’élément A définit la position de l’ancre, l’attribut href (optionnel) fait de cette ancre, l’ancre source d’exactement un lien, l’attribut name (optionnel) nomme l’ancre, de sorte que celle-ci puisse être la destination d’autres liens, enfin, l’élément A nécessite obligatoirement une balise ouvrante et une balise fermante.

Ci-dessous un exemple d’élément A correctement formé.

<A href= »http://www.gnoztik.com »>logiciel de référencement</A>

De façon simplifiée, la page web qui contient ce lien est l’ancre source (l’ancre est positionnée sur la séquence de texte « logiciel de référencement » de cette page web), la page web http://www.gnoztik.com est l’ancre destination, la direction va de la page web courante vers la page web http://www.gnoztik.com.

Consultez http://www.la-grange.net/w3c/html4.01/struct/links.html#edef-A, pour en savoir davantage.

– Quelle importance ont les liens ?

L’ancre des liens apparaît, en général, comme un texte différencié (bleu et souligné). En toute logique, si un webmaster prend la peine de mettre un lien sur une séquence de texte, c’est que cette séquence a probablement plus d’importance (dans une certaine mesure MOYENNE, car la fraude est possible) que le reste du texte.

Il n’y a cependant aucune certitude en la matière, si ce n’est que vos liens sont importants pour les pages web que vous pointez. Si ces pages sont les vôtres, alors mieux vaut soigner les ancres de vos liens. En plus de participer au maillage de votre site web, vous accordez quelques backlinks internes (moins valorisant que les externes) à vos pages web.

Enfin, sachez qu’ils n’occasionnent aucune perte de PageRank comme on peut parfois le lire ici ou là.

Donc dans le doute, soignez-les !

– Comment dois-je construire les liens de mes pages web ?

Les liens qui ont de l’importance sont surtout ceux qui se trouvent dans le corps du texte (votre contenu). Vous veillerez donc à y glisser quelques mots-clés sans excès (sur le principe densité/décompte énoncé plus haut) et à pointer sur des pages web en rapport avec le thème de vos pages web.

Par exemple,

A conseiller,

<A href= »http://www.gnoztik.com »>logiciel de référencement</A>.

A éviter,

<A href= »http://www.gnoztik.com »>cliquez ici</A>.

-Le texte

Le texte de vos pages web aussi est important !

-Un contenu ciblé

Vos pages web doivent impérativement avoir un contenu homogène. Mieux vaut faire plusieurs pages web très ciblées qu’une seule page web abordant des thèmes multiples.

Vous aurez de ce fait davantage de pages à référencer et donc autant d’opportunités supplémentaires pour être bien positionné dans les SERP.

-Densité et décompte avec modération

Tout comme pour les balises majeures à optimiser vues plus haut, le décompte et la densité nécessitent une attention particulière. Il ne faut cependant pas en faire une obsession. Les répétitions excessives alourdissent votre propos et rendent la lecture de vos pages web désagréable à l’internaute. N’hésitez donc pas à user de synonymes, les algorithmes des moteurs de recherche sont suffisamment perspicaces pour ne pas vous pénaliser, bien au contraire.

-Une surface d’exposition démultipliée

Dans la droite ligne de ce qui précède, le texte se doit d’être lexicalement riche et ciblé.

Veillez à varier les formulations, usez de synonymes, etc. De cette manière, votre référencement ne perdra pas en qualité puisque votre contenu restera ciblé et homogène.

Bien au contraire, avec un contenu de même volume, simplement plus varié votre surface d’exposition n’en sera que plus grande.

-Le texte du haut !

De manière générale pour les moteurs de recherche, le début d’une page web a plus de poids que sa fin. Vous y glisserez donc, dans la mesure du possible, les mots-clés sur lesquels vous ambitionnez de vous positionner.

-Mise en forme mineure

Enfin, vous utiliserez la mise en gras (balise B ou STRONG) avec parcimonie afin de faire ressortir les mots à fort contenu sémantique.