HTML5, outline, référencement et sémantique

Question

The_Moye

23 May 2014 à 16:55

Bonjour à tous,

Je me pose quelques questions concernant la meilleure façon de structurer le contenu des pages de mon site d'un point de vue sémantique, sans me pénaliser sur le référencement.
HTML 5 introduit de nouveaux éléments bien sympathiques (article, section, nav, aside...) censés ajouter une valeur sémantique non négligeable pour le référencement sur le papier, mais dans la pratique ça semble bien plus compliqué.

D'après (entre autre) le bouquin HTML 5 - Une référence pour le développeur web , le découpage d'une page en sections, articles etc... permet de structurer efficacement son contenu, en ajoutant une valeur sémantique par rapport à une structure HTML 4 à base de titre de différents niveaux (h1 à h6).
Toujours d'après ce livre et la documentation officielle chez http://www.w3.org , chaque nouvelle section démarrer une nouvelle hiérarchie propre a la section.

Un exemple rapide :


<body>
	<h1>Titre principal</h1>
	<section>
		<h1>Titre de la section 1</h1>
			<article>
				<h1>Titre article 1</h1>
			</article>
			<article>
				<h1>Titre article 2</h1>
			</article>
	</section>
	<section>
		<h1>Titre de la section 2</h1>
	</section>
</body>

Donnerait la structure de document suivante :

1 Titre principal
_1.1 Titre de la section 1
__1.1.1 Titre article 1
__1.1.2 Titre article 2
_1.2 Titre de la section 2

Dont l'équivalent en HTML 4 (si je dis pas le bêtise) serait obtenu comme suit :


<body>
	<h1>Titre principal</h1>
	<div>
		<h2>Titre de la section 1</h2>
		<div>
			<h3>Titre article 1</h3>
		</div>
		<div>
			<h3>Titre article 2</h3>
		</div>
	</div>
	<div>
		<h2>Titre de la section 2</h2>
	</div>
</body>

Mais d'après mes recherches, les moteurs de recherche ne prendraient pas en compte la structure HTML 5, allant jusqu'à pénaliser le référencement.
(cf : http://blog.paciellogroup.com/2013/10/html5-document-outline/ , https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document ).

D'où ma premières question :

Qui croire et que faire ?

Utiliser les balises HTML 5 et partir du principe que normalement, un h1 dans une nouvelle section ne va pas mettre la structure du document en l'air ?
Rester sur des balises plus anciennes (div) et utiliser les différents niveaux de titre pour structurer le contenu quitte à perdre en sémantique ?

Ou bien est-il possible (et correcte) de combiner les deux ? La documentation n'interdisant pas de commencer une section par un titre de plus bas niveau qu'un titre h1 :


<body>
	<h1>Titre principal</h1>
	<section>
		<h2>Titre de la section 1</h2>
			<article>
				<h3>Titre article 1</h3>
			</article>
			<article>
				<h3>Titre article 2</h3>
			</article>
	</section>
	<section>
		<h2>Titre de la section 2</h2>
	</section>
</body>

Ce code passé à la moulinette http://gsnedders.html5.org/outliner/ semble produire une structure de document correcte pour ce qui est du balisage HTML 5, tout en gardant le titrage pour du balisage HTML 4.

Le cas de la balise <nav>

Autre interrogation : la balise nav provoque la création d'une nouvelle section dans mon document. Admettons.
Mais je n'ai pas forcement envie d'ajouter un titre à mon menu. Sans balise <hn> entre les balises <nav></nav>, la structure de mon document contient une "Untitled Section". Est-ce embêtant ?
D'après la spécification, non ( http://www.w3.org/html/wg/drafts/html/master/sections.html#outlines ) mais pour un moteur de recherche ? Est-ce bien le cas ?

Toujours concernant la navigation et les menus : les différentes entrées d'un menu ont elles valeur à apparaitre dans la structure du document ?

Exemple :


<body>
	<h1>Ma page</h1>
	<nav>
		<h2>Menu</h2>
		<h3>Lien vers la page 2</h3>
		<h3>Lien vers la page 3</h3>
		<h3>Lien vers la page 4</h3>
	</nav>
</body>

Donnerait la structure suivante :

1 Ma page
_1.1 Menu
__1.1.1 Lien vers la page 2
__1.1.2 Lien vers la page 3
__1.1.3 Lien vers la page 4

Est-ce un non sens ?

Plusieurs balises nav dans la même page

Une autre question, cette fois ci a propos de l'utilisation de plusieurs balises <nav> dans la même page. Nav donne une précision sur les liens de navigations principaux d'une page, typiquement le menu principal. Mais est-ce que cela peut s'appliquer à deux sections dans une même page, spécialement quand les liens pointent le même endroit ?

Pour plus de clarté, je suis dans le cas suivant concernant la page d'accueil de mon site personnel :


<body>
	<header>
		<h1>Mon nom</h1>
		<p>Quelques infos sur ma petite personne (mini CV)</p>
		<nav>
			<a>Lien vers mon CV</a>
			<a>Lien vers la page de contact</a>
		</nav>
	</header>
	<nav id="navigation_principale">
		<a>Rubrique 1</a>
		<a>Rubrique 2</a>
		<a>Lien vers mon CV</a>
	</nav>
	<article>
		<h2>Article 1</h2>
	</article>
	<article>
		<h2>Article 2</h2>
	</article>
</body>

Pour l'affichage, header occupe 100% de la hauteur de la page, on arrive donc (sur ma page d'accueil) sur un mini CV + deux liens essentiels : lire le CV complet ou prendre contact.
En jouant de la molette, on découvre les liens vers les rubriques ainsi qu'une intro des différents articles.

