Cacher du texte pour la présentation nuit-il à l'indexation?

[Sephi-Chan]

Bonjour à tous,

Je suis nouveau sur ce forum. Je m'y suis inscrit puisque je serais bientôt amené à référencer un jeu par navigateur et je m'intéresse donc beaucoup aux techniques et surtout aux erreurs à ne pas faire. Même si je ne risque pas d'avoir trop de concurrence sur le créneau que j'exploite.

Voici donc mon problème : sur la plupart de mes sites, j'utilise un titre graphique, de cette manière :

Code: Tout sélectionner

<h1 id="header"><a href="index.php?p=home" title="Aller à la page d'accueil"><span>TitreDuSite</span></a></h1>

Et le CSS associé :

Code: Tout sélectionner

#header a {
   display: block;
   width: 500px;
   height: 100px;
   background: url('titreDuSite.png') no-repeat;
}
   
#header a span {
   display: block;
   text-indent: -9999px;   
}

Cette technique me permet d'avoir un titre graphique qui, au clic, ramène à l'accueil du site. Je préfère cette manière de faire à celle qui consiste à utiliser une balise <img /> avec l'attribut alt qui convient.

Mais voilà, cette méthode peut être considérée, à juste titre, comme du masquage de texte, pratique déconseillée par Google. Je voulais donc savoir si ça posait un problème au niveau du référencement.

J'espère que vous pourrez me répondre et vous en remercie d'avance,


Sephi-Chan

[SuperCureuil]

Salut et bienvenue à toi,

A cette échelle ça n'est pas perçu comme une tromperie je pense, par contre point de vue accessibilité ça craint

++

[Leonick]

Salut et bienvenue à toi,

A cette échelle ça n'est pas perçu comme une tromperie je pense,

je pense le contraire.
Car le lien n'est pas accessible aux visiteurs, vu que le seul texte est en dehors de la page, donc le href est inopérant.
Et cacher du texte aux visiteurs pour ne le montrer qu'au moteurs, gg n'aime pas

[SuperCureuil]

Huhu, je n'avais pas vu que le texte était caché en dehors de la page, et pas par un visibility:hidden ou un display:none comme avec la méthode FIR ! A ce moment c'est effectivement plus problématique !

Par contre, la méthode FIR est pas mal utilisée sur les sites à vocation graphique ou visuelle, et dans ce cas précis, c'est clair que c'est du texte caché mais pas dans le but de tromper, juste dans un souci d'esthétique, et ce n'est pas pénalisé.

Par contre pour les navigateurs texte ça reste un problème.

++

[Sephi-Chan]

Je ne comprends pas le problème en terme d'accessibilité (cette technique est d'ailleurs issue du livre de Raphael Gotter, le webmaster d'Alsacréations) et en terme de navigateur texte.

Par exemple, dans cet article, Alsacréations - Réalisation d'un design complet (XHTML / CSS) en 5 étapes, c'est la technique utilisée. Je doute que R. Gotter utilise une solution qui n'est pas accessible.

Cela permet d'avoir un titre graphique qui pointe vers l'accueil. Pour moi le titre n'a pas sa place dans une balise <img /> mais dans un <h1 />. Ensuite, l'image n'a pas une vocation de contenu mais de présentation, elle doit donc passer en image de fond.

J'aimerai donc qu'on m'explique où je fais erreur,

Je précise que le décalage par le text-indent peut être remplacé par un visibility: hidden;.


Sephi-Chan

[Pandore]

Ensuite, l'image n'a pas une vocation de contenu mais de présentation, elle doit donc passer en image de fond.

Pas obligatoirement non plus. C'est une possibilité de faire. On peut tout aussi bien mettre une image à condition d'y associer un attribut alt vide.

[Sephi-Chan]

Je trouve ce procédé étrange. La sémantique est, à mon sens, au dessus de tout. Les balises titres sont faîtes pour faire les titres alors les images sont là pour afficher des images de contenu. Si on leur renseigne un attribut alt vide, on court encore plus vers le non-sens.

