5568 sujets

Sémantique web et HTML

Vous choisiriez quoi ? xhtml/ref/js/ergo

Bonjour,

J'ai fait trois cas pratique, et je m'interroge sur lequel serait le plus pertinent.

J'ai posté ça sur le bar parce que ça mélange un peu tous les sujets, structure html, référencement, accessibilité, js, ergonomie.

D'ailleurs je me demande vraiment s'il va y avoir un consensus, en sachant que le référenceur et l’ergonome opteront peut etre pour le cas 1, l'intégrateur le cas 2 ou 3, et le patron démerdez vous tant que ça marche.

Cas 1 : 
<a href="lien-pertinent.html">
<h4>Ceci est un titre très pertinent</h4>
<img src="img/test-case-referencement.png" alt="test case referencement" />
<p>
Ceci est un texte descritif avec des mots importants en terme de référencement.
</p>
<span>En savoir plus ?</span>
</a>

Cas 2 : 
<div>
<h4>Ceci est un titre très pertinent</h4>
<img src="img/test-case-referencement.png" alt="test case referencement" />
<p>
Ceci est un texte descritif avec des mots importants en terme de referencement.
</p>
<a href="lien-pertinent.html">Faire prendre de poids à mon lien</a>
</div>

cas 3 : 
<div class="links-div">
<h4>Ceci est un titre très pertinent</h4>
<img src="img/test-case-referencement.png" alt="test case referencement" />
<p>
Ceci est un texte descritif avec des mots importants en terme de referencement.
</p>
<a href="lien-pertinent.html">Faire prendre de poids à mon lien</a>
</div>

$(document).ready(function(){
$(".links-div").click(function(){
location.href=$(this).children("a").attr('href');
}).css('cursor', 'pointer').hover(
function () {
$(this).css('background-color','#AEDAE5');
},
function () {
$(this).css('background-color','#CCDDCC');
});
});


Quel serait votre avis là dessus, et la pratique que vous personnellement vous utiliseriez ?
J'aimerais savoir aussi si niveau accessibilité le cas 1 vous semble problématique.

Le lien de la page de test est ici http://cherche.job.59.free.fr/referencement.html
Modifié par rs459 (01 Mar 2011 - 21:07)
Salut,

Pour ma part, j'opterais pour le cas 2 et l'améliorerais comme suit :
<div> 
<hN>Ceci est un titre très pertinent</hN>
<!-- N à remplacer par 1 à 6, selon le contexte de la hiérarchie des titres -->
<img src="img/test-case-referencement.png" alt="" />
<!-- alt vide si l'image n'est que décorative et n'apporte aucune information supplémentaire -->
<p> 
Ceci est un texte descritif avec des mots importants en terme de referencement. 
</p> 
<p><a href="lien-pertinent.html">Faire prendre de poids à mon lien</a></p>
<!-- Le dernier lien dans un paragraphe -->
</div>
En fait ce qui m’ennuie avec le cas 2, (ce n'est pas visible sans le css) c'est que j'ai pas d'effet de hover sur la div, ce que je pourrais rajouter dans le css mais ca n'aurait aucun sens "ergonomiquement" parlant puisque qu'elle reste non-cliquable, et en terme de référencement comme pour le numéro trois ca peut être préjudiciable.

Pour le alt de l'image oui tout dépend de l'image et de son utilité.

Pour le <p> plus facilement modifiable via css ?

Dans un page avec un niveau de profondeur élevé , ou n'ayant pas pour but de mener vers des sous-catégories du site. Le cas 2 ou 3 me semble pertinent et logique, mais pour une landing page nécessitant une optimisation SEO ?
Modifié par rs459 (01 Mar 2011 - 21:23)
On va dire salon HTML quand même. Smiley smile

Je préfère:
<hn><a>
  Mon titre
  <img alt="">
</a></hn>
<p>Hop.</p>

Le même en HTML5:
<a>
  <hn>Mon titre</hn>
  <img alt="">
</a>
<p>Hop.</p>

Et à la rigueur, en HTML5 et si vraiment les paragraphes sont courts:
<a>
  <hn>Mon titre</hn>
  <img alt="">
  <p>Hop.</p>
</a>

Mais je suis pas fan du clic sur toute la zone (y compris le texte de description qui souvent ne ressemble pas à un lien -- sinon ça fait trop chargé visuellement -- et n'est donc pas affordant au clic).

Et dans tous les cas, pas de répétition du lien en bas.
Enfin, si on tient à mettre une répétition du lien en bas:
<a>
  <hn>Mon titre</hn>
  <img alt="">
</a>
<p>Hop.</p>
<p><a>Paf, re-lien</a></p>


Pour finir, le clic sur toute la zone en JavaScript, c'est un moindre mal si vraiment on n'a pas le choix. Sauf que ça marchera pas, sur les zones qui sont pas vraiment des liens, avec le clic-molette ou autre subtilité qui ne déclenche pas d'évènement clic (ou au contraire ça va pirater l'ouverture dans un nouvel onglet pour ouvrir dans la page en cours, pas glop non plus).
En passant: les styles CSS appliqués en JS, c'est le mal.
Tu peux juste utiliser :hover en CSS, c'est bien aussi. Ou alors rajouter une classe sur le conteneur lors du survol, si vraiment on doit assurer le support d'IE6.
Merci à vous deux,

Le cas numéro 1 que je pensais non valide l'est en fait en HTML5 , néanmoins subsiste un problème de cohérence en terme d’accessibilité.

Si je laisse le span qui permet d'apporter une affordance visuelle, un lecteur voix ou braille ne comprendrait pas son sens par contre.

Si je l’enlève je retire un repère essentiel, pour les moins aguerris, qui ne verraient pas que le curseur et la couleur de fond de la zone ont changés. Voir même simplement ceux qui ne voyant rien d'affordant ne passeraient pas le curseur par dessus la zone.

Donc le cas 1 si il n'est pas possible de faire des concessions en référencement, tout en rendant le titre <hn> plus affordant. (c'est le design qui en pâti) ou les exemples de florent, qui nécessitent eux aussi d’alourdir le design pour rendre le tout affordant. (le choix avec une redondance de lien en terme de référencement bof bof)

