Balises HTML, structure, sémantique et SEO

[HawkEye]

...Pourquoi, comment respecter la sémantique des balises et structurer votre page correctement ?...

Un article sympa à lire sur HiSEO, et qui peut s'avérer très utile à certains.

 

[u73256]

Tu m'as bien eu Hawk ! :lol:

 

[5_legs]

Merci Hawk de nous faire partager ce lien.

En ce qui me concerne il est en plein dans ma tasse de thé du moment (enfin si tant est que ma Dame ne casse pas toute la vaisselle)

Me voilà bien fourni en lecture désormais.

A moi les aspirines !

 

[elcantar]

Merci pour ce lien,

Article intéressant ! -> +1 reco

 

[Musimo]

Félicitations pour ton blog Hiseo

NB: J'apprécie le mémento du référencement!

 

[u73256]

Merci Musimo

 

[tonguide]

Très intéressant, surtout les exemples qui sont plutôt bien réussi et explicite.

Par contre, entre <i> et <em> au dernière nouvelle, je pensais que ça ne changé pas grand chose, et pareil pour <b> et <strong> (ça a peut-etre changé depuis, je lis plus bcp d'actu ref.)

 

[u73256]

Par contre, entre <i> et <em> au dernière nouvelle, je pensais que ça ne changé pas grand chose, et pareil pour <b> et <strong> (ça a peut-etre changé depuis, je lis plus bcp d'actu ref.)

c'est ce quelqu'un d'autre m'a fait remarquer aussi en mettant en garde même sur le fait de « masquer » l'aspect visuel de ces balises (em et strong) pouvait constituer un risque : le moteur considérant qu'on cherche à le tromper.
Le problème c'est que ni lui ni moi n'avons trouvé (pour ce qui concerne Google) d'informations précises sur ce point.

 

[tonguide]

ok, parce que sinon, sémantiquement, c'est vrai que ton article est bon, mais est-ce que google l'entend de la même façon, c'est pas une certitude.

Il faudrait faire des tests, mais ça doit pas être simple à prouver par A+B

 

[Marie-Aude]

c'est ce quelqu'un d'autre m'a fait remarquer aussi en mettant en garde même sur le fait de « masquer » l'aspect visuel de ces balises (em et strong) pouvait constituer un risque : le moteur considérant qu'on cherche à le tromper.
Le problème c'est que ni lui ni moi n'avons trouvé (pour ce qui concerne Google) d'informations précises sur ce point.

Je ne crois pas que ce soit un danger de "masquer" l'aspect visuel, étant donné que cet aspect visuel est, comme tous les autres, une pratique par défaut dans les feuilles de style des moteurs.
Masquer "tout" aspect visuel (y compris pas une partie purement graphique, comme une image, pourrait effectivement être un abus, mais :
1- amha l'interprétation des css n'est pas encore poussée à ce point là
2- il faut de toutes façons une vérif manuelle : ce n'est pas parce qu'un strong n'est pas en gras qu'il n'est pas mis en évidence.

 

[u73256]

@ tonguide
s'il y a risque il est tout de façon mesuré tant qu'il n'y a pas d'abus d'occurrences de mots clés.
Il ne s'agit pas de web-spammer les moteurs mais de leur parler du sujet de l'article tout en ayant un aspect visuel qui « parle » au lecteur

@ marie-aude
je crois que Google devenant un peu parano avec les abus qu'il a pu détecter interprète tant le code que la CSS de manière très fine maintenant.

 

[Marie-Aude]

Je suis allée voir ton exemple en détail, et je t'ai répondu sur ton blog.

Je crois que ce que tu montres n'est pas un marquage sémantique c'est juste remplacer <b> par .gras, mais basiquement c'est toujours la même chose, un marquage uniquement pour l'apparence.

Baaaaaaaaaaaad

 

[u73256]

ah ! crotte de crotte !
Marie-Aude, le commentaire que tu as déposé sur le blog (je t'en remercie d'ailleurs) a été rendu incompréhensible car les balises ont été interprétées.
(mémo pour moi-même : faudra tu te penches sur ça d'ailleurs, gars)

1 000 excuses donc.

Pourrais-tu le reposter dans le sujet pour qu'on puisse en débattre ici ?
Voici ce que j'ai pu récupérer :

Pour poursuivre la discussion du forum, je pense que la balise doit correspondre à quelque chose de visuel, mais pas obligatoirement du caractère gras.

En revanche, je ne vois pas l'intérêt de remplacer le par .gras. En faire une classe ne change pas le "problème de fond" qui est d'avoir un marquage purement de style, et pas de contenu.
La classe .gras n'a aucune sémantique

On peut dans ton exemple utilement remplacer le par la balise qui est aussi par défaut en italique le plus souvent, et qui est beaucoup plus proche sémantiquement parlant de ton contenu.


la sémantique c'est mon
truc
est inutilement compliqué :

la sémantique c'est mon
truc t'évite deux balises. A priori, le fait de répéter côte à côte les même balises prouve une mauvaise imbrication

Enfin quand je triture les balises, je me pose toujours la question "est ce que le rendu par un navigateur sans css sera équivalent à celui de ma page stylée ?" et ici ce n'est pas le cas. Un navigateur parlant fera l'emphase sur les mots en "strong" et pas sur ceux en .gras

Avec mes remerciements, je te prie d'agréer l'expression de mon sentiment le plus... le plus...
(voix Off :
- le plus quoi ?
- euh...
- et c'est qui cette Marie-Aude d'abord ?
- Mais Chérie...)

Bon je dois vous laisser Marie-Aude : j'ai un problème « sémantique » avec mon épouse... :wink:

ÉDITÉ :
Raison de l'édition : la balise Alt de prétendait que Marie-Aude était un Smiley :

je suis un smiley

 

[Marie-Aude]

Bon allons y

Pour poursuivre la discussion du forum, je pense que la balise doit correspondre à quelque chose de visuel, mais pas obligatoirement du caractère gras.

En revanche, je ne vois pas l'intérêt de remplacer le par <strong> par une classe .gras. En faire une classe ne change pas le "problème de fond" qui est d'avoir un marquage purement de style, et pas de contenu.
La classe .gras n'a aucune sémantique

On peut dans ton exemple utilement remplacer le <em> par la balise <cite> qui est aussi par défaut en italique le plus souvent, et qui est beaucoup plus proche sémantiquement parlant de ton contenu.

<p>Eh oui, <strong><span class="gras"> la sémantique</span> </strong> <span class="gras">c'est mon 
truc</span>.</p>

est inutilement compliqué :

<p>Eh oui, <span class="gras"><strong> la sémantique</strong>c'est mon truc</span>.</p>

A priori, le fait de répéter côte à côte les même balises prouve une mauvaise imbrication C'est d'ailleurs pourquoi je n'aime pas les éditeurs visuels, de type TinyMCE qui ont souvent la balisite aigüe.

Enfin quand je triture les balises, je me pose toujours la question "est ce que le rendu par un navigateur sans css sera équivalent à celui de ma page stylée ?" et ici ce n'est pas le cas. Un navigateur parlant fera l'emphase sur les mots en "strong" et pas sur ceux en .gras

Pour la peine je vais compléter maintenant

Je pense surtout que toute cetet gymnastique est inutile.
Dans ce cas, mettre la phrase qui doit apparaître en gras entièrement dans les balises strong n'est pas négatif. Cela correspond à une réalité (tu veux souligner cela) et l'ensemble des mots mis en évidence participe au contenu sémantique.

Contenu sémantique riche -> un peu plus que "juste les mots clés" -> meilleur référencement

 

[u73256]

Bon allons y
En revanche, je ne vois pas l'intérêt de remplacer le par <strong> par une classe .gras. En faire une classe ne change pas le "problème de fond" qui est d'avoir un marquage purement de style, et pas de contenu.
La classe .gras n'a aucune sémantique

Bien sûr. Mais ce n'est pas ce je dis. C'est de remplacer <b> par <span class="gras">

On peut dans ton exemple utilement remplacer le <em> par la balise <cite> qui est aussi par défaut en italique le plus souvent, et qui est beaucoup plus proche sémantiquement parlant de ton contenu.

Là tu vas faire hurler le W3c
La balise <cite> a une grande valeur sémantique dans la mesure où elle désigne une source dans une citation :

<blockquote cite="http://www.monsite.fr/citation.htm">
<p>
<cite title="Author">Lui.</cite>
<cite title="Title" lang="fr">
<q>
<a href="http://www.monsite.fr/citation.htm" hreflang="fr">
La sémantique c'est mon truc</a></q></cite>.
<cite title="Le site de MonSite" lang="fr">Mon Site</cite>.
<cite title="Date">Juin 2008</cite></p>
<p><q lang="fr">
C'est la sémantique-tique du rédacteur (a chanter sur l'air du « La Tagadac-tac-tique du Gendarme » par Bourvil)</q></p>
</blockquote>

<p>Eh oui, <strong><span class="gras"> la sémantique</span> </strong> <span class="gras">c'est mon 
truc</span>.</p>

est inutilement compliqué :

<p>Eh oui, <span class="gras"><strong> la sémantique</strong>c'est mon truc</span>.</p>

A priori, le fait de répéter côte à côte les même balises prouve une mauvaise imbrication

Certes. L'exemple est poussé au bout de la logique qui atteint ses limites : celles de l'imbrication. Tant de code pour si peu de mots.
C'est du raffinement comme je l'écrivais et cela pour suivre la recommandation du W3C sur l'emphase :

Text markup : Emphasis - in HTML Techniques for Web Content Accessibility Guidelines 1.0 - W3C novembre 2000 : -http://www.w3.org/TR/WCAG10-HTML-TECHS/#text-emphasis

 

[WebRankInfo]

j'ai pas lu tous les détails ici et sur le blog en question, mais j'ai fait des tests sur plusieurs centaines de requêtes et ~10.000 pages analysées
conclusion : Google attribue un poids sans doute très proche aux balises B et STRONG (d'ailleurs des ingénieurs l'ont déjà dit, faudrait que je retrouve le post)

 

[Marie-Aude]

Bien sûr. Mais ce n'est pas ce je dis. C'est de remplacer <b> par <span class="gras">

Certes, mais dans ce cas tu utilises à continuer d'utiliser quelque chose de déprécié, en le dissimulant derrière une autre syntaxe. Autant utiliser directement le <b> dans ces cas là

La balise <cite> a une grande valeur sémantique dans la mesure où elle désigne une source dans une citation :

Je fais référence à ce passage

« Homo textus » utilise la balise [em] pour le passage en italique car c'est une convention que de mettre en italique un terme d'une autre langue.
Or, cette balise est une balise d'indication pour dire au moteur que c'est un mot important. Comment lui dire ne pas le relever ?

 

[j-mi]

<b> et <strong> sont 2 balises bien différentes pourtant

moi aussi j'ai une préférence pour le <b>
de souvenir je crois que un <strong> est inutile sur certains explorateurs quand on l'intégre a une class

<span class="texte1">Bonjour <strong> les </stong> <b>amis</b></span>
et si mes souvenirs sont bons on a des difficultés a intégrer une balise genre <i>dans du <strong>

encore dans mes archives qui sont dans mon pti cerveau ;
<STRONG> est apparu le premier, mais n'était pas rendu de la même manière suivant les navigateurs : certains affichaient des caractères gras, d'autres des caractères soulignés...

 

[Marie-Aude]

Le <b> est une balise de présentation donc dépréciée, qui veut dire "mettre en gras"
Le <strong> est une balise sémantique, généralement rendue par du gras, qui veut dire "important"

<strong> n'a pas à être utilisé pour la présentation et donc même si on redéfinit la présentation de cette balise par le css elle ne recoupe pas une classe qui serait mis en gras par la propriété css font-weight

strong étant une balise, elle ne peut pas être intégrée dans une classe, qui est un marqueur css. En revanche, on peut intégrer la balise strong dans une balise autre (div, p, etc...) faisant appel à une classe.
Si cette classe est présentée en gras avec font-weight, visuellement, <strong> ne se différenciera pas. En revanche, sémantiquement, oui.

<i> étant une balise de présentation on peut la mettre à l'intérieur de <strong>. En revanche ça doit être un peu bizarre de mettre <em> à l'intérieur de <strong>

Quoique... possible.

Amha la confusion généralisée vient des éditeurs de texte qui mettent du <strong> quand on clique sur le bouton "gras"

 

[tonguide]

Sachant le peu de webmaster se souciant -à mon avis- de ce genre de détail, vous pensez réellement que Google va objectivement pouvoir se dire, là il a mis <b> c'est pas plus important, mais là, il a mis <strong> donc c'est important.

Même si sémantiquement c'est surement vrai, pour le référencement pure, je doute que ça change quoique ce soit. Ceci étant, comme un site est fait -théoriquement- sur du long terme, il est préférable d'appliquer ces règles au mieux, sait-on jamais qu'un jour ça ait une importance.

 

[Lio7]

Sachant le peu de webmaster se souciant -à mon avis- de ce genre de détail, vous pensez réellement que Google va objectivement pouvoir se dire, là il a mis <b> c'est pas plus important, mais là, il a mis <strong> donc c'est important.

Tu sais, Google ne fait pas grand chose en fonction des webmasters. C'est surtout les webmasters qui observent comment Google agit, et construisent leur site en fonction

 

[Marie-Aude]

Sachant le peu de webmaster se souciant -à mon avis- de ce genre de détail,

C'est parfois ça qui fait la différence entre quelques places, entre la première et la deuxième page, ce genre de détails...

vous pensez réellement que Google va objectivement pouvoir se dire, là il a mis <b> c'est pas plus important, mais là, il a mis <strong> donc c'est important.

Google cherche à analyser les pages en fonction de la sémantique... donc de <i>certaines balises plus que d'autres</i>
Google est même capable d'aller vérifier des sites manuellement, pour voir si ils trichent ou pas

 

[u73256]

Discussion passionnante. Et tout cas elle me passionne.
J'apprécie les interventions de chacun (Mr WRI, si vous retrouvez la note des ingés, ça pourrait être intéressant de porter cette pièce au débat) et la remarque de tonguide qui est le fond du problème du référencement naturel :

Sachant le peu de webmaster se souciant -à mon avis- de ce genre de détail, vous pensez réellement que Google va objectivement pouvoir se dire, là il a mis <b> c'est pas plus important, mais là, il a mis <strong> donc c'est important.

et sa conclusion :

Ceci étant, comme un site est fait -théoriquement- sur du long terme, il est préférable d'appliquer ces règles au mieux, sait-on jamais qu'un jour ça ait une importance.

Ces règles sont tout simplement celles du W3c. Dans la perspective (à moyen terme) d'HTML 5 elles devraient vraiment être pris en compte dès maintenant :

Quand j'ai travaillé à préparation de l'article je me suis posé la question du long-terme. Et bien sûr, c'est dans la perspective d'HTML 5 que l'enjeu se situe.
Quand j'ai lu :

The b element now represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is emboldened.

in -http://www.w3.org/TR/2008/WD-html5-diff-20080122/#new-elements

j'ai immédiatement pensé qu'il serait pertinent de "coder" dans le sens de l'avenir.

 

[gwaradenn]

Les balises b et strong sont actuellement identiques.

Mais il est vrai qu'il vaut mieux prévoir l'avenir pour pas avoir à refaire tout ses sites. Anticiper les innovations sans se tromper, c'est ça le défi.