Google & Référencement

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="https://4design.xyz/">
        <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 🙂

Publié le par Bruno Bichet