Faut-il un texte ou une image (avec alt et desc) ?

gcatusse · 7 Juin 2007

Bonjour,

En haut de page, est-il préférable de mettre un texte ou une image avec un "alt" et un "desc" qui contient ce même texte?

Pour le site en question, je préfère mettre une image mais si le texte est meilleur pour le référencement - vu que c'est le début du contenu de la page - je voudrais être sûr.

Merci

frenchhorn · 7 Juin 2007

tu peux mettre un texte dans une <div>
ta div pourra contenir l'image, ca t'evitera de mettre une image dans ta page (pas terrible pour les robots) mais qui sera lisible pour le visiteur

separe le contenu e la mise en page un maximum...ton fichier html/php doit contenir un max de contenu et un min de mise en page, c'est tout l'avantage des .CSS

:arrow: feuilles de style .css

dricos · 7 Juin 2007

tout a fait d'accord. De plus si ton image est un élément de la charte graphique (genre un dégradé ou quelque chose comme ca) en theorie il ne faut pas de balise alt car elle ne sert a rien pour un internaute mal voyant qui utilise a un logiciel spécial. Si tu met des balise alt sur les éléments de ta charte graphique le logiciel lira les balise alt en plus du contenu et l'internaute mal voyant ne comprendra plus très bien la trame du site.
je sais que ce n'est pas indispensable mais il faut penser à l'accessibilité.

Tong · 7 Juin 2007

Le mieux est clairement l'option texte en dur plutôt qu'une image.

Mais si tu souhaites que ton texte soit travaillé graphiquement, et si pourtant il est vraiment important pour ton référencement que google le considère pleinement, alors tu peut opter pour une solution un peu biaisé :

tu superpose grâce à deux div ton texte et ton image de façon à ce que l'image cache le texte.
Google semble l'accepter dans la mesure où tu offre en fin de compte le même contenu au robot qu'a l'internaute.

Mais encore une fois le mieux (et le plus prudent) reste de se contenter du texte en dur.

EDIT : dricos > dans ce cas là, il ne faut pas se passer de balise alt, mais laisser la balise alt vide ( alt=""). Nuance ... :wink:

gcatusse · 7 Juin 2007

je ne suis pas d'accord avec toi Tong! En cachant le texte, c'est le blacklistage assurée! N'oublie pas que les robots ne lisent pas les images. Et que GG déteste le texte caché...
Mon problème est que la page d'accueil du site a très peu de contenu.
Je m'explique:
C'est un site qui est un catalogue de photos. Sur la home, il y a un bandeau flash, le menu et pour seul contenu, un extrait de ce catalogue. donc, le seul texte qui apparait est "détails de l image", "date", "nom de catégorie".
En haut de la page, il y a un encart avec le logo du site et une phrase, un peu le slogan du site.
Je voudrais savoir le plus pertinent:
- mettre un texte - le slogan
- ou mettre une image avec le slogan comme "alt"

Szarah · 7 Juin 2007

