Est-il mauvais d'utiliser display: none en CSS?

72

J'ai souvent entendu dire que c'était mauvais à utiliser display: nonepour des raisons de référencement, car cela pourrait être une tentative d'introduire des mots clés populaires non pertinents. Quelques questions:

Est-ce toujours la sagesse reçue?
Cela fait-il une différence si vous ne cachez qu'un seul mot, ou peut-être un seul caractère?
Si vous devez éviter de l'utiliser, quelles sont les techniques préférées pour vous cacher (dans les situations où vous avez besoin qu'elle redevienne visible à certaines conditions)?

Quelques références que j'ai trouvées jusqu'à présent:

Matt Cutts de 2005 dans un commentaire

Si vous utilisez directement CSS pour masquer du texte, ne soyez pas surpris si cela s'appelle du spam. Je ne dis pas que le survol de souris, le texte DHTML ou le fait d'avoir un logo, mais aussi du texte, est du spam; Lors d’une conférence, j’ai répondu à cette question en disant: "imaginez à quoi ressemblerait un visiteur, un concurrent ou une personne vérifiant un rapport de spam. Si vous affichez le nom de votre société et son marqueur Expo au lieu du logo Expo Markers, vous Si le texte que vous décidez de montrer est "Marqueurs Expo bon marché, achat en ligne discount", alors je serais plus prudent, car cela peut paraître mauvais. "

Et dans un autre commentaire sur le même article

Nous pouvons signaler le texte qui semble être masqué en utilisant CSS chez Google. À ce jour, nous n’avons pas supprimé de sites algorithmiques pour cela. Nous nous efforçons d'éviter de jeter les bébés avec l'eau du bain.

Eric Enge a déclaré en 2008

L'utilisation légitime de cette technique est tellement répandue que je m'attendrais rarement à ce que les moteurs de recherche pénalisent un site pour avoir utilisé l' display: noneattribut. Il est juste très difficile d'implémenter un algorithme qui pourrait vraiment révéler si l'utilisation particulière de display: noneest destinée à tromper les moteurs de recherche ou non.

seo css alt-attribute

— Andy
source

Et si j'utilise un écran blanc de chargement (sans texte) que je cache plus tard avec javascript? Google considérera-t-il que je cache la page sous cet écran blanc? Merci

— floraisonmilez

J'utilise display: none pour réduire le contenu de la page sur les écrans mobiles, car la quantité de copie qui semble raisonnable sur un écran plus grand est beaucoup trop sur un téléphone. Est-ce que je me pose un problème?

57

En ces jours de sites Web lourds jQuery (et autres frameworks JavaScript), je ne vois pas en quoi cela peut poser un problème, car il est très utilisé lorsque vous utilisez des éléments tels que des curseurs jQuery, des transitions, des galeries, des tickers, etc. Les moteurs de recherche sont suffisamment intelligents pour ne pas pénaliser aveuglément leur utilisation.

Un utilisateur déclare ceci dans le forum Google Webmaster Central :

"Simplement en utilisant affichage: aucun ne déclenchera automatiquement une pénalité. La clé est de savoir s'il existe ou non un mécanisme - automatique ou invoqué par l'utilisateur - pour rendre le contenu visible. Google devient de plus en plus apte à traiter JavaScript de trouvez et interprétez de tels mécanismes.Si vous utilisez du code HTML, CSS et JavaScript valide, vous n'avez rien à craindre. Bonne chance! "

— Dan Diplo
source

Intéressant, merci. Cela implique que je devrais éviter d'être paresseux et d'utiliser display: nonepour supprimer des éléments en CSS qui pourraient être supprimés dans le code; mais pour les effets et autres, ça va. Je me demande alors comment ils pourraient détecter des situations où il y a un logo d'image, et le texte du logo est également inclus pour l'accessibilité mais caché. De la description, cela serait considéré comme mauvais?

— Andy

@ Andy: Peut-être. Mais vous ne devriez pas utiliser CSS pour masquer le texte du logo; mettez-le dans l' altattribut de la imgbalise. C’est la raison pour laquelle l’attribut est là et, autant que je sache, son utilisation tend à améliorer votre indice de référencement.

