html5: les titres de découpe, les éléments - structure du document et le RÉFÉRENCEMENT des implications

La spec html5 dit que:

Le contour de la coupe de l'élément de contenu ou de la coupe de l'élément racine est constitué d'une liste d'un ou de plusieurs potentiellement sections imbriquées. Une section est un conteneur qui correspond à certains nœuds dans l'original arborescence DOM. Chaque section peut avoir une rubrique lui est associé, et peut contenir n'importe quel nombre d'autres sections imbriquées. L'algorithme pour le contour aussi associe à chaque nœud dans l'arbre du DOM avec une section particulière et potentiellement d'un titre.

et le même raisonnement semble appliquée à la document html5 contour de l'algorithme.

J'ai été vérifier mon site de contour à l'aide de l'HTML5 structure (h5o) [lien] outil, mais éprouve de la difficulté à obtenir un aperçu clair qui n'est pas surchargé avec des inutiles, des titres, en raison du fait que les éléments tels que <nav> ou <footer> apparaîtra dans votre plan, mais en tant que 'sans titre', sauf si vous leur donner explicitement h1-h6-tête.

Cela semble franchement exagéré pour des choses comme la navigation ou les pieds de page.

Une solution est de remplacer ces éléments avec des divs, mais qui semble à l'encontre de l'objectif de l'utilisation de html5.

Un autre, que j'ai provisoirement essayé sur mon site [lien], est de définir des en-têtes pour tous les éléments de sectionnement et ensuite utiliser les CSS pour masquer les en-têtes pour 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('&#8592; <strong>Next Post</strong><br />%link') ?></li>
        <li class="alignright"><?php previous_post_link('<strong>Previous Post</strong> &#8594;<br />%link') ?></li>
    </ul>
</nav>

Il en résulte un bien-affichage du site, mais le problème que je vois avec elle est classement Google. Dans sa Webmasters aide de l'Outil de l'article [lien] sur " texte caché et de liens, Google indique clairement que:

Cacher du texte ou des liens dans votre contenu, votre site peut être perçu comme peu fiable car il présente des informations aux moteurs de recherche différemment que pour les visiteurs. Texte (excessive de mots-clés) peuvent être cachés dans plusieurs façons, notamment: [...] à l'Aide de CSS pour masquer le texte...

Certaines personnes peuvent se sentir que si Google aime le fait qu'ils utilisent le texte masqué ou non n'a aucune importance, mais la plupart de mes visiteurs proviennent de recherches sur Google et je préfère ne pas être pénalisé comme un résultat de choisir d'aller avec cette configuration.

Quelqu'un peut-il donner des conseils sur le sujet?