Juste après le <body> et avant toute autre chose tu fais une phrase de présentation, concise, que tu mets dans un H1 centré et stylé (pas besoin qu'il soit énorme mais on doit pouvoir le lire) : ton site est décrit.

Marie-Aude · 7 Juin 2007

il y a aussi des méthodes pour "sortir" un texte de l'écran, qui ne sont pas pénalisées par google, comme celles utilisées sur Alsacréations

gcatusse · 7 Juin 2007

Marie-Aude a dit:
il y a aussi des méthodes pour "sortir" un texte de l'écran, qui ne sont pas pénalisées par google, comme celles utilisées sur Alsacréations

lesquelles?? :roll:
ca serait bien d'expliquer, non?

Tong · 7 Juin 2007

gcatusse a dit:
je ne suis pas d'accord avec toi Tong!

Ca a le mérite d'être clair :wink:

Par expérience, ca semble admis. Note que ce n'est pas exactement cacher du texte, c'est plutôt mettre en place un alt un peu plus puissant. Par contre, avec cette solution, il faut du coup laisser vide l'alt de l'image.

Mais faut reconnaitre que c'est un peu borderline.

gcatusse a dit:
Je voudrais savoir le plus pertinent:
- mettre un texte - le slogan
- ou mettre une image avec le slogan comme "alt"

Le plus pertinent je ne sais pas, mais en tout cas le plus performant, c'est, comme l'indique toutes les réponses précédentes, le texte , et cf Szarah

gcatusse · 7 Juin 2007

merci bcp Tong!
Après avoir posté sur différents forums, il en ressort que c est le texte qui a une legere avance sur l image.

milkiway · 7 Juin 2007

frenchhorn a dit:
tu peux mettre un texte dans une <div>
ta div pourra contenir l'image, ca t'evitera de mettre une image dans ta page (pas terrible pour les robots) mais qui sera lisible pour le visiteur

separe le contenu e la mise en page un maximum...ton fichier html/php doit contenir un max de contenu et un min de mise en page, c'est tout l'avantage des .CSS

:arrow: feuilles de style .css

pourquoi utiliser un div alors que l'image est déjà un objet bloc ?
il suffit d'utiliser une image sans div inutile

frenchhorn · 7 Juin 2007

pourquoi utiliser un div alors que l'image est déjà un objet bloc ?
il suffit d'utiliser une image sans div inutile

relis le post, à mon avis une page avec un max de contenu et un min de mise en page (images et autres horribles table) est meilleur pour le referencement

milkiway · 8 Juin 2007

Je le redis mettre une image seule dans un div est absurde et inutile puisque ça surcharge de calques / bloc pour rien.
La balise IMG est elle même un bloc, pourquoi la mettre dans un 2e bloc ?

Et tu mets un texte alternatif et un alternatif long si nécessaire...
Au pire tu ajoutes un title au lien.

@frenchhorn : ton site est sympa par contre le code est à revoir ! Les balises utilisées ne sont pas mauvaises (quoi que pour le tableau...) mais la sémantique n'est pas une fois respectée.

Florent V. · 8 Juin 2007

Bonjour,

Pour corriger deux trois choses :
1 - Non, une image n'est pas un élément de type bloc, mais un élément de type en-ligne ;

2 - Du point de vue de l'accessibilité, la solution la plus accessible est la suivante :

Code:

<h1><img src="monimage.png" alt="Titre de mon site" /></h1>

(Le h1 n'est pas indispensable, ça dépendra du contenu...)
Les solutions qui consistent à cacher du texte brut pour le remplacer par une image de fond appelée via CSS ne sont pas problématiques sont indifférentes pour le référencement par rapport à du texte brut simple (je ne pense pas que quiconque soit pénalisé pour ce genre de « texte techniquement masqué mais visible pour le visiteur via une image »), mais posent toutes l'un ou l'autre problème d'accessibilité. À utiliser en connaissance de cause, donc.

3 - À ma connaissance, il n'y a pas la moindre différence entre du texte brut et le même texte placé comme texte alternatif d'une image. Peut-être une restriction sur la longueur du alt (genre pas plus de 120 caractères) pour éviter le keyword stuffing dans les images ? Mais là, c'est de la pure spéculation.

4 - Y a-t-il une source fiable indiquant que les images avec texte alternatif auraient un impact négatif sur le référencement ? Ça ressemble un peu à une légende de référenceur, ainsi qu'à une accusation d'incompétence crasse contre les moteurs...

En passant, voici le texte mis en cache pour une page dont le titre (h1) est une image avec texte alternatif :
http://209.85.129.104/search?q=cache:8l ... fr&strip=1
Pas de problème à l'horizon pour la bonne indexation du texte alternatif.

frenchhorn · 8 Juin 2007

@frenchhorn : ton site est sympa par contre le code est à revoir ! Les balises utilisées ne sont pas mauvaises (quoi que pour le tableau...) mais la sémantique n'est pas une fois respectée.

je sais mais c'etait mon tout 1er site et je n'ai pas eu temps de le corriger...c'est vrai que le code est tout pourri...

Florent V. · 8 Juin 2007

milkiway a dit:
Je le redis mettre une image seule dans un div est absurde et inutile puisque ça surcharge de calques / bloc pour rien.
La balise IMG est elle même un bloc, pourquoi la mettre dans un 2e bloc ?

Comme dit ci-dessus, c'est une erreur. L'élément img est un élément remplacé de type inline, et se comportera très exactement comme un caractère de texte (avec alignement par défaut du bas de l'image sur la baseline de la ligne de texte).

De plus, avoir un conteneur pour l'image peut permettre certaines modifications de style ultérieures, sans passer par la modification du code HTML. Pas indispensable, mais potentiellement utile.

milkiway · 8 Juin 2007

Oui exact mea culpa <img> est bien de type en ligne !