8 composés HTML pour le logo et la « baseline » et leur potentiel SEO

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

8 composés HTML pour le logo et la « baseline » et leur potentiel SEO

Mon petit manifeste concernant la création des balises logo et motto dans les spécifications HTML5 n’a pas encore eu l’effet escompté. En attendant que le W3C valide cette modeste proposition, les enveloppeurs Web font preuve d’imagination. Voici un florilège de composés HTML (HTML Compound) plus ou moins sémantiques pour baliser l’identité d’un site internet. Cerise sur le SEO, j’ai demandé à Didier Sampaolo de nous dire ce qu’il pense — ou ce que Google pense — des différentes solutions présentées. @dsampaolo est éditeur du site Brave New World et consultant e-business spécialisé en référencement naturel.

Ces marquages HTML trouvés sur le Web (pour la plupart) seront brièvement commentés par mes soins, puis par l’expert SEO. J’ai évoqué la CSS pour le premier exemple seulement pour alléger l’article. Grosso modo, dans ce contexte, les CSS sont souvent utilisées pour afficher une image en background d’une balise et «évacuer» le texte avec display: none, text-indent: -99999em ou position: absolute, en ajoutant éventuellement une balise span, comme dans h1 span { position: absolute; top: -9999px; }.

1. Logo texte dans «h1»

<div id="top">
    <h1>
        <a href="/">ici &amp; ailleurs</a>
    </h1>
</div>
C’est simple et efficace. Pour info, le logo apparait sous la forme d’une image placée dans le background de #top :
background: transparent url(top_bg.png) no-repeat 0px 3px;
Quant à l’ancre du lien, elle est masquée par la déclaration CSS suivante :
#top h1 {
    font-size: 0px;
    text-indent: -5000px;
}
Source : http://neokraft.net

L’avis de l’expert SEO — Le texte est positionné « hors de l’écran » via CSS, et donc caché pour le visiteur. Je ne pense pas qu’un site ait déjà été pénalisé pour cette seule raison (cela semblerait un peu abusif), mais Google demande aux webmasters d’éviter ce genre de techniques, qui pourraient donner l’impression que leur site est « peu fiable » (source Google). Note : j’aurais plutôt utilisé un lien absolu reprenant l’URL complète de la homepage plutôt qu’un "/" qui signifie « vers la racine du site ».

2. Logo texte dans «h1» et Motto dans «p»

Un marquage HTML similaire avec une tagline à la clé :

<div id='logo'>
    <h1><a href="http://t37.net/">Ergonomie Web, Expérience Utilisateur et Ruby On Rails</a></h1>
    <p>Blog professionnel de Frédéric de Villamil sur les métiers du web</p>
</div>
Source : http://t37.net

Ces deux premiers exemples sont probablement la forme la plus courante en raison de leur simplicité et d’une certaine logique. La marque répétée sur l’ensemble des pages du site se voit attribuer une balise d’en-tête de premier niveau. Au temps de HTML 4 ou XHTML 1.0 on s’interrogeait sur le bien-fondé de cette utilisation d’une précieuse balise h1 que l’on réserve normalement aux titres des articles. Le débat est encore houleux entre les partisan de la balise h1 unique pour l’ensemble de la page et ceux qui voudrait en mettre partout. Avec HTML5, les intégrateurs peuvent utiliser au moins une balise h1 par section…

L’avis de l’expert SEO — Etant partisan de la balise h1 unique pour chaque page, je trouve dommage de l’utiliser pour un logo commun à toutes les pages du site. Cela ne permet pas de différencier sémantiquement les pages entre elles. Le p, ici, est neutre, et permet d’améliorer la densité des mots-clefs qu’il contient. Pour preuve, le blog ressort très bien sur Google quand on cherche le nom de son auteur.

Mise à jour (14/11/2010) : comme le fait remarquer Frédéric dans les commentaires, le fragment de code a été prélevé sur la page d’accueil. Sur http://t37.net, le marquage HTML pour la page affichant les articles présente une différence importante : la balise h1 est remplacée par une balise p.

