| A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Catégorie | Problème identifié | Explication du problème | Bonne pratique à adopter | Action recommandée | Références | ||||||||||||||||||||
2 | Accessibilité | Les appels de fichiers permettant la mise en page ou le fonctionnement des éléments d'une page, ne sont pas "paramétrés" correctement : - la page 2 fait appel à des fichiers (minifiés) qui ne se trouvent pas dans le dossier du site. - certains fichiers "bloquent" le chargement du rendu de la page. | Concernant les fichiers appelés mais non existants sous cette appellation : les paramètres et/ou fonctions qui y sont définis ne sont pas appliqués. En découlent des problèmes d'affichage : - La couleur du texte descriptif et le background (fond) sont de la même couleur, le texte est donc invisible pour l'utilisateur/visiteur, ce qui est peut également être considéré, par les robots d'indexation, comme du Black-hat. - La navigation sort de l'écran et devient quasi inutilisable par l'utilisateur car invisible à 90%. Les scripts peuvent parfois bloquer le rendu de la page lors du chargement de tous les fichiers nécessitant son fonctionnement. Il est possible de prioriser le téléchargement de manière asynchrone (sans respecter nécessairement l'ordre que vous avez établi) ou différée (charger les script après le chargement de la page : son rendu) afin que la page s'affiche pour le visiteur sans perte de temps. | 1) Corriger les liens en appelant des fichiers existants (simple suppression de ".min" dans le chemin vers le fichier concerné). ou Minifier les fichiers .css et .js et les inclure dans les directories correspondants en lieu et place des fichiers correspondants non-minifiés. Il faudra, dans ce cas, corriger les liens faisant appel aux fichiers .css et .js pour faire appel, à la place, aux fichiers minifiés ainsi ajoutés. Cette 2nde option est recommandée car elle a pour avantage d'alléger le poids du site et par conséquent d'améliorer sa vitesse de chargement pour l'utilisateur. Même si, considérant le site en son état actuel (2 pages uniquement), le résultats ne sera pas significatif (la différence de poids sera très légère), c'est une bonne pratique à adopter et quasi incontournable lors du développement. Lorsque le site sera plus conséquent, la différence peut être importante. 2) Ajouter "defer" ou "async" dans les balises <script> pour permettre à la page de s'afficher même lorsque les scripts n'ont pas fini d'être téléchargés. | x | https://developer.mozilla.org/fr/docs/Web/HTML/Element/script https://openclassrooms.com/fr/courses/5922626-optimisez-le-referencement-de-votre-site-seo-en-ameliorant-ses-performances-techniques/6055231-allegez-les-pages-de-votre-site#/id/r-6055854 https://web.dev/render-blocking-resources/?utm_source=lighthouse&utm_medium=devtools | ||||||||||||||||||||
3 | SEO & accessibilité | Mauvais usage des mots-clés | Afin qu'un site soit à la fois accessible et référencé, il est nécessaire de définir des mots clés pertinents, non répétitifs et clairs. L'utilisateur comme le navigateur (et plus précisément le Robot d'indexation qui va référencer le site) doivent comprendre tout de suite de quoi traite le site. Pour cela, plusieurs choses doivent être mises en place dès la partie <head></head> du code html de chaque page. Ici nous avons plusieurs erreurs et/ou manquements : - Le titre défini et qui apparaît dans l'onglet du navigateur de l'utilisateur lors de la consultation des pages web est un simple "." pour la page d'accueil et "page 2" pour la 2nde page du site. (voir balise <title> de code html). Le contenu n'est donc clair ni pour l'utilisateur ni pour le navigateur censé référencer le site. - Mots-clés et description : Soit aucune information n'est fournie au navigateur quant au contenu des pages et il ne peut donc, là encore, pas référencer le site de manière optimale. Soit on observe une répétition de mots-clés. Cette pratique nommée "keyword stuffing" est une technique de Black-hat (ie une manière de tromper GoogleBot et très peu appréciée par ce dernier), susceptible de faire bannir la page des résultats de recherche. | 1) Définir un titre clair, interprétable, qui ne laisse pas place au doute quant au contenu de la page consultée par l'utilisateur. "La chouette agence" > page d'accueil "Contacter la chouette agence" > Page 2 2) Définir des mots clés pertinents, cohérents et qui répondent aux objectifs pour lesquels l'agence souhaite mettre en place le SEO, et se qui se rapportent au contenu de la page. <meta name="keywords" content="..."> 3) Rédiger une description claire et concise, faisant là encore appel à des mots-clés. GoogleBot est capable de comprendre les mots dans un contexte. Il est donc possible d'utiliser les mots d'un même champs lexical ou proche pour éviter les répétitions et réussir à insérer des mots-clés pertinents. <meta name="description" content="..."> - Penser à la recherche de l'utilisateur. - Utiliser des mots appartenants au champ lexical > GoogleBot comprend le contexte, il faut donc créer un contexte et ainsi éviter le "keyword stuffing". | x | https://openclassrooms.com/fr/courses/5561431-augmentez-votre-trafic-grace-au-referencement-naturel-seo/5578338-reconnaissez-les-differents-types-de-mots-cles https://openclassrooms.com/fr/courses/5561431-augmentez-votre-trafic-grace-au-referencement-naturel-seo/5578343-optimisez-le-contenu-de-vos-pages#/id/r-5603043 | ||||||||||||||||||||
4 | SEO | Les robots d'indexation, type GoogleBot, n'ont pas d'indices pour faciliter ou prioriser l'indexation | GoogleBot a ce qu'on appelle un "budget" de crawl*. Il est nécessaire de faciliter au maximum son travail en améliorant la "crawlabilité" du site. Pour cela, il est possible d'ajouter une balise directement dans la partie <head></head> du code html indiquant aux robots d'indexer cette page. Egalement, un fichier, communément nommé robots.txt, peut être créé et ajouté à la racine du site, afin d'indiquer aux robots les pages à indexer ou non, de même pour le contenu, ou alors prioriser l'indexation d'une page par rapport à une ou plusieurs autres pages. Dans ce projet, aucune des deux solutions n'a été appliquée. * parcours des pages par le robot d'indexation, qui enregistrera ensuite les textes pour finalement indexer les pages du site qui pourront ainsi remonter dans les résultats de recherche des visiteurs potentiels. Le robot ne peut pas crawler à l'infini, il a une limite. | Créer un fichier robots.txt et lui indiquer : - d'indexer la page principale du site, - qu'il n'est pas utile d'indexer le formulaire de contact (choix stratégique : il ne semble pas pertinent que les utilisateurs visitent et remplissent le formulaire de contact sans avoir pris connaissance de l'activité de l'agence et les services qui leur sont proposés. | x | https://developer.mozilla.org/fr/docs/Glossary/Robots.txt | ||||||||||||||||||||
5 | Accessibilité | Respect de la sémantique | Pour une meilleure accessibilité la sémantique est importante. Il faut donner du sens aux éléments. Des balises ont été mises en place afin d'attribuer un rôle, une fonction aux éléments. On parle ici d'un découpage simple et clair d'une page html, qui permet de se retrouver dans la page. Ici nous retrouvons bien le <header> et le <footer> qui définissent respectivement l'en-tête et le pied de page. Le contenu principal est plus communément désigné par une balise <main>. D'autres balises permettant le découpage de la page notamment pour les technologies d'assistance. Les <section> aideront à définir les différentes parties importantes du contenu principal. Le titrage est également très important. Il faut définir l'odre d'importance des différents titres : plusieurs titres de même niveau peuvent tout à fait se trouver sur une même page (mais 1 seul titre de nievau 1), mais l'on ne passe pas d'un titre de niveau 1 à un titre de niveau 4 sans avoir de niveau 2 et 3. Si les tailles de police doivent être très différentes, il suffit d'appliquer les propriétés qui conviennent. | Réorganiser sémantiquement les pages html afin d'améliorer l'accessibilité et le SEO en distinguant correctement chaque partie du contenu (avec des balises "prédéfinies" telles que <main>). Réorganiser la hiérarchie au niveau du titrage et adapter les propriétés css en conséquence si nécessaire. | x + access. + SEO grâce à sémantique car permet meilleure lecture des robots | https://openclassrooms.com/fr/courses/6691346-concevez-un-contenu-web-accessible/6940878-decouvrez-les-exigences-en-matiere-daccessibilite#r-6940817 https://developer.mozilla.org/fr/docs/Web/Accessibility/Mobile_accessibility_checklist#general_guidelines https://openclassrooms.com/fr/courses/6691346-concevez-un-contenu-web-accessible/6941263-creez-des-designs-visuels-accessibles#/id/r-6941183 | ||||||||||||||||||||
6 | Accessibilité | Définir le langage utilisé (code html) | "default" n'est pas une valeur acceptée pour l'attribut "lang". Afin que les lecteurs d'écrans puissent retranscrire le contenu du site, il est important de définir une valeur à l'attribut "lang" en se référant à la langue utilisée dans le contenu du site (majoritairement). Ils auront ainsi une meilleure énonciation ce qui aura pour effet une meilleure compréhension de la part de l'utilisateur en situation de handicap. | Définir une valeur appropriée pour l'attribut "lang" > le site ne proposant pas de traduction actuellement, la valeur à définir sera donc "fr". | x | https://www.w3.org/International/questions/qa-html-language-declarations.fr https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.1_%E2%80%94_Readable_Make_text_content_readable_and_understandable | ||||||||||||||||||||
7 | Accessibilité + SEO | Navigation | Navigation externe : Les liens du footer ne mènent à rien et n'ont donc aucun intérêt. Les annuaires, ici, s'apparentent au Black-hat, mais font également courir le risque que GoogleBot (et autres robots) ne dépense une trop grande partie du budget de crawl et n'indexe donc pas le site dans son intégralité. Il faut donc éviter de surcharger les pages avec du contenu non pertinent qui "gaspillerait" le temps que le robot peut passer à naviguer sur le site Les logos se référant aux différents réseaux sociaux ne pointent pas vers les comptes associés. Navigation interne : Lien vers page 2 depuis la page 2 > inutile page accueil > lien vers accueil : inutile Page d'accueil : multiplication des liens pointants vers la page2.html Les liens qui pointent vers la page active ajoutent du contenu superflu et surchargent la page de manière inutile. La navigation doit être intuitive et cohérente à la fois pour l'utilisateur et les robots d'indexation. Les liens d'une page vers une autre doivent être cohérents avec le contenu de la page. Le "linking interne" est très important. Les liens du site n'ont pas non plus de description, qui permettrait à l'utilisateur (via son lecteur d'écran par ex.) de savoir à quoi correspondent les liens. | 1) Les liens annuaires et partenaires : liens trop nombreux et surtout, qui n'aboutissent à rien. Il conviendra donc, pour une meilleure lecture utilisateurs + navigateur, dans un 1er temps, de vérifier les URL si le client souhaite absolument conserver ces liens et réorganiser la présence des ces listes trop fournies et peu pertinentes (éventuellement par la création d'une page dédiée, ce qui allègera quelque peu la page). Possibilité également, si la pertinence des liens (notamment partenaires) est demontrée, de définir dans le code html, les liens que les moteurs de recherche suivront ou non afin de ne pas leur faire perdre en puissance mais de conserver l'avantage lié au SEO, à savoir une garantie de l'expertise de l'agence. Ou Supprimer les listes. Cette pratique pouvant être associée au Black-hat là encore, le site risque d'être banni des résultats de recherche. Il sera donc recommandé de supprimer ces annuaires. D'autant plus que les sites choisis pour la partie partenariat ne semblent pas pertinents. Il est important de choisir des partenaires cohérents et en lien (activité, localisation) avec l'activité de l'agence. 2) Réseaux : Si les pages/comptes ne sont pas encore créés : les créer et ajouter les liens dans le code html afin d'avoir des liens fonctionnels + ajouter une description permettant aux technologies d'assistance d'indiquer à quoi correspondent ces liens. Si les créations de compte ne sont pas encore à l'ordre du jour, supprimer les logos cliquables laissant penser à l'utilisateur qu'il pourra trouver + d'infos, + de contenus en cliquant dessus > induit en erreur, Ou Renvoyer vers les réseaux sociaux concernés, pour un partage de la page. Après vérification, l'agence de possédant pas de compte sur ces réseaux sociaux à l'heure actuelle, il sera donc conseillé de les créer. Dans l'attente de cette mise en place, et afin de conserver ces liens et la possibilité d'un partage afin de "faire connaître" l'agence, les liens devront pointer vers la page d'accueil de chacun de ces réseaux (soit page d'accueil de l'utilisateur s'il est connecté) afin qu'il puisse partager le lien du site. 3) Liens internes : Réduire le nombre de liens vers la page2.html. Séléctionner les emplacement stratégiques, et attention à les nommer correctement. | x + access. + SEO | https://openclassrooms.com/fr/courses/5922626-optimisez-le-referencement-de-votre-site-seo-en-ameliorant-ses-performances-techniques/6055216-ameliorez-votre-crawlabilite-pour-une-meilleure-indexation#/id/r-6055720 https://openclassrooms.com/fr/courses/5561431-augmentez-votre-trafic-grace-au-referencement-naturel-seo/5578346-augmentez-lautorite-de-votre-site https://openclassrooms.com/fr/courses/5561431-augmentez-votre-trafic-grace-au-referencement-naturel-seo/5603511-nouez-des-partenariats | ||||||||||||||||||||
8 | Accessibilité + poids du site > vitesse de chargement | Les images ne sont pas adaptées, ni en taille ni en poids. | Les images contenues dans la page d'accueil du site sont trop lourdes. Cela influe sur le temps de chargement de la page et potentiellement sur le SEO. Le positionnement de certaines images n'a pas été adapté lors de la définition de la responsivité.(Media Queries), notamment celles contenant du texte uniquement. Le texte n'est pas visible dans son entièreté pour l'utilisateur, qui ne peut pas non plus, agrandir le texte ou adapter le contraste au besoin. | 1) Il conviendra de dimensionner les images en fonction de la taille de leur contenant. Il est également recommandé de réduire le poids de celles-ci afin d'alléger le poids de la page et par conséquent celle du site. En découlera une amélioration de la vitesse de chargement du site et donc du référencement. 2) Adapter le positionnement des images "textes" en fonction du format écran. Ou Insérer les textes directement dans le code html plutôt que dans des images. La 2nde option est recommandée car a en + l'avantage d'alléger la page en terme de poids et donc de vitesse de chargement, ce qui améliorera en conséquence, aussi, un peu le SEO. Mais surtout : si les "textes" restent des images, il ne sera pas possible pour les utilisateurs d'augmenter la taille de la police ou modifier le contraste entre le fond et le texte, rendant ainsi tout ou partie inaccessible pour certains utilisateurs. Il faut donc séparer le fond et le texte en éléments distincts afin que les technologies d'assistance (lecteurs d'écran par ex) puissent retranscrire le contenu (> Accessibilité). | X | https://openclassrooms.com/fr/courses/5922626-optimisez-le-referencement-de-votre-site-seo-en-ameliorant-ses-performances-techniques/6055231-allegez-les-pages-de-votre-site#/id/r-6055837 https://web.dev/uses-responsive-images/?utm_source=lighthouse&utm_medium=devtools | ||||||||||||||||||||
9 | Poids de la page > vitesse de chargement | Cumul des conteneurs | Lors du développement d'une page html, il convient d'éviter toute accumulation de conteneurs. Il est préférable d'utiliser un conteneur pour plusieurs éléments et d'éviter les conteneurs uniques imbriqués de type : Des conteneurs vides ont également été ajoutés. Ils n'ont aucune utilité. Ce type de pratiques rajoute du temps de chargement inutile à la page web. Mais la présence d'un grand nombre de conteneurs peut aussi poser des problèmes lorsque tout n'est pas chargé : on aura peut-être, visuellement, l'impression que la page est entièrement chargée, et avoir envie de cliquer sur un bouton déjà chargé. Sauf que le temps de cliquer, d'autres conteneurs seront apparus et les éléments déjà en place auront bougés. On risque donc de ne pas cliquer sur le bon bouton et de faire une fausse manipulation par exemple. | Supprimer les conteneurs superflus et adapter le code HTML et CSS au besoin pour conserver le design. | X | https://web.dev/cls/ | ||||||||||||||||||||
10 | Accessibilité | Textes : police, contrastes, couleurs, taille de police, orthographe, compréhension | Les couleurs de texte et le fond sont de la même couleur, ou de couleurs quasi similaires, le texte ne se démarque donc pas suffisemment pour l'utilisateur présentant une acuité visuelle réduite par ex. D'autre part, outre le fait que la taille du texte ne soit pas adaptée à son conteneur ou à la page en elle-même, elle peut également être presque illisible pour les visiteurs, notamment ceux en situation de handicap. Certaines parties sont volontairement "cachées" aux yeux de l'utilisateur afin de placer des mots-clés. Cette pratique est considérée comme du Black Hat, attention ! Mais en plus, ces textes seront lus par les lecteurs d'écran par ex., ce qui n'est pas non plus souhaitable. L'utilisateur n'entendrait qu'une liste de mots-clés ce qui n'est pas pertinent lors de la visite du site. Quelques fautes d'orthographe sont à corriger. Attention à le relecture du contenu ! Des fautes d'orthographe peuvent jouer sur la crédibilité et le professionnalisme. Dans la page2, le formulaire renvoie "Not a valid email address" en réponse à une saisie invalide sur la manière dont on a connu l'agence > problème de compréhension notamment pour un visiteur s'appuyant sur une technologie d'assistance. + Les messages d'erreur sont en anglais. Ils devraient être en français comme le restant du contenu textuel. | 1) Supprimer tous les textes qui n'ont pas vocation à être visible par l'utilisateur. 2) Adapter les couleurs et la taille des éléments avant-plan et arrière-plan afin de redonner sa place à chaque élément en pensant accessibilité, visibilité ! 3) Adapter les retours d'erreur à la complétion des champs du formulaire à leur fonction : - utiliser le bon langage - adapter si besoin les champs, notamment "Comment nous avez-vous connu ?" > cette question devrait être facultative, tout le monde ne prendra pas le temps d'y répondre ou possibilité de proposer des réponses pré-définies à sélectionner (1seul choix possible pour le visiteur). | x | https://developer.mozilla.org/fr/docs/Web/Accessibility/Mobile_accessibility_checklist#text_equivalents https://developer.mozilla.org/fr/docs/Web/Accessibility/Mobile_accessibility_checklist#colour https://openclassrooms.com/fr/courses/6691346-concevez-un-contenu-web-accessible/6941263-creez-des-designs-visuels-accessibles#/id/r-6941246 https://www.w3.org/Translations/WCAG20-fr/#meaning | ||||||||||||||||||||
11 | Accessibilité | Accessibilité > technologies d'assisitance, focusabilité (éléments focalisables) | Les différents éléments doivent être "focusables" (atteignables) au clavier. Le visiteur doit pouvoir consulter et naviguer sans difficulté que ce soit au clavier ou à l'aide de tout autre assistance. Les éléments doivent être compréhensibles, interprétables pour les technologies > lecteur d'écran par exemple. Mais la notion de "focus", sur des éléments interactifs (liens par ex), doit également être interprétable visuellement. Ce n'est pas le cas de tous les éléments ici. | 1) Adapter les textes invisibles pour tout utilisateur mais interprétables et audibles via une lecteur d'écran pour maximiser la compréhension du contenu proposé. 2) Vérifier, et corriger au besoin, afin que tous les éléments interactifs soient "focusables"/atteignables via le clavier d'ordinateur et que cela soit également compréhensible visuellement. 3) Augmenter la taille des icons de réseaux sociaux afin de correpondre aux critères d'accessibilité : elles doivent être assez grandes pour que l'utilisateur puissent interagir avec elles. | x | https://openclassrooms.com/fr/courses/6691346-concevez-un-contenu-web-accessible/6940878-decouvrez-les-exigences-en-matiere-daccessibilite#/id/r-6940829 https://developer.mozilla.org/fr/docs/Web/Accessibility/Mobile_accessibility_checklist#focus https://developer.mozilla.org/fr/docs/Web/Accessibility/Mobile_accessibility_checklist#text_equivalents https://www.w3.org/Translations/WCAG20-fr/#keyboard-operation | ||||||||||||||||||||
12 | SEO | Aucun fichiers mis en cache | Aucun fichier .htaccess n'a été créé. Celui-ci permet, entre autres, de mettre des fichiers en cache. Cette pratique permet de réduire considérablement le temps de chargement du site au prochain passage d'un utilisateur (à condition qu'il n'ait pas, entre temps, vidé son cache) puisqu'il s'agit d'indiquer au navigateur d'enregistrer sur l'ordinateur du visiteur certains fichiers qu'il n'aura donc pas à retélécharger lors d'une prochaine visite. | Créer un fichier .htaccess (ou voir serveur) et définir les fichiers à mettre en cache. Il sera recommandé d'y placer des fichiers qui peuvent prendre du temps à charger, tels que les fichiers d'image par exemple. Le site de "La chouette agence" présentant des images de projets réalisés, il peut être intéressant de regarder dans cette direction dans un 1er temps. | https://openclassrooms.com/fr/courses/5922626-optimisez-le-referencement-de-votre-site-seo-en-ameliorant-ses-performances-techniques/6055236-parametrez-le-cache-navigateur | |||||||||||||||||||||
13 | Vitesse de chargement | Le site intègre les fichiers provenant de la lirairie Font-Awesome. | Ceci n'est pas un réel problème en soi, mais lorsque le site contient les fichiers provenant d'une librairie, lors du chargement ce sont des fichiers supplémentaires à charger et cela influe sur la vitesse de chargement. Or, si le site fait appel à ces librairies via les CDN serveurs de Font-Aweome par ex., le site est moins lourd. On gagne un peu en temps de chargement. On peut également ajouter, dans les balises faisant appel à cette librairie, une relation preconnect ou preload par ex. On demande ainsi au navigateur de précharger ou se pré connecter à ces serveurs sans attendre que ne vienne leur tour dans l'ordre de chargement des éléments d'une page. Ils s'afficheront ainsi plus vite. | Possibilité de supprimer tous les fichiers Font-Awesome du site et ainsi l'alléger et ajouter dans la balise <head> de chaque page le nécessitant, une balise de type : <script src="https://kit.fontawesome.com/... .js" crossorigin="anonymous"></script> Les points de supensions correspondent à un numéro de kit que nous fourni Font-Awesome. Le numéro est unique pour chaque utilisateur (ici l'utilisateur est le développeur et non le visiteur de la page). | https://cdn.fontawesome.com/help | |||||||||||||||||||||
14 | Développement : bonnes pratiques | Certaines propriétés de style sont définies dans le code html | Source de problèmes éventuels lors de la définition des propriétés css : doublons ou règles contradictoires > risque de ne pas voir s'afficher la règle souhaitée. "Surcharge" inutile du code html. | Supprimer les propriétés de styles définies dans le code html et les insérer au besoin dans le code css prévu à cet effet. NB : La majorité de ces règles a été supprimée au cours de l'application des 10 recommandations définies puisqu'elles concernaient des éléments qui ont été retravaillés ou supprimés. | https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605060-mettez-en-place-le-css#/id/r-1609961 | |||||||||||||||||||||
15 | Développement : bonnes pratiques | CSS/JS : certains règles qui ont été définies ne sont, à l'heure actuelle, pas utilisées. | Il est courant de définir des règles, des propriétés CSS, de créer des fonctions en javascript, pour appliquer des styles, ou créer des contenus interactifs, et finalement ne pas s'en servir, parce que les besoins ont changés, les idées pour le design ont évoluées... Cependant, il faut veiller à supprimer toutes ces lignes de codes "mortes". Elles prennent de la place et ajoutent (même légèrement) du poids aux fichiers inutilement, alors que l'on cherche à toujours optimiser le poids des ressources chargées par le navigateur. Ce sont également des lignes de code que le navigateur doit "lire" et "interpréter" pour se rendre compte qu'elles n'ont pas d'éléments auxquels les appliquer. C'est du temps perdu sur le chargement de la page. C'est aussi une bonne pratique à mettre en oeuvre, pour que les prochains intervenants sur le site n'aient pas à essayer eux-mêmes d'interpréter ces bouts de code et ce à quoi ils (ne) se rapportent (pas). | Supprimer toutes les règles dites "mortes", sans oublier de supprimer dans la partie html, les "class" ou les "id", les scripts ou tout autre fichier non utilisés. | https://web.dev/unused-css-rules/?utm_source=lighthouse&utm_medium=devtools | |||||||||||||||||||||
16 | Développement : bonnes pratiques | indentation | Certaines parties du code html ne sont pas indentées correctement. Lecture moins efficace du code par les développeurs. | Indenter correctement le code afin de retrouver et visualiser + rapidement les différents contenants et contenus. | https://developer.mozilla.org/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#espace_vide_en_html | |||||||||||||||||||||
17 | Développement : bonnes pratiques > SEO | arborescence du site | L'arborecsence du site est très importante pour retrouver facilement chaque fichier. Il n'y a pas de règle absolue en la matière, mais pour faciliter le travail des futurs intervenants (dév) sur le projet, surtout lorsque celui-ci commence à prendre une certaine ampleur, on doit pouvoir instinctivement s'orienter vers les bons directories (dossiers) pour trouver les éléments (pages html, fichiers de style, images...) | - Placer le fichier style.css dans le directory "css". - Le fichier favicon.svg pourrait se placer dans le directory "img", cependant cette pratique est parfois controversée et certains s'accordent à dire qu'elle doit etre placée à la racine du site comme c'est le cas ici. | https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files#quelle_structure_mettre_en_place_pour_votre_site_web | |||||||||||||||||||||
18 | Bonnes pratiques à appliquer sur le long terme | |||||||||||||||||||||||||
19 | SEO | Présence inexistante sur les réseaux sociaux, presse locale (digitale)... | Aucune présence en ligne hors site web de l'agence, ce qui n'aide pas à la diffusion d'informations et à faire connaître celle-ci auprès d'un public + large. | 1) Créer un compte Google MyBusiness avec toutes les infos concernant l'agence. Ajouter des photos pour créer du lien et sentiment de confiance pour les futurs clients potientiels. 2) (vu + haut) Créer comptes réseaux sociaux. Communiquer, partager les infos, partager les réalisations de l'agence (si accord client(s)), ... 3) Si journal local avec version digitale > Se présenter En mettant en place ces actions, l'agence se fera connaître du public et gagnera en visites. + il y a de visites > + le site de l'agence remontera dans les résultats de recherche (SEO) > + de clients potentiels. | https://openclassrooms.com/fr/courses/5561431-augmentez-votre-trafic-grace-au-referencement-naturel-seo/5578347-trouvez-vos-premiers-backlinks | |||||||||||||||||||||
20 | SEO | Mise à jour du contenu | Importance de mettre le contenu du site à jour régulièrement, pour garder une bonne position dans les résultats de recherche, et conserver l'intérêt des visiteurs. | Ajouter des éléments ou modifier le portfolio des réalisations de l'agence, S'assurer de la pertinence et qualité des partenaires et autres liens, Chercher de nouveaux partenaires, ... | https://openclassrooms.com/fr/courses/5561431-augmentez-votre-trafic-grace-au-referencement-naturel-seo/5578344-creez-votre-machine-a-contenu | |||||||||||||||||||||
21 | SEO | Analyser | Utilisation des outils tels que Google Analytics ou la Google Search Console pour adapter au besoin les mots-clés et le contenu. | Analyser les recherches utilisateurs, nombre de clics, nombre de visiteurs uniques, durée moyenne d'une session... afin d'optimiser et adapter régulièrement le contenu du site en réponse à ces critères (entre autres) et maintenir un SEO optimal. | https://openclassrooms.com/fr/courses/5561431-augmentez-votre-trafic-grace-au-referencement-naturel-seo/5578350-suivez-votre-progression-grace-a-google-search-console https://openclassrooms.com/fr/courses/5922626-optimisez-le-referencement-de-votre-site-seo-en-ameliorant-ses-performances-techniques/6055206-diagnostiquez-la-crawlabilite-de-votre-site-avec-la-search-console#/id/r-6060636 https://openclassrooms.com/fr/courses/5561431-augmentez-votre-trafic-grace-au-referencement-naturel-seo/5578336-analysez-la-pertinence-du-seo-pour-votre-organisation#/id/r-5578489 | |||||||||||||||||||||
22 | SEO | Signaler les changements | En cas de changements majeurs sur le site, il peut être intéressant de les signaler à Google afin de le (re)indexer correctement. | Utiliser la Google Search Console > Explorer comme Google. Cela permet de dire à GoogleBot de re parcourir le site et l'indexer en tenant compte des changements. | https://openclassrooms.com/fr/courses/5561431-augmentez-votre-trafic-grace-au-referencement-naturel-seo/5578350-suivez-votre-progression-grace-a-google-search-console#/id/r-5747622 | |||||||||||||||||||||
23 | ||||||||||||||||||||||||||
24 | ||||||||||||||||||||||||||
25 | ||||||||||||||||||||||||||
26 | ||||||||||||||||||||||||||
27 | ||||||||||||||||||||||||||
28 | ||||||||||||||||||||||||||
29 | ||||||||||||||||||||||||||
30 | ||||||||||||||||||||||||||
31 | ||||||||||||||||||||||||||
32 | ||||||||||||||||||||||||||
33 | ||||||||||||||||||||||||||
34 | ||||||||||||||||||||||||||
35 | ||||||||||||||||||||||||||
36 | ||||||||||||||||||||||||||
37 | ||||||||||||||||||||||||||
38 | ||||||||||||||||||||||||||
39 | ||||||||||||||||||||||||||
40 | ||||||||||||||||||||||||||
41 | ||||||||||||||||||||||||||
42 | ||||||||||||||||||||||||||
43 | ||||||||||||||||||||||||||
44 | ||||||||||||||||||||||||||
45 | ||||||||||||||||||||||||||
46 | ||||||||||||||||||||||||||
47 | ||||||||||||||||||||||||||
48 | ||||||||||||||||||||||||||
49 | ||||||||||||||||||||||||||
50 | ||||||||||||||||||||||||||
51 | ||||||||||||||||||||||||||
52 | ||||||||||||||||||||||||||
53 | ||||||||||||||||||||||||||
54 | ||||||||||||||||||||||||||
55 | ||||||||||||||||||||||||||
56 | ||||||||||||||||||||||||||
57 | ||||||||||||||||||||||||||
58 | ||||||||||||||||||||||||||
59 | ||||||||||||||||||||||||||
60 | ||||||||||||||||||||||||||
61 | ||||||||||||||||||||||||||
62 | ||||||||||||||||||||||||||
63 | ||||||||||||||||||||||||||
64 | ||||||||||||||||||||||||||
65 | ||||||||||||||||||||||||||
66 | ||||||||||||||||||||||||||
67 | ||||||||||||||||||||||||||
68 | ||||||||||||||||||||||||||
69 | ||||||||||||||||||||||||||
70 | ||||||||||||||||||||||||||
71 | ||||||||||||||||||||||||||
72 | ||||||||||||||||||||||||||
73 | ||||||||||||||||||||||||||
74 | ||||||||||||||||||||||||||
75 | ||||||||||||||||||||||||||
76 | ||||||||||||||||||||||||||
77 | ||||||||||||||||||||||||||
78 | ||||||||||||||||||||||||||
79 | ||||||||||||||||||||||||||
80 | ||||||||||||||||||||||||||
81 | ||||||||||||||||||||||||||
82 | ||||||||||||||||||||||||||
83 | ||||||||||||||||||||||||||
84 | ||||||||||||||||||||||||||
85 | ||||||||||||||||||||||||||
86 | ||||||||||||||||||||||||||
87 | ||||||||||||||||||||||||||
88 | ||||||||||||||||||||||||||
89 | ||||||||||||||||||||||||||
90 | ||||||||||||||||||||||||||
91 | ||||||||||||||||||||||||||
92 | ||||||||||||||||||||||||||
93 | ||||||||||||||||||||||||||
94 | ||||||||||||||||||||||||||
95 | ||||||||||||||||||||||||||
96 | ||||||||||||||||||||||||||
97 | ||||||||||||||||||||||||||
98 | ||||||||||||||||||||||||||
99 | ||||||||||||||||||||||||||
100 | ||||||||||||||||||||||||||