Le cas 2 fait perdre de l'expérience utilisateur, pas de hover sur la zone, plus obligation d'aller chercher le tout petit lien en bas. Mais reste une valeur sûre et permet une liberté dans le design.

Le cas 3 que j'ai corrigé comme ceci (séparation style//contenu): 

<div class="links-div">
<h4>Ceci est un titre très pertinent</h4>
<img src="img/test-case-referencement.png" alt="test case referencement" />
<p>
Ceci est un texte descritif avec des mots importants en terme de referencement.
</p>
<a href="lien-pertinent.html">Faire prendre de poids à mon lien</a>
</div>

$(document).ready(function(){
$(".links-div").click(function(){
location.href=$(this).children("a").attr('href');
}).hover(
function () {
$(this).addClass('fake-hover');
},
function () {
$(this).removeClass('fake-hover');
});
});


Lui permet de concilier les 2, liberté dans le design, expérience utilisateur préservée avec un bémol concernant javascript qui selon les versions de navigateurs ne prend pas le clic molette, et bien sur tout en perdant le coté référencement.

PS : excusez moi j'ai mis xhtml dans le titre c'était plutot html5 que j'aurais du mettre.
Modifié par rs459 (02 Mar 2011 - 21:02)
rs459 a écrit :
le choix avec une redondance de lien en terme de référencement bof bof

On veut les preuves. Smiley smile
fvsch a écrit :

On veut les preuves. Smiley smile


Tu perds l'occasion de diffuser du page-rank sur d'autres liens non ?
C'est vrai que le référencement c'est loin d'être une science exacte, (heureusement pour la neutralité d'ailleurs).

Y'a un autre point qui peut être déroutant dans le cas d'un doublage de lien, c'est le lecteur voix/braille qui entendra/lira deux fois et qui pourrait se sentir perdu (perte de temps, quel lien je choisis ?).

Si on omet ce "défaut" d’accessibilité, des récentes techniques prouvent à montrer qu'en utilisant une ancre, c'est possible de faire deux liens, pour au contraire faire gagner du PR à la page cible, tout en se positionnent sur 2 mots clefs Smiley smile

http://blog.axe-net.fr/ancres-multiples-referencement-test-seo/

Il y a un autre site mais je ne l'ai pas retrouvé.

Aprés comme toujours, tout est à voir au cas par cas, en fonction des contraintes du projet.
rs459 a écrit :
Y'a un autre point qui peut être déroutant dans le cas d'un doublage de lien, c'est le lecteur voix/braille qui entendra/lira deux fois et qui pourrait se sentir perdu (perte de temps, quel lien je choisis ?).

Les retours que j'ai eu à ce sujet étaient plutôt «bof ça va, c'est pas vraiment un soucis». En lecture linéaire du contenu, ça ne posera pas de problème. En mode liste de liens, il me semble que les versions un peu récentes de JAWS ne lisent pas le deuxième lien.

Merci pour l'article sur la prise en compte de deux intitulés de liens différents pointant vers une même page. Par contre je trouve dommage que le test effectué ne porte pas aussi sur le cas de deux liens à l'intitulé différent pointant vers la même URL (dans la même chose sans les ancres). Vu qu'il trouve des résultats différents de ce qu'affirme (ou avait testé auparavant) SEOMOZ, ça valait peut-être le coup d'être plus complet dans les tests.

(Dans les tests SEO, la création de tests témoin me semble rare. C'est dommage. Pas mal de référenceurs qui publient des résultats de tests devraient bosser les fondamentaux de la méthode scientifique. Smiley smile )
Sujet clos
Aller à