<div id='logo'>
    <p id='title'><a href="http://t37.net">Ergonomie Web, Expérience Utilisateur et Ruby On Rails</a></p>
    <p>Frédéric de Villamil analyse l'écosystème Web en temps presque réel</p>
</div>

3. Logo image dans «div»

<div id="logo">
    <a title="Le blog de intégrateur HTML & CSS" href="http://css.4design.tl/">
        <img src="css-4-design.png" alt="css 4 design" />
    </a>
</div>
Source : css4design

Voici le marquage que j’utilise sur ce blog : pas de balise d’en-tête, l’image est purement décorative et permet d’identifier le site lors de l’impression de la page. Le premier élément h1 que l’on trouve dans la page est le titre des articles.

L’avis de l’expert SEO — Voilà qui me semble très bien. Les balises utilisées (div) sont sémantiquement neutres et permettent de réserver les éléments h1 pour des données contextuelles ciblées. L’utilisation combinée du title sur le lien et du alt sur l’image permet aux moteurs de savoir précisément de quoi parle la homepage du blog, et n’impacte pas la page en cours, qu’il reste possible d’optimiser finement.

4. Logo image et Motto dans «span» enveloppés dans «address»

<div="header">
    <address id="site_contact" class="vcard">
        <a class="url home bookmark" href="http://identi.ca/">
            <img class="logo photo" src="http://theme.status.net/0.9.5/identica/logo.png" alt="Identi.ca"/>
            <span class="fn org">Identi.ca</span>
        </a>
        <span class="poweredby">propulsé par <a href="http://status.net/">StatusNet</a></span>
    </address>
</div>
Probablement le balisage qui m’a le plus surpris dans cette quête. Le logo et le slogan sont considérés comme la carte de visite du site, via l’utilisation du microformat vcard. Lecture complémentaire : Proposition de balisage HTML sémantique du microformat hCard et http://dev.w3.org/html5/spec/Overview.html#the-address-element

Source : http://identi.ca

L’avis de l’expert SEO — Effectivement, ce balisage est un peu surprenant mais ne manque pas de sens. Google a annoncé sa volonté d’utiliser de plus en plus les microformats (dont hCard) qui permettent de structurer l’information. Identi.ca fait un pari à long terme sur la généralisation des traitements de ces formats, qui permettront, à terme, une mise en avant visuelle dans les pages de résultats de recherches sur les moteurs (qu’on appelle SERP’s, pour Search Engines Results Pages).

5. Logo image dans «h1» et logo texte dans «span»

<h1 class="logo">
    <a tabindex="2" accesskey="1" href="/">
        <img src="/logo.png" width="90" height="53" alt="W3C" />
    </a>
    <span class="alt-logo">W3C</span>
</h1>
Source : http://www.w3.org

L’avis de l’expert SEO — Là encore, l’utilisation d’une balise h1 commune à toutes les pages est à déplorer. A mon sens, cette balise peut (et donc doit) qualifier la page en cours, et non l’ensemble du site.

6. Logo image dans «h1» avec baseline évènementielle

<div id="title" class="vevent">
    <h1 class="span-5">
        <img class="summary" src="/img/paris-web.png" alt="Paris-Web" title="" width="178" height="36">
        <img class="print" src="/img/paris-web-print.png" alt="" title="" width="202" height="36" />
    </h1>
    <abbr class="dtstart" title="2010-10-14"><!-- --></abbr>
    <abbr class="dtend" title="2010-10-16"><!-- --></abbr>
    <p class="baseline">
        <img src="/img/du_14_au_16_octobre_2010.png" alt="Du 14 au 16 octobre 2010" title="" width="202" height="36" />
        <span class="hide">
            à <span class="location">Paris</span>.
        </span>
    </p>
    <hr class="hide">
</div>
Source : http://www.paris-web.fr/

Actualité oblige, voici le marquage choisi pour le site Paris Web. Un peu complexes au premier abord, les choix s’expliquent par la nature évènementielle du site, d’où l’image réservée à l’impression ou les dates de début et de fin.

