5568 sujets

Sémantique web et HTML

Bonjour,
sur une page d'accueil sur laquelle je bosse pour un resto, je souhaite mettre une animation (3-4 images qui défilent) et un paragraphe de bienvenue (rien de particulier)
Seulement, je voudrai que l'ensemble tienne dans une certaine hauteur, j'ai donc eu l'idée (je ne sais pas si elle est bonne ... ) de virer le paragraphe, et d'incruster les différentes informations qui y figurent (horaires, le fait que le resto propose la location de sa salle etc...) dans les photos qui défilent.
Mais après réflexion, je me suis dis que ça n'était peut-être pas une si bonne idée, et qu'il valait mieux pour les moteurs de recherche conserver le paragraphe (avec ses mots-clés)
Donc, pour en venir à la question : l'idée maintenant c'est:

mettre le paragraphe en premier dans le code HTML

mettre ensuite mon animation (les photos de l'établissement avec les informations)

enfin, mettre un "display:none;" pour le paragraphe dans les css pour ne pas le faire apparaitre

Est-ce-que le fait de faire ça ne pénalise pas le référencement (je ne pense pas, les moteurs verront quand même mon code HTML ...) ? Et est-ce-que c'est une bonne façon de faire ? ( ... ou une bidouille de novice que je suis !)

Vous en pensez quoi ? merci pour vos réponses ...
Tu es loin du compte: ça te pénaliserait énormément.

Les moteurs lisent tout, mais ne tiennent compte que de ce qui est montré à l’internaute. Tout le reste, c’est de la trich, et ça va te pénaliser. Display: none et visibility: hidden sont donc à proscrire, tout comme du texte blanc sur fond blanc (par exemple).

Sinon, l’alternative textuelle d’une image est également prise en compte par les moteurs, donc tu peux t’en servir pour indexer tes contenus assez facilement — sans en abuser évidemment.

Tu devrais te renseigner sur les solutions de diaporamas qui existent, car il y en a beaucoup qui permettent d’associer textes et images dans le même diaporama, tout en dispensant des contrôles pour les utilisateurs (Cycle2 notamment est très puissant, c’est un plugin jQuery).

À noter que si tu mets en place un défilement automatique, il faut impérativement que l’utilisateur puisse le stopper facilement Smiley cligne
Bonjour djema,

Il peut s'avérer bon de penser aussi à l'accessibilité et pas seulement au référencement.

Si tu maintiens ton envie de stocker l'information dans les images, il est indispensable de faire un bon usage de l'attribut "alt", essentiel pour la lisibilité des personnes malvoyantes. Quand je dis "bon usage", c'est restituer l'ensemble de l'information lisible sur les images à travers le contenu de tes "alt", tout en songeant que tu dois te limiter pour ceux-ci à 80 caractères.

Maintenant, je ne sais pas la réaction d'un lecteur d'écran (dispositif pour les personnes malvoyantes) face à un contenu textuel caché (display none ou visibility hidden)... J'imagine qu'il doit voir et transmettre ce contenu, cette idée n'est donc peut-être pas jetable, en termes d'accessibilité uniquement.

Enfin, si tu ne t'en remets qu'aux alt pour référencer ton contenu, j'ai dans l'idée que ce ne sera pas top non plus, car sans appel aux balises structurantes (h1, h2, h3, notamment) qui permettent d'apporter un poids/pondération à tes mots-clés.
Veiller à garder une mention telle que "horaire" en titre peut, je crois, s'avérer judicieux Smiley smile .

Sinon, c'est très "in" d'animer son contenu, mais les plugins jQuery (tels que fancy zoom, lightbox et ce genre de gadgets) posent souvent des problèmes d'accessibilité également Smiley cligne ...
Modifié par Reka (11 Feb 2014 - 11:25)