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

Sephi-Chan

Nouveau WRInaute
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:
<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:
#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

WRInaute impliqué
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 :wink:

++
 

Leonick

WRInaute accro
SuperCureuil a dit:
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

WRInaute impliqué
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 ! :lol:

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

Nouveau WRInaute
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

WRInaute passionné
Sephi-Chan a dit:
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. :wink:
 

Sephi-Chan

Nouveau WRInaute
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

WRInaute occasionnel
Sephi-Chan a dit:
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 :p). 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

WRInaute accro
Sephi-Chan a dit:
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

Nouveau WRInaute
gorchfock a dit:
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 :p). 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. ;)
 

gorchfock

WRInaute occasionnel
Sephi-Chan a dit:
...
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:
<!-- 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 :wink:
 

Pandore

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

Sephi-Chan a dit:
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.

Sephi-Chan a dit:
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.

Sephi-Chan a dit:
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. :p

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:
<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é.

:wink:
 

Sephi-Chan

Nouveau WRInaute
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

WRInaute occasionnel
Sephi-Chan a dit:
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 :wink:
Je pense aussi que ton cas est un cas assez particulier. T'as pas moyen de séparer le texte de l'image ?
:?
 

Sephi-Chan

Nouveau WRInaute
Pas vraiment, j'ai besoin d'un titre joli.
Je ne m'inquiète pas trop pour le référencement, la concurrence sur ce mot clé est presque inexistante. J'imagine que Google ne blacklist pas pour rien. Du moins, c'est ce que j'espère. ;)


Sephi-Chan
 

gorchfock

WRInaute occasionnel
Sephi-Chan a dit:
Pas vraiment, j'ai besoin d'un titre joli.
Je ne m'inquiète pas trop pour le référencement, la concurrence sur ce mot clé est presque inexistante. J'imagine que Google ne blacklist pas pour rien. Du moins, c'est ce que j'espère. ;)


Sephi-Chan

Bah moi perso, je ne cherche pas qu'avoir un titre joli, mais je cherche surtout à avoir un site joli :D

Si ton diz, ton arrière plan est, dès la base, sympathique et séduisant, pourquoi vouloir en rajouter ? regarde ce site -http://www.kazarts.asso.fr (pour l'instant son développement est mis de coté, j'attends les infos du client.)
Bon perso le fond est sympa, j'ai trouvé une typo pour le menu qui se marie bien avec le fond, j'ai pas besoin d'avoir des titres en images.
pour mon site en WWW, on prévoit une refonte graphique assez sympa :p et même la version actuelle n'a pas besoin de titres imagés, non plus.

Il y a une règle que tu dois avoir en tête et ceci pour n'importe quel site, du moins si tu souhaites l'avoir "joli" :lol: :

La beauté réside bien souvent dans les choses les plus simples.

Enfin, cela ne reste que mon opinion bien entendu :wink:
 

Sephi-Chan

Nouveau WRInaute
Je suis d'accord, je veux vraiment un site joli (sinon comment tenter le joueur dès le premier coup d'œil ?), je dois aller à la limite du tape-à-l'œil sans en faire trop non plus. Toutefois, vouloir un titre graphique n'est, je pense, pas une chose que l'on pourrait qualifier d'excessive.

En revanche, je veux un site complet. Le site que tu me montres et celui de ton www manquent à mes yeux (donc c'est mon avis et rien d'autre) justement d'un titre qui apparaisse textuellement sur la page. Sans le CSS dans ton cas, pas de titre. Même si la balise <title /> sert à ça, je trouve bon de le rappeler.

Finalement, c'est un choix personnel et marketing, dans le sens où le jeu doit être accrocheur.

Heureusement, les standards sont suffisemment évasifs pour être interprétés sans être dans le faux.


Sephi-Chan
 

gorchfock

WRInaute occasionnel
Sephi-Chan a dit:
Je suis d'accord, je veux vraiment un site joli (sinon comment tenter le joueur dès le premier coup d'œil ?), je dois aller à la limite du tape-à-l'œil sans en faire trop non plus. Toutefois, vouloir un titre graphique n'est, je pense, pas une chose que l'on pourrait qualifier d'excessive.

En revanche, je veux un site complet. Le site que tu me montres et celui de ton www manquent à mes yeux (donc c'est mon avis et rien d'autre) justement d'un titre qui apparaisse textuellement sur la page. Sans le CSS dans ton cas, pas de titre. Même si la balise <title /> sert à ça, je trouve bon de le rappeler.

Finalement, c'est un choix personnel et marketing, dans le sens où le jeu doit être accrocheur.

Heureusement, les standards sont suffisemment évasifs pour être interprétés sans être dans le faux.


Sephi-Chan

Pour les 2 sites, pour moi, le logo suffit, et pis t'as aussi la balise <title /> qui est un bon rappel.
A une époque sur l'une des versions précédentes de mon WWW, en page d'accueil (qui aujourd'hui est la page des news) tu avais le titre "Le 7'8 en coeur" et sur l'index j'avais fait une horrible bannière (j'ai essayé de reproduire un tuto de photoshop), ça n'apportait rien en plus. (c'était une époque où seule la balise <title /> était systématiquement renseignée).

Et justement, en ce qui concerne mon WWW, aujourd'hui, nous réservons cet espace pour y mettre dessus nos bannières de promo de concerts.
Et comme on est un peu 1er sur "7'8 en coeur" juste devant WRI, on va pas en rajouter une couche :lol:

Après, comme tu le dis, ça dépend du choix de chacun, je pourrai mettre le nom de notre association sur la home du site, mais on trouve que c'est pas forcément utile... le logo est présent et fait office de titre du site, accompagné des balises <title /> cela est pour nous suffisant. :D
 

Discussions similaires

Haut