L’avis de l’expert SEO — Comme Identi.ca, Paris Web fait le pari des microformats en utilisant hCalendar, qui semble adapté pour de l’évènementiel. La prise en charge des microformats par Google reste à ce jour aléatoire (au mieux), mais reste une piste très intéressante car sémantiquement très poussée, et normalisée.

7. Logo image dans «span»

<div id="tete">
    <span><img src="/style/ici-michel-fortin.png" alt="ici Michel Fortin" /></span>
    <ul>
        <li><strong>Journal</strong></li>
        <li><a href="/logiciels/">Logiciels</a></li>
        <li><a href="/services/">Services</a></li>
        <li><a href="/joindre/">Me joindre</a></li>
        <li class="alt"><a href="/weblog/" hreflang="en">English</a></li>
    </ul>
</div>
Ici l’auteur a mis l’accent sur le menu de navigation au lieu de mettre le logo en avant.

Source : http://michelf.com/journal

L’avis de l’expert SEO — L’utilisation de balises neutres (div, span, ul…) est une bonne chose (les h1 étant libres d’être utilisés pour le contenu de la page), mais la mise en avant du menu de navigation est un choix qu’il faut assumer. L’écueil vient plutôt des pages que l’on va placer dans le menu : ces pages seront linkées depuis toutes les pages du site, dès le début du code-source, et seront donc sur-pondérées aux yeux des moteurs. Il faut les choisir avec soin, et se limiter à quelques pages. Le lien vers la page Contact (qui n’a que très peu de valeur ajoutée en référencement) pourrait être caché (en utilisant du Javascript).

8. Logo texte et image dans «dt» et motto dans «dd»

<dl>
    <dt>Nom du site</dt>
    <dt><img src="" alt="logo du site"></dt>
    <dd>HTML5 & CSS3, vous le savez, c'est ma grande passion !</dd>
</dl>
En attendant que le W3C ne songe à créer les balises logo et motto, j’explore l’utilisation des listes de définition qui permettent en l’occurence d’indiquer un lien «sémantique» entre le slogan, le nom du site (version texte), son logo (version image) et la tagline. L’idée est de profiter de la possibilité d’utiliser un seul couple de dt et dd et plusieurs dt pour un ou plusieurs dd. On peut également envisager de remplacer la balise dl par dialog apparue avec HTML5 :
<dialog>
    <dt>Nom du site</dt>
    <dt><img src="" alt="logo du site"></dt>
    <dd>Pinailler, c'est mon dada !</dd>
</dialog>
Il s’agit avant tout d’une tentative de mettre en pratique les conseils de Didier Sampaolo en évitant d’utiliser les niveaux de titre hn  et les p réservés aux articles tout en mettant un peu de sémantique à la place de div et de span. L’idée est de personnifier le site et de lui faire dire son petit compliment avec la jolie voix de Betty grâce à une feuille de style @media aural :
@media aural {
    dialog {
        voice-family: betty, female;
    }
}
Source : N/A L’avis de l’expert SEO — Les balises dl, dt et dd sont faites pour contenir un terme et sa définition. L’usage proposé ici est presque un « détournement » des spécifications HTML mais il n’est pas dénué de sens : le logo et le motto (dans mon jargon, j’aurais dit « la baseline ») sont effectivement censés définir une marque (ici, le nom du site). Ce qui me chagrine un peu, c’est la répétition sur chaque page du site de la même définition. En tout cas, ce marquage a l’avantage d’être original, et ne semble pas dangereux (j’entends par là : « ce n’est pas contraire aux guidelines de Google »). Sans aller jusqu’à le conseiller spécialement, je ne pense pas non plus qu’il faille le déconseiller. Pour aller encore plus loin dans l’expérimentation, on pourrait utiliser l’attribut Title sur les dd pour introduire des variations d’une page à l’autre.

La conclusion de l’expert SEO

