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.
- puis soumettez-le aux index de Google et de Bing.
- Différentes façons de masquer un élément en CSS.
- L'utilisation d'un attribut caché HTML pour masquer des éléments sur n'importe quelle page.
- Rôles et avantages des attributs cachés dans le référencement SEO.
- Astuce pour éviter les pénalités Google tout en offrant une bonne expérience utilisateur.
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
FAQ
Qu'est-ce qu'un attribut en HTML ?
Un attribut en HTML est une information ajoutée à un élément pour lui donner des propriétés spécifiques. Il peut s'agir par exemple de la couleur, de la taille ou du style d'un texte. Les attributs sont souvent utilisés pour améliorer la mise en page et le design d'une page web.
Chaque élément peut avoir plusieurs attributs qui lui sont associés pour le modifier et l'adapter selon les besoins du développeur.
Quel est l'objectif du contenu web en cache ?
Le contenu web en cache a pour objectif principal de permettre une navigation plus rapide et fluide sur internet. En stockant temporairement des données sur l'ordinateur ou le serveur, il évite ainsi le téléchargement multiple des mêmes ressources à chaque visite d'un site.
Ce système améliore également la performance et réduit la consommation de bande passante pour les utilisateurs. L'objectif final est donc de fournir une meilleure expérience utilisateur et de rendre la navigation plus efficace.
Est-ce que tous les éléments en HTML ont des attributs ?
Oui, tous les éléments en HTML ont des attributs. Les attributs sont des informations supplémentaires qui donnent des indications sur la façon de traiter ou de présenter l'élément.
Chaque élément a son propre ensemble d'attributs spécifiques qui lui permettent d'être stylisé et manipulé selon les besoins du créateur de la page web. Sans les attributs, le rendu visuel et le fonctionnement des pages web ne seraient pas possibles.
Les attributs peuvent-ils être limités à une lecture seule ou cachée ?
Les attributs ont pour fonction d'ajouter des informations supplémentaires à un élément. Ils peuvent ainsi être limités à une lecture seule, c'est-à-dire qu'ils ne peuvent pas être modifiés par l'utilisateur. De plus, ils peuvent également être cachés, rendant ainsi leur contenu invisible pour l'utilisateur.
Cela peut être utile pour certaines données sensibles ou confidentielles que l'on souhaite protéger. Les attributs peuvent effectivement être restreints en termes de lecture et de visibilité selon les besoins et les choix du développeur.
En quoi consiste l'attente du cache ?
L'attente du cache consiste à temporiser l'accès à des données, qui sont stockées dans une mémoire temporaire afin d'améliorer les performances de lecture. Cette technique est souvent utilisée dans les ordinateurs pour réduire le temps d'exécution des programmes en évitant de lire constamment les mêmes informations depuis le disque dur.
L'attente du cache permet de diminuer les délais d'accès aux données et ainsi d'optimiser le fonctionnement global du système.
