HTML5: titres dans les éléments de sectionnement-contour du document et implications SEO
La spécification html5 dit que:
Le contour d'un élément de contenu de sectionnement ou d'un élément racine de sectionnement consiste en une liste d'une ou de plusieurs sections potentiellement imbriquées. Une section est un conteneur qui correspond à certains nœuds de L'arborescence DOM d'origine. Chaque section peut avoir un titre associé, et peut contenir n'importe quel nombre d'autres sections imbriquées. L'algorithme du contour associe également chaque nœud de L'arborescence DOM à une section particulière et potentiellement un cap.
Et le même raisonnement semble appliqué à l'algorithme HTML5 document outline .
J'ai vérifié le contour de mon site en utilisant L'outil HTML5 outliner (H5O) [link], mais j'ai du mal à obtenir un contour clair qui n'est pas surchargé de titres inutiles, à cause du fait que des éléments tels que <nav> ou <footer> apparaîtront dans votre contour mais le feront comme "Sans titre" à moins rubrique.
Cela semble franchement exagéré pour des choses comme la navigation ou les pieds de page.
Une solution consiste à remplacer ces éléments par des divs, mais cela semble aller à l'encontre de tout le but de l'utilisation de html5.
Un autre, que j'ai essayé provisoirement sur mon site [link ], consiste à définir des en-têtes pour tous les éléments de sectionnement, puis à utiliser CSS pour masquer les en-têtes de certains d'entre eux (encore une fois, essentiellement <nav> et <footer>, ainsi que certains <section> éléments. Voici un exemple:
<nav id="content-nav">
<h2 class="hidden">Post navigation</h2>
<ul>
<li class="alignleft"><?php next_post_link('← <strong>Next Post</strong><br />%link') ?></li>
<li class="alignright"><?php previous_post_link('<strong>Previous Post</strong> →<br />%link') ?></li>
</ul>
</nav>
Il en résulte un site joliment diplaying, mais le problème que je vois avec elle est le classement Google. Dans son outil webmasters help item [link] sur 'Texte caché et liens', Google indique clairement que:
Cacher du texte ou des liens dans votre contenu peut faire en sorte que votre site soit perçu comme indigne de confiance, car il présente des informations aux moteurs de recherche différemment des visiteurs. Le texte (comme les mots-clés excessifs) peut être caché de plusieurs façons, y compris: [ ... ] en utilisant CSS pour masquer le texte ...
Certaines personnes pourraient penser que si Google aime le fait qu'ils utilisent du texte caché ou non est sans importance, mais la plupart de mes visiteurs viennent de recherches Google et je préfère ne pas être pénalisé à la suite de choisir d'aller avec cette configuration.
Quelqu'un Peut-il donner des conseils sur le sujet?
2 réponses
Un autre, que j'ai essayé provisoirement sur mon site, consiste à définir des en-têtes pour tous les éléments de sectionnement, puis à utiliser CSS pour masquer les en-têtes de certains thèmes (encore une fois, essentiellement
<nav>et<footer>, ainsi que certains<section>éléments.
C'est exactement la façon dont je le ferais, je n'ai pas encore eu à construire un site HTML5, mais assez curieusement j'ai regardé cela il y a quelque temps.
"en-têtes" ou titres de section , sont parfaits pour créer la structure ou plan de document (comme indiqué sur le périphérique). Ils sont également très utiles pour les utilisateurs de technologie assistée, qui peuvent essentiellement trouver leur chemin autour d'un site en "tabulant" à travers les en-têtes sans avoir à "écouter" tout et essayer de comprendre où vous pourriez avoir mis par exemple votre boîte de recherche.
C'est la raison pour laquelle je vois que les titres/titres devraient être là, même s'ils sont cachés de la vue des utilisateurs visuels (et bourrent les SE;))
Pas toutes les méthodes de masquage CSS sont égaux
OK donc je sais que nous ne pouvons pas radier les SE, donc la façon dont vous choisissez de cacher les en-têtes est alors importante, car vous voulez qu'ils soient disponibles pour les utilisateurs AT (technologie assistée).. display: none; n'est pas fiable (certains lecteurs d'écran ne pas les lire) et vous ne pouvez pas "onglet" trouver eux - visibility: hidden; ne supprimera pas l'espace et vous ne pouvez toujours pas "onglet" find
Alors, quelle méthode de cachette?
.. il se trouve être un vraiment cool, découvert par les membres de la communauté Drupal.. utilisation de la propriété clip: rect(); qui maintient tout le monde heureux
.my-hidden-element {
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
clip: rect(1px, 1px, 1px, 1px);
}
Quant à Google, non seulement il serait difficile pour eux de "bannir/pénaliser" en fonction de la propriété clip, même si commencer à lever des drapeaux, je pense que c'est comme tout le reste si vous pouvez prouver une utilisation légitime pour cacher un élément - il ne devrait pas y avoir de problème.. et en fait, dans ce cas, les en-têtes supplémentaires devraient théoriquement aider eux "trouver la structure" aussi-donc je pense vraiment que ce n'est pas le plus grand inquiéter..
Mes Pensées
Je pense absolument que nous devrions titrer les sections selon les recs HTML5, c'est plus sémantique que n'importe quel élément de code ou nom de classe, mais je pense aussi à 100% que nous devrions pouvoir les cacher aux Visual viewers car il est inutile de montrer le titre "rechercher ce Site" si vos utilisateurs visuels peuvent voir qu'il y a une boîte de recherche ;) - ce titre n'est utile qu'aux utilisateurs non visuels et aux SE pour les aider à localiser les zones du document.. en théorie, cela devrait aider SE / Google rejette cette zone, par exemple, ils ne devraient pas avoir besoin d'indexer une boîte de recherche.. donc, ils vont devoir travailler sur leur IA, ne pensez-vous pas;)
Mon sentiment serait d'aller avec cela et d'être clair sur la raison pour laquelle vous le faites, alors si votre site est par hasard signalé (ce qui, je pense, serait hautement improbable et serait de toute façon un examen manuel), vous pouvez expliquer très clairement pourquoi vous le faites.. Tant que ces titres cachés ne sont pas" spammy " alors je pense qu'il va tomber dans le même catégorie que "remplacement d'image"
+ 1 Grande Question!
Ma façon préférée d'y faire face. Avec les styles désactivés, vous voyez l'en-tête, mais c'est un petit en-tête, pas un h1.
<nav>
<h6 class="hidden">Navigation</h6>
<ul>
<li><a href="www.ronpaul.com">Ron Paul 2012</a></li>
.hidden{
position:absolute;
left:-9999px;
}
Ou
.hidden{
text-indent:-9999px;
}