Lorsqu’on conçoit le code HTML d’un site, il faut garder à l’esprit qu’un moteur de recherche a besoin d’être guidé. Je recommande d’utiliser les balises h1 à h3 de manière à ce qu’en les lisant, on ait une sorte de « plan de la page » (rappelez-vous de vos cours : grand I, petit b, etc.) qui suffira à la résumer. De cette manière, les moteurs sauront d’emblée quel est (ou sont) le(s) thème(s) de la page, et par voie de conséquence, quand la présenter à l’internaute qui effectue une recherche. Pour les balisages communs à toutes les pages du site, je recommande l’utilisation d’éléments sémantiquement « neutres » (comme div et span).

La conclusion de l’intégrateur

La banalité et la récurrence de la présence du logo et du slogan aurait pu laisser supposer une relative homogénéïté des pratiques. Il n’en est rien :  on trouve un nombre important de combinaisons. Certaines sont sémantiques mais ne sont pas optimisées en terme de référencement ; d’autres ne paient pas de mine, mais permettent aux articles de transmettre plus de «jus» aux termes et aux expressions utilisées.

A part celui que j’utilise déjà, les deux derniers composés HTML ont ma préférence. Ils permettent de lier sémantiquement le nom du site avec sa baseline (ainsi que le logo) sans utiliser de balise hiérarchique h1 ou de balise de contenu p.

Par ailleurs — et même si on peut considérer l’absence de feuille de style comme une légende urbaine — j’aime assurer un maximum de lisibilité en dehors de toute mise en forme : le contenu doit être «tout terrain» même s’il ne sort que rarement accompagné sans CSS ou Javascript.

Merci à Didier Sampaolo d’avoir pris le temps de se pencher sur ces composés HTML et d’avoir donné un point de vue extérieur, ce qui donne à cet article un supplément d’âme :-)

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