— David Z

En fait, cela semble être le cas si vous utilisez l' longdescattribut de la balise image pour fournir un lien vers une autre page contenant la description complète. Cela ne sera vu que par les lecteurs d'écran (et peut-être par les moteurs de recherche). Voir webaim.org/techniques/images/longdesc#longdesc

— Dan Diplo

Je ne cherche pas réellement le meilleur moyen de présenter une description d'un graphique ... Je faisais référence à la citation de Matt Cutts. Je ne dis pas que ... avoir un logo mais aussi un texte est le spam . Il ne me semble pas qu'il parle d'utiliser les attributs altou longdesc, et cela a fourni un léger contraste avec La clé est de savoir s'il existe ou non un mécanisme ... pour rendre le contenu visible .

— Andy

7

Si vous n'en abusez pas, ce ne sera pas un problème. À l'heure actuelle, Google n'analyse pas les feuilles de style CSS à la recherche d'instances dedisplay: none

Google ne va pas déclarer la guerre à une règle de style largement utilisée, mais simplement avertir ceux qui pensent pouvoir ajouter 1 000 mots-clés à un site qui sont tous définis, display: nonevoire pire,margin-left: 9999px

— Shane Stillwell
source

6

Utilisez "display: none" uniquement lorsque c'est le bon outil à utiliser.

Comme le suggèrent les citations, le problème des moteurs de recherche en matière d'affichage est le spam. Essayer de spammer les moteurs de recherche, quels que soient les outils utilisés, est une mauvaise idée. Si vous utilisez CSS pour autre chose que du spam, il n'y a pas de problème.

Le bon outil pour le bon travail.

— luiscubal
source

3

Merci. La question devient alors quand est display: nonele bon outil. Vous dites que si CSS est utilisé pour autre chose que du spam, ce ne sera pas un problème: êtes-vous confiant que si j'utilise display: noneun moyen paresseux de supprimer des éléments, cela ne posera pas de problème?

— Andy

@Andy display: none est l'outil approprié lorsque vous ne souhaitez pas afficher du contenu. Pour supprimer des éléments, il peut être préférable de ne pas l'inclure du tout (ou, si vous utilisez JavaScript, de supprimer les éléments du DOM). Si vous supprimez le contenu de la page à l'aide de display: none, les utilisateurs ne le voient pas mais les moteurs de recherche l'indexent toujours, ce serait alors du spam. Si vous avez une sorte de bouton "Afficher / Masquer", ou quelque chose comme ça, c'est OK.

— luiscubal

4

Je suis d'accord avec Dan Diplo et pour ajouter à ce qu'il a dit, Google lui-même utilise également display: nonedans sa PAGE D'ACCUEIL , de sorte que son utilisation ne pose pas vraiment de problèmes, tant que vous ne l'utilisez pas pour le spam mots-clés dans un affichage: aucun panneau DIV).

Ouvrez Google HOME PAGE et recherchez dans le code source HTML. Rechercher pour display:nonevous allez le voir plusieurs fois. :)

— Marco Demaio
source

Merci Marco. Cela laisse encore des questions quant à savoir si vous pouvez utiliser des display: noneéléments qui ne sont jamais visibles.

— Andy

@Andy: Les éléments jamais visibles sont supposés être uniquement du spam, je ne vois pas pourquoi vous devriez utiliser des éléments jamais visibles, pourquoi se donner la peine de les placer dans une page HTML alors? Donc, je m'attendrais à les utiliser n'est pas une bonne idée. Google pourrait peut-être les détecter maintenant ou à l'avenir et pénaliser votre site.

— Marco Demaio

Le seul exemple auquel je peux penser est lorsque vous utilisez un CMS et que, pour des raisons de temps, vous pouvez utiliser CSS pour masquer un ou deux petits éléments de balisage, plutôt que de personnaliser entièrement le balisage. (Et je demande seulement au Q de mieux comprendre la situation actuelle - mon CMS de choix est Drupal, où la modification du balisage est rapide et facile.)

— Andy