Voilà pourquoi je pose cette question quant au référencement, je la méthode utilisée meilleure en tout point (sinon, je ne l'utiliserai pas) mais je me demande si Google est bien conçu au point de ne pas considérer le titre du site comme du contenu supplémentaire caché (et potentiellement frauduleux).


Sephi-Chan, joyeuses fêtes !

[gorchfock]

Je trouve ce procédé étrange. La sémantique est, à mon sens, au dessus de tout. Les balises titres sont faîtes pour faire les titres alors les images sont là pour afficher des images de contenu. Si on leur renseigne un attribut alt vide, on court encore plus vers le non-sens.

Voilà pourquoi je pose cette question quant au référencement, je la méthode utilisée meilleure en tout point (sinon, je ne l'utiliserai pas) mais je me demande si Google est bien conçu au point de ne pas considérer le titre du site comme du contenu supplémentaire caché (et potentiellement frauduleux).


Sephi-Chan, joyeuses fêtes !

Pour moi ce que je trouve étrange c'est l'intérêt de ce genre de titre. Pour moi un titre c'est du texte dans une balise <h1>....</h1> (balise qui peut-être modifier à loisir et où tu peux mettre une image en arrière plan grace au CSS) et pas une image.
Les titres tout-images, je ne sais pas, mais bon c'est pas trop de mon gout. Je préfère séparer le fond de la forme, ou si vous préférer le contenu du contenant. Pour moi texte du titre = contenu et l'image c'est le contenant.
Là je ne suis pas très d'accord avec la méthode de R. Gotter (pour une fois ). Si aujourd'hui c'est pas pénalisant en terme de référencement et positionnement, demain ça le sera, et pour les mêmes causes que les mots-clé cachés.

[HawkEye]

Pour moi le titre n'a pas sa place dans une balise <img /> mais dans un <h1 />.

Pour moi le contenu du <h1> d'une page n'a pas à constituer un lien vers la home du site.

C'est le titre de premier niveau du document: il se rapporte exclusivement au document !

[Sephi-Chan]

Pour moi ce que je trouve étrange c'est l'intérêt de ce genre de titre. Pour moi un titre c'est du texte dans une balise <h1>....</h1> (balise qui peut-être modifier à loisir et où tu peux mettre une image en arrière plan grace au CSS) et pas une image.
Les titres tout-images, je ne sais pas, mais bon c'est pas trop de mon gout. Je préfère séparer le fond de la forme, ou si vous préférer le contenu du contenant. Pour moi texte du titre = contenu et l'image c'est le contenant.
Là je ne suis pas très d'accord avec la méthode de R. Gotter (pour une fois ). Si aujourd'hui c'est pas pénalisant en terme de référencement et positionnement, demain ça le sera, et pour les mêmes causes que les mots-clé cachés.

Je suis entièrement d'accord sur le concept de séparation.

Prenons par exemple les pages de WRI. On peut voir que le Webmaster a choisi d'utiliser une image pour faire office de titre graphique, ce qui peut donc s'apparenter à une erreur : on devrait avoir un <h1 /> pour ce titre principal puisque c'est de cela qu'il s'agit : ce n'est pas une simple image de contenu.

Dans mon cas, j'ai un titre <h1 /> que j'ai choisi de faire pointer vers ma page d'accueil pour des raisons de pratique évidentes (d'ailleurs WRI le fait aussi, tout comme nombre d'autres sites : on revient à l'accueil en cliquant sur le titre du site). Je place en arrière-plan une version graphique de mon titre. Ensuite, il faut tout de même enlever le texte du titre, sinon c'est moche donc je le masque en le décalant vers la gauche de l'écran.

Je conserve ainsi toute ma sémantique et j'y ajoute de l'esthétique : la séparation fond et forme est bien là. Si les CSS ne sont pas activés (lecteur de contenu par exemple), le visiteur voit le titre textuel, si les CSS sont activés, le visiteur voit le titre graphique.

Donc en effet, pour en revenir au problème initial, je risque d'être pénalisé avec cette méthode, qui pourtant joint esthétique et sémantique. J'espère tout de même que GoogleBot fait la part des choses entre des mots clés cachés et un titre masqué.


Sephi-Chan, il y à un moment pour tout : respecter les standards ou faire plaisir à Google.

[Olivier Duval]

http://www.google.com/support/webmaster ... swer=66353

[gorchfock]

...
Prenons par exemple les pages de WRI. On peut voir que le Webmaster a choisi d'utiliser une image pour faire office de titre graphique, ce qui peut donc s'apparenter à une erreur : on devrait avoir un <h1 /> pour ce titre principal puisque c'est de cela qu'il s'agit : ce n'est pas une simple image de contenu.
...

alors là, je viens de vérifier et si on parle bien du logo en haut à gauche, sur la page d'accueil (et les autres pages du site), le titre est bien en <h1 /> avec un texte en clair à coté du logo (logo qui doit être intégré dans l'image du fond qui constitue le diz du site).
Sur le forum, tu n'as pas de <h1 /> et pas de texte cacher (voir bout de code en-dessous) car le Webmaster n'as pas juger utile de mettre un titre.
Ce que tu vois c'est le logo de WRI, qui donc est une image avec un lien retour vers l'accueil. Ce qui est je dirai parfaitement normale.

Code: Tout sélectionner

<!-- sur le forum : -->
      <div><a href="/" tabindex="1" title="[1] Retour à l'accueil du site WebRankInfo" accesskey="1"><img src="/images/wri/webrankinfo.png" style="width:92px; height:92px; float:left; margin: 0 25px 0 0;" alt="R&eacute;f&eacute;rencement" /></a>
      </div>

