H1 en display none

WRInaute discret
Bonjour,
j'ai appris qu'il pouvait être fatal de cacher du texte via un display:none par exemple et que GG peut considérer cela comme du spam.

Je voudrais vous expliquer pourquoi cela me pose problème, je ne m'amuse pas à écrire 50 000 mots clés cachés dans ma page cependant imaginez une barre de menu horizontal, avec en liens des images mis en background d'un <a> grâce au css, ainsi quand on passe la souris dessus : le background du <a> se change.
Par exemple : https://www.webrankinfo.com, comme dans la barre d'onglet ici sauf que dans mon cas les titre des onglets ne serait pas en texte mais directement écrit dans l'image - de manière à avoir une plus grande liberté artistique -.

Bon ok ça marche niquel, par contre si on regarde ça sans le style css de la page, et bien on ne vois plus le menu vu que tout est gérer en css - et que donc le titre n'est pas écrit en dur dans le html -, c'est pourquoi niveau accessibilité c'est très gênant, l'astuce est alors de mettre un <h1> (ou tout autre balise, ce n'est qu'un exemple) dans la balise <a> et de mettre en css les <h1> du menu en display:none.

Comme ça si on va sur le site avec le style, on vois le menu impec avec le rollover sur chaque onglet et si par exemple le visiteur est aveugle ou visite le site avec un appareil qui ne peut lire le css : on peut tout de même accéder (avec un synthétiseur vocal) aux titres des menu qui seront dans le code source de la page html. C'est aussi bien évidement pour le référencement pour signaler aux moteurs que même si le titre n'est à priori pas écrit en dur il est bel et bien présent et porte tel nom vu que contrairement aux humains le moteur ne lisent pas les textes écrit sur les images.

Cependant si je fait cela je risque tout de même d'être pris pour un spammeur pour les moteur non? Suis je alors obliger d'écrire mon texte en du à la manière de la page d'accueil de webrankinfo même si cela ne me conviens pas? Ou alors je suis obligé d'afficher l'image avec la balise <img> et d'inscrire le titre en alt même si je préfère que ce sois mis en background et que mon titre doit par exemple être considérer comme aussi important qu'un h1?
 
WRInaute accro
Un menu avec du h1 déjà c'est une erreur. H1 au niveau sémantique, il ne doit y avoir qu'une seule occurrence de cette balise par page.

Après savoir si ta technique est dangereuse ou non, je me suis posé la même question. Et personne n'a eu la même réponse. Je sais que certains sites le font depuis bien longtemps sans souci, mais est-ce une solution qui ne sera pas à terme pénalisée ?
 
WRInaute accro
En soi, pour l'accessibilité, la technique est valide. Mais pas en balise h1. Il faut le faire en utilisant les balises "normales" pour un menu, habituelllement ul et li.

Tu peux par exemple aller voir sur le site d'alsa-creations, qui l'utilise.

Mettre des balises de type hx ou strong à la place sera interprété comme une volonté de mettre du texte caché pour une autre raison que l'accessibilité -> pénalisation voir blacklist.

Le blacklistage se fait toujours après revue manuelle du site.
 
WRInaute discret
Oui mon exemple est bidon h1 est inapproprié pour un menu, je ne suis cependant pas d'accord quant au fait qu'il ne faut qu'un seul h1 par page, le h1 est le ou "les" titres les plus important de la page. Il peut y avoir 2 gros titres d'une page placer au même rang, cependant on va peut être pas dériver dans un débat sémantique, j'aurai plutôt mis disons un <strong>.

Mais j'ai peur de me faire sanctionner par google pour ça.
 
WRInaute accro
Mitsu a dit:
Oui mon exemple est bidon h1 est inapproprié pour un menu, je ne suis cependant pas d'accord quant au fait qu'il ne faut qu'un seul h1 par page, le h1 est le ou "les" titres les plus important de la page. Il peut y avoir 2 gros titres d'une page placer au même rang, cependant on va peut être pas dériver dans un débat sémantique, j'aurai plutôt mis disons un <strong>.

