web-dev-qa-db-fra.com

Même texte pour <h1> et <h2>

Que pensez-vous d'avoir le même contenu pour les balises H1 et H2 dans l'article? Cela ressemble à du bourrage de mots clés, non? Exemple:

<h1>Bananas <span>Musa × paradisiaca</span></h1>

<h2>Bananas <span>Musa × paradisiaca</span></h2>

<h2>Description</h2>  
<p>Bananas are long and yellow. Bananas are long and yellow.</p>

<h2>Taste</h2>  
<p>Bananas are delicious. Bananas are delicious. Bananas are delicious.</p>

Pensez-vous que c'est une mauvaise pratique? C'est ainsi que la disposition graphique est faite pour une page, le titre doit donc se répéter (il y a une grande image entre eux), et je me demande s'il serait préférable d'avoir un balisage comme ceci (dans ce cas <p>), mais stylé de manière à ressembler à h2.

Souhaitez-vous suggérer quelque chose d'autre au lieu de <p> qui conviendrait le mieux à un titre composé de 2-3 mots? Ceci est une idée purement basée sur le design et je n’aimerais même pas dire aux moteurs de recherche de ne pas indexer cette ligne.

<h1>Bananas <span>Musa × paradisiaca</span></h1>

<p class="h2">Bananas <span>Musa × paradisiaca</span></p>

<h2>Description</h2>  
<p>Bananas are long and yellow. Bananas are long and yellow.</p>

<h2>Taste</h2>  
<p>Bananas are delicious. Bananas are delicious. Bananas are delicious.</p>

(Span a un display: block réglé pour qu'il passe à la ligne suivante)

seohtmlheading
3
Boris Kozarac

N'utilisez pas un autre élément d'en-tête pour le contenu dupliqué. Les en-têtes (h1-h6) servent différents objectifs (générer le document, navigation pour les utilisateurs de lecteurs d’écran, etc.). Un en-tête dupliqué est inutile et peut être gênant ou semer la confusion.

Utiliser un élément différent et le styler conformément à votre conception est la bonne façon. Utiliser p pour cela semble être approprié; sinon le div sans signification.

Pour préciser que ce texte ne fait pas partie du contenu principal de la section, vous pouvez utiliser l'élément header pour regrouper l'en-tête, le texte d'en-tête dupliqué et l'image (en supposant que l'élément l'image fait également partie de l'en-tête).

Pour indiquer clairement que le texte dupliqué n'est pas pertinent et ne sert qu'un objectif esthétique, vous pouvez utiliser le rôle WAI-ARIA presentation .

Donc, votre section contiendrait:

<header>
  <h1>Bananas <span>Musa × paradisiaca</span></h1>
  <img src="tall-image.png" alt="" />
  <p role="presentation">Bananas <span>Musa × paradisiaca</span></p>
</header>
3
unor