Téléchargé 119 fois
Contenu connexe
Similaire à Accessibilité et référencement - Paris Web 2010
![[Chambé-Carnet] L'accessibilité au service du référencement naturel](https://cdn.slidesharecdn.com/ss_thumbnails/laccessibilitauservicedurfrencementnaturel-110308015030-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Accessibilité et référencement - Paris Web 2010
- 1. Référencement & utilisabilité:des objectifs différents,des méthodes quiconvergent Sébastien Billard, consultant référencement
- 2. Partis-prisLes WCAG 1.0et la version 1.1 des critères Accessiweb seront pris comme référence, car mieux connus du conférencier ;)
- 3. HTML 5 nesera pas abordé, car non finalisé.
- 4. Les termes « accessibilité »et « utilisabilité » pourront des fois (abusivement) être utilisés l’un à la place de l’autre.DéfinitionsRéférencement : ensemble des techniques visant à maximiser la visibilité dans les résultats naturels des moteurs de recherche.
- 5. Accessibilité web :ensembles des techniques visant à assurer l’accès aux contenus web pour les personnes handicapées.
- 6. Utilisabilité web :ensembles des techniques visant à maximiser l’efficacité, l’efficience et la satisfaction des utilisateurs.Référencement et utilisabilitéSelon Peter Morville, la trouvabilité (findability) désigne la capacité des utilisateurs à identifier un site et à naviguer en son sein pour accéder à l'information recherchée.
- 7. La trouvabilité dansles moteurs participe à une bonne utilisabilité générale du web (efficacité, efficience, satisfaction).
- 8. Travailler son référencement,c’est donc travailler à l’utilisabilité de son site, alors même que l’utilisateur n’a pas encore accédé à celui-ci.Mais le référencement, comment ça fonctionne au juste ?
- 9. Ce qui conditionnele référencementL'ensemble de ces composantes doit être optimisé pour obtenir une bonne visibilité :Directives d’accessibilité et référencement
- 10. « Fournissez un équivalenttextuel à chaque élément non textuel (1.1) »
- 11. Les moteurs derecherche ne savent lire que le texte (cliché du robot handicapé…)
- 12. L’attribut alt permetd’associer du texte aux images, qui sera pris en compte par les moteurs, aussi bien pour la recherche web que la recherche d’images.
- 13. L’attribut longdesc permetd’associer à une image une page de description, mais il est ignoré des moteurs. Préférer une légende dans ce cas.L’attribut alt est déterminant pour la visibilité des images
- 14. Attention : lesimages peuvent constituer une information, ou un simple embellissement. L’attribut alt sur une image purement décorative n’a de sens ni pour l’accessibilité ni pour le référencement. De même pour les attributs alt « hors sujet » .Une puce n’est pas une information…L’attribut alt n’est pas une planque à mots-clés…
- 15. Il n’y apas que les images…Les équivalents textuels concernent aussi d’autres éléments.
- 16. Scripts et applets: les balises <noscript>, <noembed>, le contenu alternatif des balises <object> sont bien pris en compte par les moteurs.
- 17. Frames : lecontenu des balises <noframe> est bien pris en compte par les moteurs (mais utiliser les frames pose d’autres problèmes…)
- 18. Vidéo et audio: le mieux reste de fournir un transcript, éventuellement un résumé ou une description.Contenu alternatif pour les balises <embed>Contenu alternatif pour les éléments multimedias
- 19. « Fournissez desliens textes redondants pour chaque région d’une carte cliquable côté serveur (1.2) »« Fournissez des liens textes redondants pour chaque région d’une carte cliquable côté client (1.5) »
- 20. Les images mapscoté serveur sont inaccessibles aux moteurs de recherche. Les liens HTML alternatifs sont le seul moyen de permettre le référencement des pages liées.
- 21. Les images mapscoté client sont accessibles aux moteurs de recherche, mais les liens n’ont pas d’ancres. Les attributs alt sont nécessaires pour donner de la pertinence aux liens.Les liens href sont suivis et le contenu des attributs alt pris en compteLes moteurs ne cliquent pas…
- 22. « Utilisez desbalises plutôt que des images pour transmettre l’information (3.1) »
- 23. Le texte HTMLest à privilégier autant que possible.
- 24. Exploitez les possibilitéstypographique des CSS.
- 25. Utilisez des techniquesaccessibles de remplacement de textes (sIFR).
- 26. Commentez les contenusgraphiques.Exemples de remplacement dynamique de textes
- 27. « Créez desdocuments valides (3.2) »
- 28. Il n’y apas de prime à la validation.
- 29. La validité n’estpas liée à la pertinence.
- 30. La validité n’estpas l’accessibilité.
- 31. Toutefois la validitéprotège de quelques erreurs de codage qui pourraient affecter les moteurs (quoique ceux-ci sont tolérants).« Utilisez CSS pour contrôler la mise en page et la présentation (3.3) »
- 32. Il est parfaitementpossible de positionner un site avec de la « soupe de balise »
- 33. CSS permet toutefoisd’alléger les pages et d’accélerer leur chargement, ce qui est favorable à une bonne indexation.
- 34. Google a égalementannoncé prendre en compte la vitesse de chargement des pages dans son algorithme.« Utilisez les éléments de titres pour exprimer la structure des documents (3.5) »« Balisez les listes et élements de façon adéquate (3. 6) »
- 35. Les balises dites« sémantiques » sont bien prises en compte par les moteurs et aident les moteurs à appréhender le contenu.
- 36. Le contenu desbalises <h1> à <h6> et des balises <b> et <strong> en particulier se voit reconnaître une importance particulière.
- 37. <h1> <strong>Ne cédezpas au détournement de balises !</strong> </h1> « N'utilisez pas de tableaux de mise en page sauf si le contenu fait sens une fois linéarisé (5.3) »
- 38. Le contenu destables est techniquement accessible aux moteurs.
- 39. Mais les tableauxde mise en page mal utilisés peuvent obscurcir le contenu, pour les moteurs comme pour les visiteurs.
- 40. L’imbrication (des tablesdans des tables dans des tables dans…) est potentiellement la plus destructrice.Linéarisation« Ceci une phrase est »Imbrication
- 41. « Assurez-vous queles pages restent utilisables quand les scripts, applets etc sont désactivés (6.3) »
- 42. Les robots desmoteurs sont très limités : ils n’interprètent pas Javascript, ni AJAX et ne sont équippés d’aucun plugin (Flash…)
- 43. Sans contenu alternatif,un site Flash est un site vide pour un moteur.
- 44. Un site utilisantjavascript peut être plus ou moins accessible, selon que javascript vient en surcouche ou non (dégradation élégante).Ce que voit l’utilisateur valide (s’il a Flash)Ce que voit le moteur (c’est à dire pas grand-chose)
- 45. « N'utilisez pasdes balises pour rediriger les pages automatiquement. Utilisez des redirections coté serveur (7.5) »
- 46. Il existe 2types de redirections : coté client (meta refresh, javascript), et coté serveur.
- 47. Seules les redirectionscoté serveur sont correctement suivies par les moteurs (la 301 étant la seule transmettant du PageRank).« Identifiez clairement la destination de chaque lien. (13.1) »
- 48. Les liens transmettentde la popularité (PageRank), permettent le parcours du site par les robots… mais sont aussi porteurs de pertinence.
- 49. Les moteurs considèrentles intitulé (ancres) des liens comme un signal. Il est donc important d’y faire figurer des mots-clés.La page Adobe ne contient pas l’expression « click here »…
- 50. « Fournissez desmeta-données pour ajouter de l’information sémantique aux pages et aux sites . (13.2) »
- 51. La balise <title>,élément obligatoire , est particulièrement valorisée par les moteurs de recherche.
- 52. Les balises metane comptent plus pour le positionnement. Mais le contenu de la balise <meta> description peut être affiché dans les résultats des moteurs.
- 53. Certaines meta donnéesparticulières (microformats) peuvent parfois être exploitées par les moteurs. Ex : RDFa.« Fournissez de l'information sur l'organisation générale du site (13.3) »
- 54. Les plan desite sont une très bonne chose pour le référencement : ils participent à propager la popularité, et sont autant de liens explicites.
- 55. Ils peuvent êtreune alternative à une navigation non accessible (bien que des menus accessibles restent préférables).« Fournissez des menus de navigation (13.5) »
- 56. Les menus denavigation en formant une arborescence permettent l’indexation en profondeur des sites.
- 57. Ils permettent égalementde diffuser la popularité vers les pages profondes (souvent les plus utiles).« Placez l'information importante au début des titres, paragraphes, listes etc. (13.8) »
- 58. Les titres sontvalorisés par les moteurs. Y placer l’information essentielle est donc capital.
- 59. Certains référenceurs pensentque le contenu placé haut dans le code aurait un poids plus fort que le contenu placé plus bas. Mais la question fait débat.
- 60. Dans tous lescas, le respect du principe de « pyramide inversée » est le meilleur moyen de produire des contenus naturellement optimisés pour les moteurs.La pyramide inversée (front loading)Enoncez d'abord les faits essentiels pour ensuite détailler vos contenus (message le plus important en premier)
- 61. Les mots-clés visésdoivent apparaître dès les premières phrases : cela est bon pour les utilisateurs comme pour les moteursBalise <title>INFORMATION PRINCIPALE(reprise dans <title>)Titre Principal5W+2HChapôDÉVELOPPEMENT DE L'INFORMATION PRINCIPALEParagraphesSous-titresINFORMATIONS DE MOINDRE IMPORTANCEParagraphesPied de page
- 62. « Utilisez lelangage le plus clair et le plus simple possible adapté au contenu de votre site (14.1) »
- 63. Les internautes recherchentavec leurs mots, pas les vôtres, et ils vont au plus simple.
- 64. Un langage clair,explicite permet une meilleure visibilité dans les moteurs.Rachète ?Autorise ?Progiciels ?Logiciels ?
- 65. Voir comme unrobot(ou comme certains utilisateurs)
- 66. Vérifier l’accessibilité technique: LynxURL du lien actifLien actifOuvrir une URL : "g"Activer des liens : "↓" et "↑"Défiler : "espace"Cliquer : "entrée"Page prec/suiv : "←" et "->"Source : "\"Aide : "?"LienZone de saisieTitre <hn>Texte ordinaire
- 67. Vérifier l’accessibilité :Web Developer…les cookies……CSS…On désactive javascript…… et on linéarise le contenu de la page.…on remplace les images par leurs attributs alt…
- 68. Vérifier l’accessibilité :Web DeveloperLien image avec attribut altTitre <h1>Liste <ul>Titre <h2>Titre <h3>paragraphe <p>
- 69. Balisage sémantique :Web DeveloperOn active la fonction « Display Element Information » (Ctrl+Maj+F)……au survol d’un élément la structure HTML apparaît…… et le clic sur un élément affiche en surimpression des informations complémentaires
- 70. Structure des titres: HeadingsmapUn clic sur un titre le met en surbrillanceOn active le plugin en cliquant sur l’icône <h/> dans la barre de statut…Et la structure des titres apparaît
- 71.
- 72.
- 73.
- 74.
- 75. http://s.billard.free.fr/referencement/Relevant TrafficAgence spécialiséedans le Search Engine Marketing depuis 1995
- 76. Membre du groupeKinnevik (www.kinnevik.se), Quotidien Metro, Milicom, Transcom, Tele2…
- 77. Une présence paneuropéenne : Stockholm, Paris et Madrid