Est-ce que dans ce cas l’utilisation de 2 balise nav est indiquée ?
Est-ce pénalisant (sémantique, référencement....) ?

Merci d'avoir pris le temps de me lire, et peut-être de me répondre Smiley langue

QuentinC

23 May 2014 à 23:30

a écrit :
Ou bien est-il possible (et correcte) de combiner les deux ? La documentation n'interdisant pas de commencer une section par un titre de plus bas niveau qu'un titre h1

Dans le but d'allier référencement, sémantique et accessibilité, je préconise personnellement d'utiliser les niveaux et l'outline classique h1, h2, etc. même si on fait du HTML5. Mais il faut être prudent et ajouter une précision supplémentaire.

Dans le domaine de l'accessibilité aux lecteurs d'écran, ce code :

<body> 
	<h1>Titre principal</h1> 
	<section> 
		<h1>Titre de la section 1</h1> 
			<article> 
				<h1>Titre article 1</h1> 
			</article> 
			<article> 
				<h1>Titre article 2</h1> 
			</article> 
	</section> 
	<section> 
		<h1>Titre de la section 2</h1> 
	</section>

Pose problème aux lecteurs d'écran un peu anciens qui ne connaissent pas HTML5; pour lesquels la structure devient plate.
En revanche, cette version-ci :

<h1>Titre principal</h1> 
	<section> 
		<h2>Titre de la section 1</h2> 
			<article> 
				<h3>Titre article 1</h3> 
			</article> 
			<article> 
				<h3>Titre article 2</h3> 
			</article> 
	</section> 
	<section> 
		<h2>Titre de la section 2</h2> 
	</section>

Cette version-ci est censé être techniquement correcte, on utilise l'outline classique HTML4, il ne peut pas y avoir de doute; mais les lecteurs d'écran récents interprètent quoi qu'il arrive avec l'outline HTML5 et du coup la structure se casse la figure, des niveaux sont perçus comme ayant été sautés.

Le compromis entre les deux est d'indiquer explicitement via ARIA le niveau effectif du titre dans la structure :

<h1 role="heading" aria-level="1">Titre principal</h1> 
	<section> 
		<h2 role="heading" aria-level="2">Titre de la section 1</h2> 
			<article> 
				<h3 role="heading" aria-lavel="3">Titre article 1</h3> 
			</article> 
			<article> 
				<h3 role="heading" aria-level="3">Titre article 2</h3> 
			</article> 
	</section> 
	<section> 
		<h2 role="heading" aria-lavel="2">Titre de la section 2</h2> 
	</section>

a écrit :
Autre interrogation : la balise nav provoque la création d'une nouvelle section dans mon document. Admettons.
Mais je n'ai pas forcement envie d'ajouter un titre à mon menu. Sans balise <hn> entre les balises <nav></nav>, la structure de mon document contient une "Untitled Section". Est-ce embêtant ?

