Balise h et display: none

[phpDesigner]

Certains nous disent que le display:none pourrait être considéré comme une tentative de fraude.

Or, beaucoup d'outils génériques pour faire des CMS, des boutiques, ou des forums affichent par défaut un bandeau avec h1 en display:none, et ce display:none est basculé en visible lorsque l'utilisateur choisit de ne pas afficher ce bandeau.

Plus généralement, la plupart des outils de basculement (spoiler) utilisent abondamment la technique du display:none pour afficher ou cacher du contenu selon le contexte.

Qu'en pensez-vous en tant que référenceur ?

[spout]

- Si le <h1> contient les mêmes infos que le bandeau, je ne vois pas de problème, c'est une pratique courante.
- Si c'est pour gruger Google ...

[phpDesigner]

Ceci sera-t-il pénalisant ?

Code: Tout sélectionner

<div style="display:none;">
   <h1>Le titre de la page</h1>
</div>
<div style="background: le bandeau avec un fond en image;">
   <ul class="menu">
      <li>menu 1</li>
      <li>menu 2</li>
   </ul>
</div>


[luxe-campagne]

On peut appliquer le style directement sur le h1, sans rajouter un div parent.

Je conseillerais plutôt d'envoyer le h1 sur saturne en le positionnant car c'est plus compatible avec les navigateurs accessibles, qui n'affichent pas toujours les infos en display none.
Dans la css :
h1.invisible {
position: absolute;
top: -999em;
}
et dans le code html de la page :
<h1 class="invisible">bla bla bla</h1>

[phpDesigner]

Il semblerait que cette technique de décalage négatif, autrefois fort prisée, est à bannir, car elle propose un contenu différent pour les moteurs de recherche et pour les autres utilisateurs.

[fredfan]

Il vaudrait mieux l'afficher normalement en html et le déplacer ou le masquer en javascript. Il n'y aurait pas de risque d'être perçu comme un tricheur et le titre sera affiché par un navigateur sans js

[luxe-campagne]

bonne idée Fredfan.

@phpDesigner : ce n'est pas différent de mettre display:none;
cela cache un élément, c'est le même principe avec une méthode différente. Il s'agit juste d'employer une méthode plus accessible pour les navigateurs adaptés.