35 commentaires pour “8 composés HTML pour le logo et la « baseline » et leur potentiel SEO”

  1. Cort-X- dit :

    Salutations,

    Merci pour cet article des plus intéressants.

    Le fait d’avoir l’avis d’un expert SEO ça n’a aussi pas de prix.

    J’en apprends toujours quand je viens ici : je ne regrette rien. Merci encore de nous faire partager ce savoir.

  2. […] This post was mentioned on Twitter by br1o les bons tuyaux, Développeur, Sébastien Courtès, Sylvain Richard, Uty and others. Uty said: RT @diije: RT @br1o: [Nouvel article] 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO http://j.mp/bGFGgF (@dsampao … […]

  3. Aybabtu dit :

    Note : j’aurais plutôt utilisé un lien absolu reprenant l’URL complète de la homepage plutôt qu’un « / » qui signifie « vers la racine du site ».

    Franchement, je ne crois pas que ça fasse une différence d’un point de vue SEO : les deux sont une convention. Le choix entre l’URL relative ou absolue est une question : – de goût – et dans certains cas, de portabilité

  4. Yuston dit :

    Salut,

    Que penses-tu de l’arrivée de HTML5? L’utilisation de la balise « requiert » (généralement) l’utilisation d’un titre (de type hn donc. Source: http://dev.w3.org/html5/spec/Overview.html#the-header-element). D’ailleurs dans les exemples, on ne voit que des titres de type h1.

    Donc il n’est pas insensé d’insérer un h1 pour le logo du site et de réutiliser encore h1 pour le titre de la page, selon les spécifications HTML5 de W3. Reste maintenant à voir côté SEO et comment les moteurs, notamment Google, vont interpréter la multiplication des h1.

    Est-ce que, malgré HTML5, tu maintiens qu’il est dommage de « gaspiller » le poids de la balise h1 pour un élément commun à chaque page d’un site?

    • Pat dit :

      Concernant le SEO, il est recommandé de ne mettre le moins de balises hX afin de maximiser le rendement de celles-ci.

      C’est un peu le même principe que l’offre et la demande. Si tu fournis beaucoup de hX sur une seule page, ils vaudront moins chers.

      Pour l’avoir vu avec des experts SEO, il est recommandé de n’utiliser qu’une balise H1, un maximum de balises deux balises H2 et ainsi de suite. Ceci étant une fois de plus pour maximiser l’utilisation des balises H1.

      Après quoi, personne n’a réellement la science infuse à ce sujet.

  5. Bruno Bichet dit :

    Cort-X- — Merci :)

    Aybabtu — Oui, c’est bien possible. Avant l’intervention de Didier, je ne m’étais jamais vraiment posé la question.

    Yuston — HTML5 est plus explicite que HTML4 sur l’utilisation de plusieurs balises h1. Mais il ne faut pas oublier que HTML5 est très orienté littérature et production de documents scientifiques (cf. http://css4design.com/html5-une-orientation-encore-trop-litteraire-et-pas-assez-web ) et pas vraiment pour le Web (la balise aside n’était pas prévue dès le départ pour servir éventuellement de barre latérale, par exemple, ce qui veut presque tout dire…).

    Bref, l’utilisation des sections imbriquées dans des articles (et vice-versa, mais je penche plutôt pour le vice ^^) avec le concept d’Outline est un peu en dehors des préoccupations quotidiennes de l’intégrateur lambda qui ne travaille ni pour Jurispédia ni pour le CNRS ;)

    Donc, j’aurais tendance à dire que si la page est de type site web ou blog avec de nombreux contenus « disparates » il vaut mieux réserver la balise h1 uniquement pour le titres des articles.

    S’il y a des brèves en sidebar, j’aurais tendance à les « chapoter » avec un h1 (« les brèves du SEO ») et mettre un h2 pour les titres des brèves. Mais on peut aussi utiliser un niveau h1 pour les titres si l’on a juste « Brèves » pour « chapoter » l’ensemble car on a pas toujours la possibilité de modifier les intitulés.

    En revanche, si la page est un document de type Mémoire ou Thèse, il est judicieux de structurer le tout avec un h1 pour le titre, et des h1 pour les titres de chaque section, le contenu des section dans différents article.

    C’est un peu confus, mais c’est ce qui me viens à l’idée pour l’instant ;)

  6. Alors, objection concernant mon site, seule la home a le titre dans le H1. Sur les pages intérieures, le nom du blog est dans un p, et le titre de la page (en l’occurrence du billet ou de la catégorie) se trouve dans le h1.

    Mes deux cents.

    • tetue dit :

      Oui, j’allais justement faire remarquer que cet article ne précise pas sur quelles pages ont été prélevés ces fragments de code. Parce qu’il est logique que le titre du site soit en h1 sur la page d’accueil, mais le soit pas dans les pages intérieures du site. Inversement pour le lien de retour à l’accueil : il est absurde de linker le logo de la home vers la home ;-)

  7. Un peu complexe au premier abord, l’utilisation de micro-formats est à mon avis nécessaire aujourd’hui pour se différencier encore un peu plus dans les résultats de Google : fils d’ariane, pages évènementielles, localisation géographique, carte de visite…

  8. Bruno Bichet dit :

    Frédéric de Villamil — Oui, très juste, je ne suis pas allé plus loin que la home, car c’était suffisant pour le propos de ce billet qui n’est pas de faire le procès de la balise h1 où qu’elle soit. Merci de le préciser néanmoins ;)

    tetue — Cet article précise bien sur quelles pages les fragments de code ont été prélevés (cf. Source: exemple) et comme le fait remarquer Frédéric pour son site (mais c’est valable pour tous les autres) il s’agit de la page d’accueil.

    Concernant le fait que l’utilisation de la balise h1 soit logique ou pas, c’est un autre sujet qui fait d’ailleurs l’objet de débat depuis longtemps. Pour ma part, je n’ai pas encore tranché et je teste plusieurs solutions.

    • tetue dit :

      Oui, oui, j’ai bien vu les liens, vers les sites. Dois-je comprendre que tu n’as prélevé que sur la page d’accueil de chacun ? Perso, pour traiter de ce sujet, j’aurais plutôt prélevé en pages intérieures, plus nombreuses, donc plus représentatives.

  9. Bruno Bichet dit :

    tetue — Je ne vois pas pourquoi ce sujet aurait nécessité de tenir compte des pages intérieures : je voulais un aperçu des marquages HTML que l’on pouvait trouver. C’est fait. Après, l’idéal aurait été de présenter plus de fragments en essayant de voir si on pouvait retrouver des schémas récurrents selon les différentes thématiques aborder par les sites. Un autre jour peut-être ;)

  10. tetue dit :

    Le marquage HTML de ce genre de chose est, pour bien faire, spécifique en page d’accueil et générique dans les pages intérieures.

    Les critiques de l’emploi du h1 ne sont donc pas adaptées, puisque l’expert SEO extrapole à l’ensemble du site à partir d’un cas particulier. Que devrait contenir l’unique h1 de la page d’accueil, si ce n’est le titre du site ???

  11. Bruno Bichet dit :

    tetue — « Le marquage HTML de ce genre de chose est, pour bien faire, spécifique en page d’accueil et générique dans les pages intérieures. »

    Si on met de côté le fait que le lien vers la page d’accueil n’est pas forcément utile en page d’accueil, dans 99% des cas, le marquage HTML est identique en page d’accueil et sur les pages intérieures.

    L’expert SEO n’extrapole rien : il a simplement tenu compte des marquages que j’ai soumis à son analyse. je lui ai envoyé les fragments avec les liens vers les pages d’accueil, il s’est basé dessus.

    Sinon, si on sort du cadre de cet article je trouve qu’avoir un marquage différent en page d’accueil et en page intérieures peut être très intéressant.

    A propos de la balise h1, je constate qu’un consensus se dégage pour le logo. Comme je le précise dans l’article, HTML5 nous autorise explicitement à mettre plusieurs h1 dans un même billet… Ce qui ne signifie pas pour autant que le logo mérite forcément d’être enveloppé dans un h1. Mon sentiment, c’est que HTML5 considère que l’élément h1 commence implicitement une nouvelle section. Une page Web est composé d’éléments récurrents que l’on retrouve sur l’ensemble des pages.

    Une section englobe un contenu unique par page et un article peut être considéré comme un élément indépendant, autonome d’une section. Partant de là, je considère que le logo — à supposer qu’il soit identique sur l’ensemble du site — ne devrait pas initier de section autonome. Ce qui rend une page unique, c’est son « title », pas son logo ou sa baseline, qui sont au contraire des éléments fédérateurs qui créent la notion même de site Web.

    C’est d’ailleurs pour ça que j’ai proposé la création des balises logo et motto dernièrement, ce qui n’était pas simplement une blague potache ^^

    • tetue dit :

      Peu importe les spécifications HTML (4 ou 5), l’expert SEO dit bien : Étant partisan de la balise h1 unique pour chaque page, je trouve dommage de l’utiliser pour un logo commun à toutes les pages du site, alors qu’il examine du code qui n’est pas nécessairement présent sur « toutes les pages du site », comme c’est le cas sur le site de Frédéric de Villamil, sur le mien, etc.

      Si on met de côté le fait que le lien vers la page d’accueil n’est pas forcément utile en page d’accueil, dans 99% des cas, le marquage HTML est identique en page d’accueil et sur les pages intérieures. Pas seulement : le balisage diffère dans sa sémantique, dont le h1 incriminé ; la baseline peut être + longue, le logo plus grand, etc. Il n’y a rien de plus spécifique que la page d’accueil !

  12. jiann dit :

    Je m’excuse, mais un hn est un titre structurant un texte. Un logo est un logo, et un slogan est un slogan. On ne met pas une vache dans une niche.

  13. Un H1 tout en haut de la page (et donc vers le logo ) aura t il plus de valeur que plus bas (en dessous du menu etc …)?

  14. PooLP dit :

    Personnellement, je suis resté sur une vielle réglé d’accessibilité :

    Le H1 doit être commun à tout le site (donc logo/baseline), H2 unique sur chaque page … faut que je me mette à jour ^^

  15. Mr Peer dit :

    @Jean Marc Fognini : Oui. D’une part pour la sémantique pur (un titre sous le contenu n’a pas de sens), et d’autre part parce que les robots de certains moteur de recherche ne parcourent toujours pas l’intégralité de la page.

    @PooLP : C’est un choix : doit ton privilégier la sémantique et l’accessibilité (donc l’humain) ou la SEO (càd le robot) ?

  16. GregLone dit :

    Merci Bruno pour ce très bon article (comme toujours) et à Didier Sampaolo pour son avis également très instructif. Ce tour d’horizon m’a donné envie de revoir certaines choses =)

  17. BeliG dit :

    3. Logo image dans «div» : Étrange remarque de l’expert SEO qui mentionne l’impact de l’attribut title sur le référencement, alors qu’il a été prouvé par plusieurs « expériences » que celui-ci n’a absolument aucun influence (une source et une autre, parmi tant d’autres). Ma remarque ne porte bien entendu que sur le référencement, il n’est pas question ici d’accessibilité où l’utilisation de title peut s’avérer parfaitement légitime.

    4. Logo image et Motto dans «span» enveloppés dans «address» : Sémantiquement parlant (en HTML4 ou en HTML5), la balise address permet d’identifier l’auteur de l’article ou du document, dans le but d’un éventuel contact (les docs insistent bien sur cette notion de « contact »). Cette balise est-elle donc adaptée pour marquer l’identité d’un site, et surtout est-ce la meilleure façon de le faire ? A mon avis non, dans les deux cas.

    2. Logo texte dans «h1» et Motto dans «p» : Pour ma part, je serais tenté d’imbriquer une balise cite dans le paragraphe pour marquer une baseline ou un slogan. Sûrement aucun impact sur le référencement, mais un balisage à mon sens plus cohérent.

    8. Logo texte et image dans «dt» et motto dans «dd» : dl à envisager comme une liste de description, pourquoi pas, mais la remplacer par dialog… Orly ??

  18. […] 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO (avec du @dsampaolo dedans) : via @br1o […]

  19. Gael dit :

    Il est pour ma part évident que la balise h1 & h2 sont encore d’actualité ! Avec ou sans HTML 5 Je favorise pour ma part des h1 avec du texte à la place d’un logo mais parfois on a pas le choix.. :) Bonne fin de week-end ! Gael

  20. Un article vraiment instructif, les avis des 2 experts donnent des résultats assez inattendus.

    L’intégrateur a des idées parfois saugrenues, il donne l’impression de rechercher la combinaison miracle alors que l’expert SEO est plus mesuré, plus logique et forcément plus fidèle à la philosophie Google.

    Et pour les apprentis sorciers, n’oubliez pas que le CSS ne doit par être utilisé dans le but de tromper les visiteurs ( text-indent: -99999em ), c’est répréhensible et Google n’aime pas ça donc il pénalise.

  21. Daniel Roch dit :

    J’approuve les dires de Didier Sampaolo : un site bien conçu pour les visiteurs et les moteurs de recherche doit être correct au niveau sémantique, et avoir un plan de page logique. Le h1 placé sur le titre du site est donc la seule solution logique : libre au développeur de le faire en version texte pure ou avec un logo et sa balise alt.

    Et pour les autres pages du site, je recommande par contre de déplacer ce h1 sur le titre de l’article. Le logo et sa baseline deviennent alors des éléments parfaitement neutres.

  22. […] être le premier niveau de la page d’accueil (ce n’est pas gravé dans le marbre, cf. 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO).  On pourra lui réserver la balise h1 avec un background pour l’image. On pourra masquer […]

  23. […] être le premier niveau de la page d’accueil (ce n’est pas gravé dans le marbre, cf. 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO).  On pourra lui réserver la balise h1 avec un background pour l’image. On pourra masquer […]

  24. diamants dit :

    Astuces techniques pour optimiser son code HTML pour le SEO sont malheureusement trop rares. Je lis des trucs auxquels j’aurai jamais pensé, bonne année !

    Les amateurs de diamants trouveront leur bonheur sur mon site : diamanterie.net

  25. […] Mon petit manifeste concernant la création des balises logo et motto dans les spécifications HTML5 n'a pas encore eu l'effet escompté.  […]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site