InformationsquelleAutor Donald Jenkins | 2011-04-02
  1. 30

    Un autre, que j'ai provisoirement essayé sur mon site, est de définir des en-têtes pour tous les éléments de sectionnement et ensuite utiliser les CSS pour masquer les en-têtes de certains de thème (encore une fois, essentiellement <nav> et <footer>, ainsi que certains <section> éléments.

    C'est exactement la façon dont je le ferais, n'ont pas réellement eu à construire un site HTML5 encore, mais curieusement J'ai regardé dans ce dos pendant une.

    "rubriques" ou les titres de section, sont parfaits pour la création de la structure ou de la structure du document (comme indiqué sur la structure). Ils sont également très utiles pour Aidé les utilisateurs de la Technologie, qui peut en fait trouver leur chemin autour d'un site par "tabulation" grâce à en-têtes, sans avoir à "écouter" tout et d'essayer de comprendre où vous pourriez avoir mis par exemple, votre zone de recherche.

    C'est la raison pour laquelle je vois que les titres/titres devrait être là, même s'ils sont cachés à partir de visual vue des utilisateurs (et des trucs de la SE ;))

    Pas tous les CSS cacher les méthodes sont égaux

    OK, donc je sais que nous ne pouvons pas écrire hors de la SE donc, la façon dont vous choisissez de masquer les en-têtes est alors important, comme vous voulez qu'ils soient disponibles pour le (la technologie Assistée) utilisateurs.. display: none; n'est pas fiable (certains lecteurs d'écran ne pas les lire) et vous ne pouvez pas "onglet" trouver eux - visibility: hidden; de ne pas supprimer l'espace et vous ne pouvez toujours pas "de l'onglet" trouver

    Donc qui cachent méthode?

    .. il arrive à être vraiment cool, découvert par les membres de la communauté Drupal.. à l'aide de la clip: rect(); propriété qui permet à chacun de rester heureux

    .my-hidden-element {
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
  clip: rect(1px, 1px, 1px, 1px);
}

    Comme pour Google, non seulement il serait difficile pour eux de "interdiction générale/sanctionner" basé sur le clip de la propriété, même si ne commencer à lever des drapeaux, je pense que c'est comme tout le reste, si vous pouvez prouver un usage légitime pour cacher un élément - là ne devrait pas être un problème.. et en fait, dans ce cas, le des en-têtes supplémentaires devraient théoriquement aider eux "trouver la structure" trop donc j'ai vraiment l'impression que ce n'est pas le plus gros souci..

    Mes Pensées

    J'ai absolument pense que nous devrions titre des sections comme par le HTML5 cer, c'est plus sémantique que tout élément de code ou un nom de classe, mais j'ai aussi 100% pense que nous devrions être en mesure de les cacher à partir de visual téléspectateurs comme il n'y a aucun point en indiquant le titre de la Recherche "de ce Site", si votre visual les utilisateurs peuvent voir qu'il y a une zone de recherche là-bas 😉 ce titre n'est utile que pour les non-visuel des utilisateurs et SE pour aider à localiser les zones du document.. en théorie, cela devrait aider à la SE/Google rejeter cette zone par exemple, ils ne devraient pas l'indice d'une zone de recherche.. donc ils vont devoir apprendre à travailler sur leur IA, vous ne pensez pas 😉

    Mon sentiment serait d'aller avec cela et être clair sur pourquoi vous êtes le faire, si votre site est par hasard marqué (ce qui je pense serait très peu probable et serait un examen manuel de toute façon), vous pouvez expliquer clairement pourquoi vous le faites.. tant Que ceux qui sont cachés les titres ne sont pas de "spam", alors je pense qu'il va tomber dans la même catégorie que "l'image de remplacement"

    +1 Grande Question!

    • D'accord avec @clairesuzy, je ne peux vraiment pas voir être pénalisé pour cela (en cachant les rubriques). Ce n'est pas la même que la dissimulation, mais peut-être que c'est juste mon avis. Vous devriez également considérer effectivement en utilisant les en-têtes dans un sens constructif, peut-être le style qu'elles apparaissent de petits (même taille que le texte normal) ou le style d'une autre façon qui est non-rubrique comme.
    • Testé clip rect() sur un sandbox site: fonctionne parfaitement. Merci pour la suggestion: je n'avais jamais entendu parler de lui.
    • "découvert par les membres de la communauté Drupal" pouvez-vous fournir la source de l'endroit où vous avez trouvé cette information?
    • CSS clip est maintenant obsolète, clip-path comme un remplacement est expérimentale: developer.mozilla.org/en-US/docs/Web/CSS/clip-path. Comme un secours, je vais aller avec Jon réponse ci-dessous avant une bonne alternative. Il semble légitime, est compatible avec tous les navigateurs, et n'a comme prévu.
    • Qu'en est font-size: 0; padding: 0; margin: 0; ? Semble ne pas occuper tout l'espace.
    InformationsquelleAutor clairesuzy
  2. 1

    Mon préféré façon de traiter avec elle. Avec des styles désactivé, vous voyez le titre, mais c'est une petite 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;
}
    • Merci pour cela. Oui, il peut être fait de cette façon, mais comme clairesuzy points, en utilisant le clippropriété a l'avantage d'être assez difficile de pénaliser, même si l'on voulait. Je l'ai utilisé pendant près d'un an maintenant sur mon site sans RÉFÉRENCEMENT questions.
    InformationsquelleAutor jon