Mais j'ai peur de me faire sanctionner par google pour ça.

Marie-Aude t'as fait la bonne réponse, et donné un exemple incontournable qui l'utilise.
 
WRInaute discret
Si je garde le display none et que je met un ul/li plutôt que strong, google ne gueulera pas ?
Parce que je cache tout de même du texte n'empêche.
 
WRInaute discret
Dites moi par contre, pour le titre de mon site il y à un logo image mis en fond dans une image header.jpg cependant si je met cette fois en display none un h1(la le tag ce justifie je pense), google va gueuler?
 
WRInaute passionné
Mitsu a dit:
Oui mon exemple est bidon h1 est inapproprié pour un menu, je ne suis cependant pas d'accord quant au fait qu'il ne faut qu'un seul h1 par page, le h1 est le ou "les" titres les plus important de la page. Il peut y avoir 2 gros titres d'une page placer au même rang, cependant on va peut être pas dériver dans un débat sémantique, j'aurai plutôt mis disons un <strong>.

Mais j'ai peur de me faire sanctionner par google pour ça.

Pas d'accord du tout...

Un titre de page en h1 ;

Un ou pluisieurs titre de chapitre en h2, idem jusqu'à h6 ;)
 
WRInaute accro
Mitsu a dit:
Dites moi par contre, pour le titre de mon site il y à un logo image mis en fond dans une image header.jpg cependant si je met cette fois en display none un h1(la le tag ce justifie je pense), google va gueuler?

perso je ne met pas de display none mais une fonte de taille 0px ou de la même couleur que le fond si pas d'image en background (la question reste la même mais si GG cherche des display il n'en trouvera pas).
 
WRInaute impliqué
zeb a dit:
perso je ne met pas de display none mais une fonte de taille 0px ou de la même couleur que le fond si pas d'image en background (la question reste la même mais si GG cherche des display il n'en trouvera pas).

Oui, sauf que ça fait bien longtemps que GG est capable de lire une taille de texte et une couleur (et notament de déceller la couleur police / fond).
Je dirai même qu'il est plus suspect d'avoir une police à 0 ou de même couleur que le fond qu'un <strong> en display : none.
Donc on retombe sur le même pb qui n'est pas forcement de cacher du texte, mais plutot dans quel but et comment.
 
WRInaute accro
Pour le titre, c'est la même logique : si ton titre est effectivement la copie conforme du texte affiché, et que tu n'as pas "par hasard" un deuxième H1 un tout petit peu en dessous, je ne vois pas de risque, il ne s'agit que d'un technique d'accessibilité "normale"

Néanmoins, il est aussi possible de faire beaucoup plus simple : mettre la balise <img> entre <h1> et </h1> avec un alt reprenant le texte du titre. C'est aussi très fort en terme de SEO et incontestable.

Si tu mets plusieurs H1, fais simplement attention à ce que la structure du code soit logique : plusieurs h2 sous chaque h1
Sinon c'est un signe que tu "suroptimise"
 
WRInaute discret
Marie-Aude a dit:
Néanmoins, il est aussi possible de faire beaucoup plus simple : mettre la balise <img> entre <h1> et </h1> avec un alt reprenant le texte du titre. C'est aussi très fort en terme de SEO et incontestable.

Ah j'ai pas pensez à faire ça, merci beaucoup! Par contre un texte en alt dans un h1 est il aussi important aux yeux de gg qu'un texte écrit directement en dur dans le h1? En toute logique ça devrait vu que c'est dans un h1 mais sait on jamais.

Marie-Aude a dit:
Si tu mets plusieurs H1, fais simplement attention à ce que la structure du code soit logique : plusieurs h2 sous chaque h1
Sinon c'est un signe que tu "suroptimise"

Tout à fait d'accord, je tenai simplement à souligner le fait qu'il n'est pas interdit de faire plusieurs h1, après faut bien structurer c'est sur.
 
Discussions similaires
Haut