@Andy - Est-il même logiquement possible pour un moteur de recherche de lire des milliers de lignes de javascript et d'identifier les cas où il est logiquement impossible qu'un élément soit affiché? Il faudrait beaucoup de rétro-ingénierie pour étudier le code de tout site avec une ligne qui dit $('.'+somevar).show();et calcule toutes les valeurs possibles somevarpouvant avoir et compare cela à tous les états possibles du DOM - et c'est un cas exceptionnellement trivial ... En outre, de nombreux cas où un div ne sera pas affiché en raison de données, d'entrées, de résultats d'appels API / AJAX, du comportement de l'utilisateur, etc., mais pourraient logiquement ...

— user56reinstatemonica8

@ user568458 Je pense que c'est le point soulevé par Eric Enge dans le dernier paragraphe de la question et par Dan Diplo dans la réponse acceptée.

— Andy

3

Je pense que vous devriez essayer de trouver d'autres alternatives, mais voici quelques articles de référence

Inclut des liens vers Maile et Vanessa sur une discussion radio Webmaster sur ce sujet http://luigimontanez.com/2010/stop-using-text-indent-css-trick/

Maile est un ingénieur Google http://maileohye.com/html-text-indent-not-messing-up-your-rankings/

Google va proposer une solution, mais un décalage négatif et un affichage nul ne sont pas sécuritaires si vous envisagez une perspective à long terme.

— AndyBeard
source

0

Google explore le display:nonecontenu CSS .

Cacher quelque chose à Google n’est mauvais que si vous essayez intentionnellement de manipuler les classements de recherche.

Les options cachées et le texte des visiteurs sont désormais une pratique courante en raison de la transformation des sites Web interactifs. Ne vous inquiétez donc pas. Dans le passé, les gens utilisaient ce type de méthodes pour jouer au SEO, cacher des mots-clés, des liens, etc. Le résultat est que lorsque Google explore un site qui cache des éléments cachés au spectateur, il le voit moins fiable.

— Josip Ivic
source

0

Je viens d'avoir une conférence avec référencement dans Google et ce n'est pas vrai. L'affichage aucun ne pénalise, à coup sûr. Quelque temps auparavant, il était question de visibilité ou d’utilisation de tailles de texte négatives ou d’indentations négatives.

Est un fait que le texte doit être visible et non obstrué de manière visible. Au moins pas de plaque de la chaudière ou du contenu dupliqué ou paresseux.

Soit dit en passant, Google peut faire ce qu'il veut sur son site, mais il se met probablement au premier rang même s'il s'agissait d'une pomme de terre.

En particulier, l’approche proposée et probablement à utiliser consiste à la montrer et quelles que soient les conséquences qu’elle peut avoir sur la conception.

Je proposerai des choses comme z-indexing (layering) pour vérifier si par hasard ce genre de styles ne sont pas considérés. Mais je ne pense pas qu'un algorithme soit assez puissant pour prendre en compte cela. Vous pouvez également calculer la position de la boîte en fonction de la taille de l'écran pour prendre en compte le positionnement négatif en tant que bloc visuel.

Le texte associé à l'intérêt du client seo ergo doit être visible.

— Budaya
source

1

Cette réponse est totalement fausse. Quelle que soit la conférence à laquelle vous êtes allé, c'est terrible. Je ne peux pas imaginer les autres déchets qu’ils vous ont nourris. Ils vous ont probablement dit que les balises méta étaient également importantes.

— John Conde

1

Il est vrai que si vous créez une longue liste de mots-clés, que vous la mettez sur votre page et que vous la masquez avec display: none, Google pénalisera votre site. Il est également vrai que le texte censé être indexé doit être visible. Comme d'autres réponses le soulignent, il existe des utilisations légitimes pour l'affichage: aucune.

— Stephen Ostermiller

Les moyens techniques utilisés pour masquer le texte n'ont aucune importance pour Google. Les spéculations selon lesquelles un indice z ou un positionnement négatif pourraient être utilisés pour faire échouer Google sont totalement fausses. Googlebot rend les pages maintenant et peut détecter tout moyen utilisé pour empêcher le texte d'apparaître en pixels sur les page.As autres réponses soulignez, non

— Stephen Ostermiller