Mise en place des balise H1, H2. etc

Discussion dans 'Débuter en référencement' créé par gti, 17 Avril 2008.

  1. gti
    gti WRInaute discret
    Inscrit:
    8 Septembre 2003
    Messages:
    207
    J'aime reçus:
    0
    Bonjour

    dans le but d'améliorer mon référencement je suis en train de m'occuper des balise H1, H2...etc

    Comme je ne code pas la moindre ligne, c'est Dream qui fait ça pour moi, et il propose ces balises dans le menu FORMAT

    [​IMG]

    Si je créer un style CSS, que j'appelle H1, avec des attributs perso,
    que j'applique ce style à une partie de mon texte, est ce que ce sera
    considérer par les robots comme une vraie balise H1, et l'effet sera
    t il le même que Format de Dream ?

    Quelle est la différence entre le Format H1 proposer par Dream
    et un style H1 créer personnellement ?

    Merci d'avance
     
  2. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 257
    J'aime reçus:
    1
    c'est la même chose. bien sur que tu peux styliser un h1 avec un style css, on voit rarement des h1 en 30px noir / gras / marge de 1cm sur des sites :D
     
  3. blman
    blman WRInaute accro
    Inscrit:
    5 Septembre 2003
    Messages:
    2 740
    J'aime reçus:
    1
    Euh non... e-kiwi, c'est pas la même chose

    Le format H1 créera une balise structurée H1. En code ça donnerait ça :
    <h1>Mon titre</h1>

    Le style H1 créera une mise en forme qui a pour nom H1. En code ça pourrait donner ça :
    <span class="H1">Mon texte</span>

    Même si visuellement, ça peut effectivement donner la même chose, sémantiquement, c'est faux. <span class="H1"> n'est pas un titre alors que <h1> est un titre.


    Donc l'idéal searit de donner le format H1 à ton titre et de le styliser, pourquoi pas, avec un style nommé h1
     
  4. gti
    gti WRInaute discret
    Inscrit:
    8 Septembre 2003
    Messages:
    207
    J'aime reçus:
    0
    Merci pour ces infos

    Est ce quelque chose comme ça c'est correct ?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    <style type="text/css">
    <!--
    .decor-h1 {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 24px;
    	font-weight: bold;
    	color: #CC0000;
    	text-decoration: none;
    }
    .decor-h2 {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 18px;
    	font-weight: normal;
    	color: #0066CC;
    	text-decoration: underline;
    }
    -->
    </style>
    </head>
    
    <body>
    <h1 class="decor-h1">Titre H1</h1>
    <h2 class="decor-h2">sous titre h2 </h2>
    </body>
    </html>
     
  5. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    13 932
    J'aime reçus:
    4
    C'est correct.
     
  6. kmenslow
    kmenslow WRInaute passionné
    Inscrit:
    7 Août 2006
    Messages:
    1 871
    J'aime reçus:
    0
    Mieux vaut mettre ceci
    Code:
    h2 {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 18px;
       font-weight: normal;
       color: #0066CC;
       text-decoration: underline;
    } 
    ainsi dans le code de la page ce sera

    Code:
    <h2> Titre du truc much</h2>
     
  7. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    13 932
    J'aime reçus:
    4
    Sauf s'il a différents types de présentations incluant des h2, et qu'il ne maîtrise pas forcément l'aspect "cascaded" d'une stylesheet ;)


    (mais d'un point de vue technique, tu as entièrement raison, et je ne peux qu'être d'accord avec toi sur le fait qu'un code propre est un sérieux atout, si non pour le référencement, au moins pour la maintenance et la portabilité).
     
  8. tonguide
    tonguide WRInaute passionné
    Inscrit:
    28 Novembre 2003
    Messages:
    1 169
    J'aime reçus:
    0
    mieux vaut mettre des H1 par partie.

    Exemple, si ton H1 doit se trouver en header, mais sur une autre page dans le contenu (selon la partie quoi)

    tu fais par exemple
    <div id="header">
    <h1>titre</h1>
    </div>

    #header h1 { ton css }

    et pareil avec un #content h1 ...

    Si tu auras toujours le même h1 (h2 ...) tu fais comme le dis "kmenslow"

    Si tu veux faire comme tu fais, précises au moins le style

    Donc .decor-h1 tu le remplaces par h1.decor-h1, c'est plus clean :)

    PS : avoir une "class" pour un élément H1 qui est sensé être unique, c'est paradoxal
     
  9. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 257
    J'aime reçus:
    1
    ah ok j'avais mal lu la question, je pensai qu'il demandait si le choix "format h1" était bien un h1
     
  10. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 368
    J'aime reçus:
    2
    Euh....

    Pour formatter un h1, on fait un css

    h1 {blablblab}
    Le h1 s'affichera partout de la même façon dans le site

    Pour formatter un h1 avec une classe spéciale par exemple decor

    on fait
    .decor h1 {blablba}
    et certainement pas decor-h1 qui n'est plus vu comme un h1

    Tu peux surtout réfléchir à l'endroit où va se trouver ton h1, et le formatter différement selon l'endroit
    Ainsi si tu l'inclus dans un div avec une id spéciale, tu peux créer
    #idmachin h1

    etc...
     
  11. tonguide
    tonguide WRInaute passionné
    Inscrit:
    28 Novembre 2003
    Messages:
    1 169
    J'aime reçus:
    0
    Je crois que tu as pas tout suivis :)

    et ça c'est faux :)

    Si il fait <h1 class="decor-h1"></h1> comme il l'explique, ça sera toujours pris comme un H1

    et .decor h1
    ça marche si c'est <div class="decor"><h1></h1></div>

    Ce qui est plus le même code.
     
  12. Lio7
    Lio7 WRInaute discret
    Inscrit:
    10 Avril 2007
    Messages:
    163
    J'aime reçus:
    0
    Roh le pauvre gars ! Tout ceci va l'embrouiller ^^

    En résumé :

    1 - Tous les titres H1 de ton site sont les mêmes ?

    Tu peux définir les propriétés de tous tes titres h1 ainsi :

    Code:
    h1 {
    font-family : serif;
    font-size : 1.4em;
    etc ...  }
    2 - Tu as des titre H1 en rouge dans tes news et en vert dans ton wiki ? Alors ta méthode convient :

    Code:
    En CSS :
    
    .titre-news {
    color: red; }
    
    .titres-wiki {
    color: green; }
    
    En XHTML :
    
    Dans les news : <h1 class="titre-news">Mon titre de news</h1>
    Dans le wiki    : <h1 class="titre-wiki">Mon titre de wiki</h1>


    Bonne chance :p
     
  13. gti
    gti WRInaute discret
    Inscrit:
    8 Septembre 2003
    Messages:
    207
    J'aime reçus:
    0
    En effet mes H1, H2...etc sont les mêmes partout, et mes CSS sont stockés sur des fichiers séparés donc ???
     
  14. Lio7
    Lio7 WRInaute discret
    Inscrit:
    10 Avril 2007
    Messages:
    163
    J'aime reçus:
    0
    Tu as des feuilles de styles différentes pour chaque page ?
     
  15. gti
    gti WRInaute discret
    Inscrit:
    8 Septembre 2003
    Messages:
    207
    J'aime reçus:
    0
    en fait j'ai autant de feuille de style qu'il y a de style.

    Vous aurez remarquez que je suis vraiment nul coté code
    et quand j'ai créer mon site j'ai cru bon de faire comme ça.

    J'ai donc un répertoire avec les 10 fichiers *.css que "j'appelle" sur chaque page.

    Je me doute que ce n'est pas l'idéal, mais ne sachant pas faire autrement...

    a bon entendeur

    [​IMG]
     
  16. Lio7
    Lio7 WRInaute discret
    Inscrit:
    10 Avril 2007
    Messages:
    163
    J'aime reçus:
    0
    Je suis allé voir les CSS du site dans ton profil, et en effet, tu gères très mal tes styles.

    En fait, tu te compliques la vie.

    Toutes ces propriétés, tu dois les regrouper dans un seul fichier que tu appelles "styles.css" par exemple.

    À l'intérieur, tu insères tes propriétés au fur et à mesure, tout en gardant un ordre logique : d'abord les propriétés de la page, puis du menu, puis du texte ... etc

    Exemple avec un de mes CSS : http://www.danielsimon.fr/pictures.css

    Ensuite tu insère cette feuille de style dans le <head> de tes pages (x)HTML :

    <link rel="stylesheet" type="text/css" href="styles.css" />


    Tout est synthétisé dans un seul fichier bien organisé !
     
  17. gti
    gti WRInaute discret
    Inscrit:
    8 Septembre 2003
    Messages:
    207
    J'aime reçus:
    0
    Merci pour ces conseils Ravn (et les autres) je suis en train d'épurer mon code avec ta solution,
    qui en plus à le mérite de me faire mettre la main dans le "cambouis" et de code un peu.

    Pour revenir au code, j'ai crée un style h1 pour styliser mon format H1 :

    Code:
    .h1 {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 18px;
    	font-weight: bold;
    	color: #000000;
    	text-decoration: none;
    }
    Questions :

    * Puis je le nommer/renommer le style .hotel par exemple ?

    * Puis je l'appliquer à tous mes titres H1, sans influencer le référencement ? Autrement dit, le fait de d'appliquer un style à un format peu il changer qq chose ?

    * le nom même du style .hotel par exemple - peu t il aussi influencer le référencement ?

    * La différence de taille entre le titre H1, H2...etc une fois stylisés est t elle importante ? H1 > H2

    * Pourquoi Dream averti avant de créer un style nomé H1 - Qu'appelle t ils classe chez Adobe ? (Balise HTML = format et classe = style c'est ça ?)

    [​IMG]

    la suite au prochain épisode
     
  18. Pandore
    Pandore WRInaute passionné
    Inscrit:
    14 Octobre 2005
    Messages:
    1 119
    J'aime reçus:
    0
    Pour te répondre rapidement :

    1) oui

    2) non. Dans ce cas précis, c'est une mise en forme du texte de la balise titre, c'est tout.

    3) non.

    4) Tu n'as pas bien saisis les bases on dirait.

    :arrow: Une balise permet de faire une action. Exemple, la balise "h1" permet de faire un titre de niveau1.

    :arrow: Une class permet de mettre en forme les éléments d'une page web. Exemple, font-family: Verdana, Arial, Helvetica, sans-serif; permet de définir la police à afficher pour le texte.

    Il vaut mieux éviter de choisir pour les noms de class des noms de balises existantes. D'où le message d'avertissement de ton soft.

    :wink:
     
  19. Lio7
    Lio7 WRInaute discret
    Inscrit:
    10 Avril 2007
    Messages:
    163
    J'aime reçus:
    0
    Aïe Aïe Aïe, je dois mal m'y prendre car c'est pourtant très simple.
    Merci pour ta présentation claire des questions, on va pouvoir détailler ça de façon propre ;)

    Déjà il faut une mise au point sur le voc : :

    Balise : élément HTML avec lequel tu codes : <body>, <title>,<h1> et <a> sont des balises.
    Style : règle en CSS que tu rentres dans ta feuille de style entre deux accolades { }

    Si j'ai bien compris, dans ton code, tu as des titres encadrés par des balises <h1>, ce qui est très bien pour le référencement. Tu as donc ce code sur toutes tes pages :

    <h1>Le titre de ma page</h1>

    Si toutes tes titres <h1> sont les mêmes, alors la logique, veut que tu règle les propriétés standards des tes titres <h1>.

    Code:
    h1 {   /* Je n'ai pas mis de point devant h1 !! */
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 18px;
       font-weight: bold;
       color: #000000;
       text-decoration: none;
    }
    De même que si tout des paragraphes sont en rouge :

    Code:
    p {color: red; }
    Ça ce sont les règles générales pour chaque type de balise. Tu me suis ?

    Maintenant les class et les id, imagine qu'un paragraphe soit particulier et qu'il doivent être vert. On utilise une class dans le code HTML pour le signaler :

    Code:
    <p class="couleur-verte">bla bla bla bla</p>
    Et ont insère un style pour ce class dans le CSS :

    Code:
    .couleur-verte {color: green;}
    Tu peux ensuite réutiliser cette classe pour rendre un lien vert par exemple !
    As-tu remarqué que j'ai choisi un nom "intelligent" pour ce class ? Il est bon de nommer les class en fonction de ce qu'ils font !

    D'où l'avertissement d'Adobe, tu crée un attribut class est nommé .h1 c'est très ambigu vu que ça rapelle la balise <h1> !

    Il vaut mieux l'appeller .hotel si ça te chante (mais ce n'est pas un bon nom quane même :p)


    Pour finir, sache que tu ce qui concerne le code pur : balises, class, commentaire n'influe pas sur le référencement : les robots s'intéressent surtout à ce qui est dans les balises : le texte, les images ...
     
  20. Lio7
    Lio7 WRInaute discret
    Inscrit:
    10 Avril 2007
    Messages:
    163
    J'aime reçus:
    0
    Aïe Aïe Aïe, je dois mal m'y prendre car c'est pourtant très simple.
    Merci pour ta présentation claire des questions, on va pouvoir détailler ça de façon propre ;)

    Déjà il faut une mise au point sur le voc : :

    Balise : élément HTML avec lequel tu codes : <body>, <title>,<h1> et <a> sont des balises.
    Style : règle en CSS que tu rentres dans ta feuille de style entre deux accolades { }

    Si j'ai bien compris, dans ton code, tu as des titres encadrés par des balises <h1>, ce qui est très bien pour le référencement. Tu as donc ce code sur toutes tes pages :

    Code:
    <h1>Le titre de ma page</h1>
    Si toutes tes titres <h1> sont les mêmes, alors la logique, veut que tu définissent les caractéristiques de ces titres une bonne fois pour toutes :

    Code:
    h1 {   /* Je n'ai pas mis de point devant h1 !! */
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 18px;
       font-weight: bold;
       color: #000000;
       text-decoration: none;
    }
    De même que si tous tes paragraphes sont en rouge :

    Code:
    p {color: red; }
    Ça ce sont les règles générales pour chaque type de balise. Tu me suis ?

    Maintenant les class et les id. Imagine qu'un paragraphe soit particulier et qu'il doive être vert. On utilise une class dans le code HTML pour le signaler :

    Code:
    <p class="couleur-verte">bla bla bla bla</p>
    Et ont insère un style pour ce class dans le CSS :

    Code:
    .couleur-verte {color: green;}
    Tu peux ensuite réutiliser cette classe pour rendre un lien vert par exemple !
    As-tu remarqué que j'ai choisi un nom "intelligent" pour ce class ? Il est bon de nommer les class en fonction de ce qu'ils font !

    D'où l'avertissement d'Adobe, vu que tu crée un attribut class nommé .h1 ! C'est très ambigu car ça rappelle la balise <h1> !

    Il vaut mieux l'appeller .hotel si ça te chante (mais ce n'est pas un bon nom quane même :p)


    Pour finir, sache que tu ce qui concerne le code pur : balises, class, commentaires ... n'influe pas sur le référencement, car les robots s'intéressent surtout à ce qui est dans les balises (le texte, les images ...).


    PS : Un peu de lecture ! ;)
     
  21. gti
    gti WRInaute discret
    Inscrit:
    8 Septembre 2003
    Messages:
    207
    J'aime reçus:
    0
    Les nuages se dissipent peu à peu et je commence à y voir + clair grace à tes - vos - explications.

    Tu me dira, il serai temps !! [​IMG]

    J'ai réussi à intégré et rangé mes CSS au sein d'un seul et même fichier nommé style.css comme tu me l'a suggéré.

    Encore une petite :

    Puis je attribuer un lien à un texte qui à un H1 par exemple ?
     
  22. Lio7
    Lio7 WRInaute discret
    Inscrit:
    10 Avril 2007
    Messages:
    163
    J'aime reçus:
    0
    Tu veux dire inclure un lien dans un titre <h1> ?

    Comme ça ? : <h1><a href="#">Mon lien</a></h1>


    Tu joues avec le feu ...
    Ne crois-pas que c'est la balise <h1> en elle même qui est importante, sinon tu vas vite rejoindre le côté obscur de la force.

    L'important est de structurer son code avec des balises Hx. Google y verra un point positif (donc quelques places de plus ;)). N'oublie pas :

    Code:
    <h1>Titre principal</h1>
    
       <h2>Sous-titre 1</h2>
    
       <h2>Sous-titre 2</h2>
    
             <h3>Rubrique</h3>

    Il semble que tu débutes, alors autant éviter d'entrée les erreurs de jeunesse :

    Oublie :
    - le bourrage de mots-clés dans la page,
    - les liens dans les balises <h1>
    - le "PR 4 ever"
    - Les inscriptions à la pelle dans les annuaires.

    L'avenir du référencement c'est :
    - un code propre et valide (les balises <Hx> ;))
    - un vrai contenu
    - des titres et des URL optimisés
    - des liens en dur sémantiques
    - etc ....

    Voilà un petit sommaire qui devrait t'éclairer, mais n'oublie pas que Tout commence ici !

    Je pars pour le WE, alors bonne chance avec ton code ;)
     
  23. Pandore
    Pandore WRInaute passionné
    Inscrit:
    14 Octobre 2005
    Messages:
    1 119
    J'aime reçus:
    0
    ça se discute. Ce n'est pas interdit de le faire.

    Après faut voir l'utilité de la manœuvre. Perso, je ne le fais uniquement que pour la page du plan de site. Cela permet d'accéder directement à la page en cliquant sur le nom qui est dans le titre. Pour le reste, pour moi, cela n'a strictement aucune utilité. :wink:
     
Chargement...
Similar Threads - place balise Forum Date
Comment placer une balise no follow sur l'ensemble des liens externes Débuter en référencement 11 Avril 2015
Comment placer des balises Hn sur un site de vente en ligne Débuter en référencement 27 Juin 2011
Place de la balise HEAD Développement d'un site Web ou d'une appli mobile 12 Juin 2010
Emplacement Balises< Meta name="robots" content="" /> Débuter en référencement 20 Octobre 2009
SEO : les pages en français sortent à la place des pages en anglais Référencement international (langues, pays) Lundi à 17:43
WordPress Site mis en place. Sujet lancé sur ce forum début d'année... Demandes d'avis et de conseils sur vos sites 30 Mai 2020
Déplacer le contenu d'une page puis la supprimer Problèmes de référencement spécifiques à vos sites 24 Avril 2020
Déplacer un bloc adsense d'un endroit à un autre quand on passe du PC au Mobile AdSense 4 Avril 2020
Comment se placer sur des requêtes inhabituelles dû au confinement Rédaction web et référencement 25 Mars 2020
AMP stories : quelle stratégie SEO mettre en place ? Référencement Google 12 Mars 2020
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice