28172 sujets

CSS et mise en forme, CSS3

Pages :
Question importante à mes yeux et à laquelle j'ai trouvé des réponses contradictoires... Des oui et des non.

Le text-indent:-9999px est-il néfaste ou pas pour le SEO ?

Dans le cas ou cela est mauvais (google apparentant cela à du cloacking), quelles solutions alternatives mettez vous en place ?

:)
Bonjour aussi...

newty a écrit :
Le text-indent:-9999px est-il néfaste ou pas pour le SEO ?
Oui et non.
Non, car, de base le contenu est là.

Oui, car si quelqu'un te dénonce, google risque d'en prendre compte.

Le risque est assez grand.

newty a écrit :
Dans le cas ou cela est mauvais (google apparentant cela à du cloacking), quelles solutions alternatives mettez vous en place ?
Tout dépends du pourquoi la "technique" est utilisée. Si c'est pour cacher des mots clés, alors la seule bonne solution est de ne pas mettre de mots clés et de produire du contenu de qualité. Si c'est pour compenser la perte de contenu d'une image placée en CSS, alors il faut placer l'image dans le code HTML (comme s'aurait du être de base).

La "technique" est également très mauvaise pour l'accessibilité (et pas specialement aux personnes handicapées, mais plutôt au victimes de leur connexion).
De plus, si c'est utilisé pour un lien avec background (afin de ne montrer que le background et non le lien), tu vas te retrouver avec des gros bandeaux en pointillés sous certains nav comme safari au survol du lien... Allant de ton lien à 10k px à gauche !
- cas classique : un logo ou un menu d'images ou les background sont des images. Pour ne pas voir le texte, je fais un text-indent négatif
C'est donc clairement mon second cas.

L'image dans le code HTML, un alt qui va bien, du JS pour l'animation éventuelle.

C'est LA seule bonne solution.
Franchement, je ne sais pas trop...

Tu as par exemple 10 li d'un menu, tu mes les 10 images dans le code html avec un alt ?

De plus, le alt d'une image a un poids moins important qu'un vrai lien avec une ancre.

Le fait que Google pénalise le text-indent (pour des raisons purement graphiques, non pas pour essayer de cacher du texte ou autre), est-ce vraiment prouvé et reconnu ou bien est-ce une légende urbaine ?

Prenons par exemple le logo de la fnac. Leur text-indent les pénalises tu penses ?
Salut,
newty a écrit :
De plus, le alt d'une image a un poids moins important qu'un vrai lien avec une ancre.

Pour le référencement peut-être ; mais, sache que, pour bon nombre d'utilisateurs (malvoyants, aveugles, dyslexiques utilisant un lecteur d'écran en synthèse vocale, utilisateurs constatant que les images ne s'affichent pas pour diverses raisons), cet attribut alt a un poids considérable leur permettant d'accéder à de l'information à laquelle ils ne peuvent accéder autrement.
newty a écrit :
De plus, le alt d'une image a un poids moins important qu'un vrai lien avec une ancre.

Quelqu'un peut me passer un lien d'une étude qui démontre ça?
Je ne dis pas que c'est faux, mais ça me fatigue un peu les recommandations SEO non sourcées. Smiley smile

newty a écrit :
Le fait que Google pénalise le text-indent

Pas à ma connaissance.
Google pénalise des sites utilisant du texte caché «frauduleux», destiné à montrer aux moteurs un contenu différent de celui montré aux visiteurs. À ce que j'ai lu sur le sujet, il n'y a pas de pénalisation automatique, ça passe par un contrôle humain.

Il y a peut-être une pénalisation automatique mais je n'ai rien lu de probant à ce sujet, je n'y crois pas des masses, et là aussi je veux bien lire une étude qui démontre la chose. Proof or it didn't happen.
Il suffit de faire une recherche google sur troufiboulga pour voir que le second lien est également dans les résultat > FAIL pour l'étude.

On en revient au même point...

Pour de la SEO pure, non le text-indent ne gêne pas. Pour tes utilisateurs, par contre, ça peut être extrêmement gênant (désactive les images tout en gardant les CSS, tu sera dans le cas du "et mer** la connec a encore foiré et ne charge pas les images").
Modifié par Laurie-Anne (13 Apr 2011 - 14:27)
ok. Je précise que j'étudie les différentes possibilités qui s'offrent à moi. Je n'ai rien contre vos arguments ; j'essaie de faire la part des choses.

Pour un menu, si j'appelle mes images directement depuis l'html avec une balise alt, il est toujours possible de faire du hover et du sprites css ? (cas ou toutes les images de mon menu sont contenues dans un seul et unique fichier)
Il ne sera plus possible de faire le hover en CSS, mais il faudra le faire en JS.

Pour les sprites, en CSS3, normalement oui.
newty a écrit :

Pour un menu, si j'appelle mes images directement depuis l'html avec une balise alt, il est toujours possible de faire du hover et du sprites css ? (cas ou toutes les images de mon menu sont contenues dans un seul et unique fichier)


Tu peux utiliser une image png transparente de 1x1 pixel à laquelle tu appliques ton alt, et tu places ton visuel en background ainsi tu peux utiliser les sprites et hover en CSS.

C'est la technique que j'utilise pour faire mes smileys et icônes (je l'ai piqué directement à Facebook).
...

Pourquoi compliquer les choses...

Que ce passera-t'il si toutes les images ne sont pas chargées (worst case : les images transparentes sont chargées (faible poids) et pas les autres) ?
Mouah pauvre utilisateur Smiley bawling . Dès que l'utilisateur est mis en infériorité par rapport à des considérations techniques (SEO, CSS & autres), y a des questions à se poser.
Laurie-Anne a écrit :
...

Pourquoi compliquer les choses...

Que ce passera-t'il si toutes les images ne sont pas chargées (worst case : les images transparentes sont chargées (faible poids) et pas les autres) ?


Faire un hover en CSS et utiliser des sprites tu trouves ça plus compliqué que faire la même chose en Javascript et en utilisant de multiples images ? Va falloir que tu m'expliques ta façon de voir les choses.

Sinon pour le chargement des images de faibles poids et pas des autres, dans quel cas de figure ça se produit ?
Modifié par jb_gfx (13 Apr 2011 - 17:54)
jb_gfx a écrit :
Faire un hover en CSS et utiliser des sprites tu trouves ça plus compliqué que faire la même chose en Javascript et en utilisant de multiples images ? Va falloir que tu m'expliques ta façon de voir les choses.


Laurie-Anne se place du côté utilisateur (accessibilité plus exactement) ; là où toi tu réponds facilité technique / optimisation (si c'est comme ça chez Facebook, Google et autres c'est dans cette optique pas par facilité technique ... mais ça tend à se corriger).

Perso, je vois pas en quoi un hover en css est plus simple que des gestionnaires d'événement onmouseover et onmouseout mais c'est un autre sujet Smiley cligne .

Toute approche basée sur des background CSS véhiculant des informations combinés à des mécanismes de "masquage" (display, visibility, text-indent, position) est formellement à proscrire (si on souhaite prendre en compte les utilisateurs). Après pour le SEO, enfin bref ...
jb_gfx a écrit :
Sinon pour le chargement des images de faibles poids et pas des autres, dans quel cas de figure ça se produit ?
Celui déjà expliqué : une connexion faiblarde (pas forcément en terme de "vitesse", mais juste un cable mal branché ou des connectiques externes un peu sales (ce qui m'est déjà arrivé), par exemple), l'utilisation d'un wifi-spot un peu loin ou la 3G. Il y a d'autres cas plus spécifiques certainement, mais ceux-ci sont vraiment communs.
yodaswii a écrit :

Toute approche basée sur des background CSS véhiculant des informations combinés à des mécanismes de "masquage" (display, visibility, text-indent, position) est formellement à proscrire (si on souhaite prendre en compte les utilisateurs). Après pour le SEO, enfin bref ...


Si c'est tout ce qui te dérange, tu peux très bien utiliser les techniques sprites, hover sans utiliser de background CSS.
Modifié par jb_gfx (14 Apr 2011 - 11:35)
jb_gfx a écrit :
Si c'est tout ce qui te dérange, tu peux très bien utiliser les techniques sprites, hover sans utiliser de background CSS.


Je suis curieux d'avoir des exemples Smiley murf . Suis prêt à parier que ça posera le même type de problèmes que ces text-indent et autres folies ...
Modifié par yodaswii (14 Apr 2011 - 12:47)
Pages :