Côté accessibilité, je pense que ça peut être bien de mettre un titre caché, ça dépend de la situation. Au besoin, on peut se servir de aria-label pour donner un nom au landmark.

a écrit :
Toujours concernant la navigation et les menus : les différentes entrées d'un menu ont elles valeur à apparaitre dans la structure du document ?
Est-ce un non sens ?

Non, définitivement non, c'est des liens de menus, pas des titres; ça n'a absolument rien à faire dans la hiérarchie de titres. Pour moi c'est effectivement un non-sens.

Les moteurs de recherche sont probablement suffisament malins pour repérer ce genre de petites entourloupes à 2€ et ne te donner aucun crédit.

a écrit :
Plusieurs balises nav dans la même page
Une autre question, cette fois ci a propos de l'utilisation de plusieurs balises <nav> dans la même page. Nav donne une précision sur les liens de navigations principaux d'une page, typiquement le menu principal. Mais est-ce que cela peut s'appliquer à deux sections dans une même page, spécialement quand les liens pointent le même endroit ?

Pour l'exemple que tu donnes, je pense que deux <nav> se justifient tout à fait. ON peut voir ça comme un menu principal et un menu de navigation secondaire.

Maintenant, du point de vue purement SEO, j'en sais rien; de toute façon le SEO n'est pas une science exacte (à preuve du contraire personne ne connaît les critères exacts de Google à part Google lui-même, et quand il remarque qu'on commence à les connaître un peu trop, il les change). La seule chose rationnelle à faire si on veut arriver en premier, c'est payer Google, le reste c'est de la tentative de triche.

The_Moye

24 May 2014 à 01:49

Salut QuentinC et merci pour ta réponse.

a écrit :
Cette version-ci est censé être techniquement correcte, on utilise l'outline classique HTML4, il ne peut pas y avoir de doute; mais les lecteurs d'écran récents interprètent quoi qu'il arrive avec l'outline HTML5 et du coup la structure se casse la figure, des niveaux sont perçus comme ayant été sautés.

Le compromis entre les deux est d'indiquer explicitement via ARIA le niveau effectif du titre dans la structure

L’algorithme utilisé à l'adresse http://gsnedders.html5.org/outliner/ ne semble pas être embêté par les niveaux oubliés. Après est-il fiable...
Je note l'utilisation d'aria, merci pour l'astuce.

a écrit :
Côté accessibilité, je pense que ça peut être bien de mettre un titre caché, ça dépend de la situation. Au besoin, on peut se servir de aria-label pour donner un nom au landmark.

J'ai lu sur la toile que l'utilisation d'un titre en hidden était déconseillé pour le référencement, comme quoi cela était pénalisant.
Info ? Intox ?

a écrit :
Non, définitivement non, c'est des liens de menus, pas des titres; ça n'a absolument rien à faire dans la hiérarchie de titres. Pour moi c'est effectivement un non-sens.

J'en prends bonne note !

QuentinC

24 May 2014 à 07:33

a écrit :
L’algorithme utilisé à l'adresse
http://gsnedders.html5.org/outliner/
ne semble pas être embêté par les niveaux oubliés. Après est-il fiable...

Normal, c'est un problème spécifique aux lecteurs d'écran. D'après ce que je sais, c'est censé être tout à fait correct.

D'après ce que j'ai déjà lu, en fait, en HTML5, on a deux choix: utiliser l'outline HTML5, ou l'outline HTML4. L'outline HTML5 c'est ton premier code avec que des H1; quand à utiliser l'outline HTML4, on peut tant qu'il ne peut pas y avoir de doute; dans ton exemple il n'y en a pas, car ce serait incorrect de commencer directement une section à H2. Tu pourrais avoir des problèmes si tu voulais utiliser l'outline HTML4 tout en voulant avoir deux H1 par exemple. Je ne sais pas si c'est très clair...

a écrit :
J'ai lu sur la toile que l'utilisation d'un titre en hidden était déconseillé pour le référencement, comme quoi cela était pénalisant.
Info ? Intox ?

Aucune idée, mais petite question: vaut-il mieux privilégier le confort de certains utilisateurs, ou bien le référencement pur ?
Bon, le titre caché, c'est un truc très spécifique, et c'est pas toujours justifié/pertinent de le faire, ça dépend beaucoup du contexte. Cela étant, je ne pense pas qu'un texte type « Menu principal » contribue beaucoup à te descendre.

The_Moye

24 May 2014 à 13:48

Hello,

a écrit :
Tu pourrais avoir des problèmes si tu voulais utiliser l'outline HTML4 tout en voulant avoir deux H1 par exemple. Je ne sais pas si c'est très clair...

Très clair !

a écrit :
Aucune idée, mais petite question: vaut-il mieux privilégier le confort de certains utilisateurs, ou bien le référencement pur ?

Question délicate à laquelle je répondrais : pourquoi privilégier leur confort si ni eux ni les utilisateurs plus "standards" n'arrivent sur mon site à cause d'un référencement hasardeux ?

a écrit :
Bon, le titre caché, c'est un truc très spécifique, et c'est pas toujours justifié/pertinent de le faire, ça dépend beaucoup du contexte. Cela étant, je ne pense pas qu'un texte type « Menu principal » contribue beaucoup à te descendre.

Si je te suis bien, ce cas concret :


<body>
	<header>
		<h1 role="heading" aria-level="1">Mon nom</h1>
		<section id="mini-cv">
			<h2 role="heading" aria-level="2">Ma fonction</h2>
			<p>Quelques infos sur ma petite personne</p>
		</section>
		<nav id="navigation_secondaire">
			<h2 role="heading" aria-level="2">Navigation secondaire</h2>	<!-- caché -->
			<a>Lien vers mon CV complet</a>
			<a>Lien vers la page de contact</a>
		</nav>
	</header>
	<nav id="navigation_principale">
		<h2 role="heading" aria-level="2">Navigation principale</h2>	<!-- caché -->
		<a>Rubrique 1</a>
		<a>Rubrique 2</a>
		<a>Lien vers mon CV complet</a>
	</nav>
	<section id="contenu_principal" role="main">
		<h2 role="heading" aria-level="2">Dernières publications sur mon porte-folio</h2>	<!-- caché -->
		<article>
			<h3 role="heading" aria-level="3">Article 1</h3>
		</article>
		<article>
			<h3 role="heading" aria-level="3">Article 2</h3>
		</article>
	</section>
</body>

Ça te semble pertinent ?
L'outline correspondant serait le suivant :

1 Mon nom
_1.1 Ma fonction
_1.2 Navigation secondaire
_1.3 Navigation principale
_1.4 Dernières publications sur mon porte-folio
__1.4.1 Article 1
__1.4.2 Article 2

Il n'y a rien d'embêtant à ce que le contenu principal soit au même niveau que la navigation par exemple ?

D'ailleurs en parlant de ce contenu principal, est il plus judicieux d’utiliser une <section> + role="main" ou bien La balise HMTL 5 <main> + role="main" ?
Sachant que la balise main ne sectionne pas le contenu, et le outline correspondant serait alors :

1 Mon nom
_1.1 Ma fonction
_1.2 Navigation secondaire
_1.3 Navigation principale
_1.4 Dernières publications sur mon porte-folio
_1.5 Article 1
_1.6 Article 2

Ça semble moins heureux.

QuentinC

25 May 2014 à 17:57

La balise main est plus précise que section et joue pleinement son rôle dans ton exemple; donc utilise-la ! Mais attention: double-la quand même de role="main" pour les systèmes un peu plus anciens.

The_Moye

25 May 2014 à 18:07

Salut QuentinC,

Ce qui me chiffonne c'est qu'elle ne sectionne pas le document, je me retrouve donc avec un outline qui me semble moins heureux qu'avec une section qui regrouperait toutes mes news.

Du coup je ne sais que choisir Smiley lol

Jordi

19 Feb 2015 à 15:48

Je suis tombé sur un article très intéressant au sujet de la structure HTML5 dans lequel il est question de sections implicites qui rendent l'outline HTML4 tout à fait correct (si j'ai bien compris) en HTML5.

https://developer.mozilla.org/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document

Sujet clos

Sémantique web et HTML

HTML5, outline, référencement et sémantique