Il existe plusieurs façons de masquer un élément dans le CSS. L’effet de chaque méthode sur l’accessibilité, la disposition et les performances diffère considérablement d’une autre. Agir sur un niveau d’attribut HTML est une façon de masquer des éléments et, comme il s’agit d’un attribut global, il est utilisable sur n’importe quel élément HTML du CSS. Dans cet article, vous apprendrez comment masquer un élément HTML et quand le faire ce.

Qu’est-ce qu’un élément de masquage HTML ?

Un attribut caché HTML indique que l’élément n’est pas encore ou n’est plus pertinent. Si quelque chose est marqué comme « caché » dans le CSS, cela rend l’élément caché des moteurs de recherche, le rendant impossible à afficher et invisible même pour les lecteurs d’écran. Source : W3SchoolsEn d’autres termes, l’utilisation d’un attribut caché HTML garantira que les moteurs de recherche comme Google ne rendront pas certains éléments.Avis d’experts  : Un booléen est une variable binaire qui ne peut avoir que deux valeurs possibles, 0 (faux) ou 1 (vrai). L’attribut caché HTML est un attribut booléen. Cela signifie que si elle est présente, la valeur est toujours vraie, et si elle est absente, la valeur est toujours fausse.

Pourquoi masquer un élément HTML ?

La raison pour masquer un élément HTML peut varier. Il est souvent utilisé pour empêcher l’utilisateur de voir un élément jusqu’à ce qu’une autre exigence soit remplie. Par exemple, vous pouvez masquer certains éléments d’une page jusqu’à ce que l’utilisateur termine le processus de connexion. Source  : DribbleSouvent dans le cas mentionné ci-dessus, les webmasters décident d’utiliser JavaScript pour débloquer les éléments cachés, en utilisant quelque chose de similaire à ce qui suit  : Source  : Stack Overflow Enfin, une bonne raison de commencer à utiliser les attributs cachés HTML est la transition de Google vers un index mobile-first. Le plus grand avantage SEO de la dissimulation d’éléments est la possibilité de compresser beaucoup de contenu sur une petite page Web mobile tout en offrant une expérience utilisateur fluide. C’est l’équilibre parfait entre le référencement et la conception UX.

Comment utiliser l’attribut caché

il est important de ne pas créer de lien vers l’élément caché à partir d’éléments non cachés. Il s’agit par exemple du cas d’un attribut href lié à une section masquée. Le contenu marqué d’un attribut caché ne devrait pas être pertinent pour l’utilisateur – sinon il ne serait pas caché – et il ne devrait donc y avoir aucune raison de s’y lier. Cependant, dans certains cas, des éléments peuvent toujours être liés à des éléments HTML cachés dans le CSS. Par exemple, certaines descriptions peuvent être pertinentes uniquement si elles sont référencées à partir de l’élément qu’elles décrivent. C’est le cas pour un attribut aria-describeby. Cette description reste masquée jusqu’à ce que l’utilisateur l’appelle activement avec une action spécifique (par exemple, en cliquant dessus ou en la survolant).Avis d’experts  : Un attribut aria-describedby fournit une étiquette descriptive pour un élément dans le même document DOM. Il est important de se rappeler que la modification de l’affichage du style DOM d’un élément HTML masqué remplacera la première commande. En d’autres termes, un élément stylisé comme display : flex sera lu et affiché par les navigateurs même en présence d’un attribut caché.

Contenu caché Mauvaises pratiques que vous devriez éviter

Cacher des éléments est toujours une opération très risquée et peut sérieusement nuire à votre classement. C’est parce qu’il a été largement utilisé comme technique de spam depuis que les moteurs de recherche s’appuyaient sur des algorithmes très simples qui pouvaient être trompés par la répétition de mots-clés. Les sites Web de spam utilisaient souvent des techniques de référencement black-hat. Ils créeraient, par exemple, deux versions de la même page Web, une pour l’algorithme et une pour les visiteurs humains. Cela signifiait que le webmaster écrivait de longs paragraphes absurdes pleins de mots-clés au profit des moteurs de recherche, tandis que les utilisateurs se voyaient proposer une page Web optimisée pour la conversion où le contenu original était caché et inaccessible. Cette pratique créait des situations où les utilisateurs cliquaient sur un lien en pensant qu’il conduiraient à un site Web légitime mais étaient ensuite – à leur grande déception – emmenés ailleurs. Cette pratique était connue sous le nom de cloaking et permettait aux spammeurs d’améliorer leurs ventes de liens d’affiliation ou leurs conversions publicitaires. C’est désormais l’une des nombreuses causes d’une pénalité Google. Noter : L’occultation n’a rien à voir avec l’attribut caché HTML discuté ici.

Comment masquer un élément HTML sans enfreindre les directives de Google

De nos jours, la grande majorité des sites Web comportent des éléments cachés sous la forme d’un onglet sur lequel les utilisateurs doivent cliquer pour accéder à plus de contenu. Le contenu caché ne devient problématique que lorsqu’il est complètement inaccessible à l’utilisateur, il y a donc clairement une grande différence entre le masquage et les éléments cachés HTML accessibles via une action (par exemple, en cliquant sur un bouton Lire la suite). En cas de doute, n’oubliez pas cette règle d’or  : offrez un indice visible qui montre clairement aux utilisateurs qu’il y a plus de contenu sur la page et expliquez comment ils peuvent y accéder. Soyez assuré que si un utilisateur peut voir vos éléments cachés, Google peut également les voir et ne pénalisera pas votre site Web. L’algorithme de Google a parcouru un long chemin depuis la correspondance exacte du texte de ses débuts et il est capable de restituer une page Web à l’aide de fichiers JavaScript et CSS. Les robots Google voient les sites Web presque exactement comme un utilisateur. Concentrez-vous sur une bonne expérience utilisateur et tout ira bien.

Résoudre les problèmes techniques de référencement avec l’audit de site

L’outil Site Audit est votre meilleur allié contre les sanctions de Google. Si vous recherchez des problèmes techniques de référencement, c’est un excellent point de départ. Consultez le rapport sur les problèmes pour connaître les erreurs, les avertissements et les avis que votre site Web rencontre actuellement. Consultez nos directives pour connaître la liste complète des problèmes que l’audit de site peut identifier.Trouvez et corrigez les erreurs de plan de site avec l’outil d’audit de site

Categories: SEO

S’abonner
Notification pour
guest

Commentaires
Commentaires en ligne
Afficher tous les commentaires
0
Nous aimerions avoir votre avis, veuillez laisser un commentaire.x