<!-- sur le reste du site : -->
      <h1> <a href="/" tabindex="1" title="[1] Retour à l'accueil du site WebRankInfo" accesskey="1">
        R&eacute;f&eacute;rencement :<br />
        conseils, outils, actualit&eacute;, forum<br />
        tout &ccedil;a gratuit !</a>
      </h1>


@Olivier Duval : merci pour le lien, il confirme ce que je disais précédemment...

EDIT :Je rajoute juste une dernière chose : un logo est un logo et un titre est un titre

[Pandore]

J'ai sans doute été un peu vite en besogne dans ma réponse. On reprend.

La sémantique est, à mon sens, au dessus de tout. Les balises titres sont faîtes pour faire les titres

Oui, on est d'accord.

alors les images sont là pour afficher des images de contenu.

Non, pas forcément. Sémantiquement parlant, la balise "img" est faite pour afficher une image tout court, que ce soit du contenu ou pour la décoration.

Si on leur renseigne un attribut alt vide, on court encore plus vers le non-sens.

Non, pas de non-sens mais une manière normale d'utiliser l'attribut "alt " en fonction de la nature de l'image.

Allez un peu de lecture utile sur la question : Bien utiliser le texte alternatif - source Pompage.net

Ce que je voulais dire un peu trop rapidement et de manière trop générale, c'est que si l'image est à but décoratif, on peut soit utiliser la méthode css en y mettant un background-image mais que l'on pouvait aussi utiliser une balise "img" avec un attribut "alt" vide. Il est bien évident que si l'image est à but de contenu, il faut remplir convenablement son attribut "alt". J'espère que c'est plus clair à présent.

Ceci dit, perso, je préfère éviter ce genre d'artifices, quelque soit la méthode employée, pour les raisons qui ont déjà été évoquées et faire des titres "normaux". Exemple :

Code: Tout sélectionner

<h1>titre en dur</h1>

Surtout c'est plus que limite point de vue accessibilité : taille du texte non redimensionnable (vu que c'est une image), texte qui peut-être difficile à lire pour certaines personnes si il est trop stylisé.

[Sephi-Chan]

Tout d'abord, merci à tous pour vos interventions.

J'étais justement venu poser ma question suite à la lecture de l'article sur les textes et liens cachés de la FAQ Google.

Je sais donc maintenant que ma technique risque effectivement de me poser quelques soucis de référencement, bien que l'article Google précise qu'un lien caché est une tentative de tromperie de GoogleBot, ce qui n'est pas le cas.

Ma remarque sur le non-sens de l'attribut vide concernant l'utilisation d'une balise image pour le titre, j'avais en fait mal compris que tu parlais d'images décoratives. J'avais pu lire l'article de Pompage.net il y a quelques temps. Y jeter de nouveau un œil ne peut pas me faire de mal.

Pour les titre en dur, effectivement c'est l'idéal, mais sur un site (en l'occurrence un jeu par navigateur, donc) qui doit avoir une certaine identité graphique, ce n'est pas vraiment applicable. Il existe en effet une petite lacune en terme d'accessibilité puisque le titre n'est pas redimensionnable, merci de l'avoir soulignée. Notons toutefois que la typographie de l'image d'un titre se doit d'être assez grosse et lisible, c'est généralement le cas, heureusement.

Et désolé pour la confusion concernant le logo de WRI.


Sephi-Chan

[gorchfock]

Tout d'abord, merci à tous pour vos interventions.

J'étais justement venu poser ma question suite à la lecture de l'article sur les textes et liens cachés de la FAQ Google.

Je sais donc maintenant que ma technique risque effectivement de me poser quelques soucis de référencement, bien que l'article Google précise qu'un lien caché est une tentative de tromperie de GoogleBot, ce qui n'est pas le cas.

Ma remarque sur le non-sens de l'attribut vide concernant l'utilisation d'une balise image pour le titre, j'avais en fait mal compris que tu parlais d'images décoratives. J'avais pu lire l'article de Pompage.net il y a quelques temps. Y jeter de nouveau un œil ne peut pas me faire de mal.

Pour les titre en dur, effectivement c'est l'idéal, mais sur un site (en l'occurrence un jeu par navigateur, donc) qui doit avoir une certaine identité graphique, ce n'est pas vraiment applicable. Il existe en effet une petite lacune en terme d'accessibilité puisque le titre n'est pas redimensionnable, merci de l'avoir soulignée. Notons toutefois que la typographie de l'image d'un titre se doit d'être assez grosse et lisible, c'est généralement le cas, heureusement.

Et désolé pour la confusion concernant le logo de WRI.


Sephi-Chan

No soucis
Je pense aussi que ton cas est un cas assez particulier. T'as pas moyen de séparer le texte de l'image ?