Analyse du site actuel
Afin de favoriser le
référencement, il est important de réaliser tout d’abord une étude sur les
éléments présents. Le site actuel de l’association Ataction Insertion se nomme
« monalternant.com ».
Suite à l’analyse ci-dessous de ce site web, j’ai pu constater plusieurs
aspects positifs mais également plusieurs aspects négatifs. Grâce à cette
analyse, j’ai pu proposer des solutions techniques afin de maximiser le
référencement, l’expérience client mais également l’ergonomie.
|
CATEGORIES |
POINTS |
POINTS |
|
Identité / Nom du site |
|
|
|
Objectif et fonction |
|
|
|
Cibles |
|
|
|
Technique |
|
|
|
Structure / arborescence |
|
|
|
Navigation (UX) |
|
|
|
Ergonomie |
|
|
|
Lisibilité (UI) |
|
|
|
Parcours utilisateur |
|
|
|
SEO – Mots-clés |
|
|
|
SEO – Balises |
|
|
|
SEO – Référencement |
|
|
|
Contenu – Qualité |
|
|
|
Contenu – Mise à jour |
|
|
|
Contenu – Clarté |
|
|
|
Contenu – Adaptation au |
|
|
Les règles OPQUAST (Open Quality Standards) sont des règles qui rassemblent l’ensemble des bonnes pratiques lors de la création et la conception d’un site web. Elles permettent d’assurer le bon référencement et l’accessibilité. Faire une analyse du site « monalternant.com » à l’aide de ses règles permet de comprendre le fonctionnement du site actuel et de proposer des éléments afin de favoriser son bon fonctionnement. J’ai donc pu identifier des problèmes concrets et par la suite trouver des solutions. Cela m’aidera par la suite pour organiser les maquettes.
Règles OPQUAST
|
N° règle |
Règle OPQUAST |
Problème constaté |
Solution proposée |
|
|
16 |
Certaines images ne possèdent pas d’attribut alt |
Ajouter des textes alternatifs descriptifs pour améliorer l’accessibilité et SEO |
||
|
140 |
Certains liens ne sont pas suffisamment clairs |
Utiliser des libellés explicites décrivant la destination |
||
|
15 |
La politique de confidentialité et de respect de la vie privé est disponible depuis toutes les pages |
La politique de confidentialité n’est pas trouvable sur le site |
Rajouter une section accessible dans les formulaires et dans le footer |
|
|
103 |
Absence de hiérarchie claire des titres et des titres sur les pages |
Mettre en place un titre sur chaque page qui correspond |
||
|
105 |
Le numéro de téléphone et l’adresse ne sont pas trouvables sur le site |
Rajouter ses informations dans le footer |
||
|
107 |
Il n’y a que le formulaire de demande de question |
Placer en footer le numéro de téléphone, l’adresse mail et les réseaux sociaux |
||
|
171 |
Aucun plan n’est disponible, cela à un impact sur l’accessibilité |
Créer et rajouter un plan |
||
|
133 |
Le contenu de chaque page est organisé selon une structure de titres et sous-titres hiérarchisé |
|
Mettre |
|
|
110 |
Chaque demande d’information fait l’objet d’un accusé de reception |
Lors de la fin du formulaire, il n’y a pas de message d’accusé de reception |
Intégrer un message de confirmation |
|
|
138 |
Il n’y a pas de liens visibles sur le site web |
Mettre des liens externes et internes (par exemple vers le blog d’offres d’alternances) |
Analyse et refonte
Héro-Header - Actuel
- Menu : 7 pages dont 2 pages de connexion et d’inscription
- Hero-header : différents secteurs d’activités dans lesquels Ataction accompagne
- Charte graphique : pas de rapport avec les couleurs ni les typographies
- Logo : pas de cohérence
Héro-Header - Refonte
- Charte graphique : typographie et couleurs qui correspondent
- Nom de l’association, impactant pour le référencement
- Image de jeunes étudiants
- Menu : 6 pages et 2 de connexion et inscription
- Bouton d’accès rapide : liens directs pour se connecter, prendre un rendez-vous ou s’inscrire
- Nouveau logo
- Objectifs : Le but de ce changement est de mettre en avant l’identité visuelle grâce à la charte graphique
(couleurs et typographie). Mais également d’optimiser la navigation web avec une page en
moins dans le menu (page qui est doublée). Mettre les secteurs d’activité dans le mot Ataction
montre bien que l’association accompagne dans ses domaines
Header Des Pages- Actuel
- Incohérence entre le titre sur l’image et le titre dans le menu
- Image trop simple qui ne rappelle pas correctement la charte graphique
- Image qui n’est pas en lien avec le public ciblé (photos d’adultes, alors que le public est jeune)
Héro-Header - Refonte
- Rappel de la charte graphique : police d’écriture et couleurs
- Cohérence et déclinaison : les trois couleurs principales de la charte graphique
- Rappel du titre en lien avec le menu (règle opquast 103)
- Le but de la réalisation de ses héro-header est de créer une harmonie entre toutes les pages,
cela favorise le référencement mais également la coordination de la charte graphique
Footer - Actuel
- Il n’y a aucun footer, seulement le partenaire lors de la création du site web
- Aucune information
- Aucune cohérence avec la charte graphique
Footer - Refonte
- Cohérence avec la charte graphique
- Mise en place du logo
- Mise en place des informations importantes (adresse, mail, et téléphone) (règle opquast 107 et 105)
- Communication en donnant les réseaux sociaux
- Mise en place des données importantes et obligatoires (plan du site, règles sur les cookies et de confidentialité) (règle opquast 15 et 171
Liens - Actuel
- Actuellement, le site ne propose pas de liens internes et externes, nous pouvons voir un type de
phrase qui pourrait être un lien mais elle ne l’est pas.
Liens - Refonte
- Liens visant à mettre en avant des informations importantes redirigeant vers des pages internes ou externes pour éviter de surcharger la page avec trop d’informations afin de favoriser le référencement
- Charte graphique : les liens doivent être tous identifiés de la même manière afin de respecter une cohérence (bouton cliquable de couleur verte) (règle opquast 140)
Création De Compte - Actuel
- Toutes les informations sont rassemblées dans la même page
- Aucun texte n’est ajouté sur la page pour informer le processus
- Aucune mention des règles de confidentialité et de respect des données
- Aucun respect de la charte graphique
Création De Compte - Refonte
- Mise en place de la charte graphique (couleur et typographie)
- Mise en place d’un texte apportant des informations sur le but de ce formulaire
- Informations sur les données sécurisées
- Création de plusieurs parties du processus d’inscription pour regrouper les informations
- Message de confirmation de création de compte (règle opquast 110)
Connexion - Actuelle
- Seulement une identification
- Pas de texte explicatif
Connexion - Refonte
- Identification à double facteur pour plus de confidentialité
- Texte explicatif
Pages Répétitives - Actuelles
- Deux pages sont les mêmes (quand nous allons sur celle des pépites nous tombons sur la même que les talents cachés)
- Pas de règles de confidentialité
Pages répétitives- Refonte
- Assemblage des deux pages pour plus de coordination
- Règle de confidentialité
Rajout d'informations- Refonte
- Dans la page événement, il me semblait intéressant de rajouter la section « offre » donnant directement au blog créé spécialement pour y recenser toutes les offres d’alternance/stage et emploi. Cela crée donc des liens externes
Analyse et référencement
Eléments à mettre en place
Stratégie
- Stratégie de création de liens : externes et internes
- Ajout de balises méta
- Ajouter des attributs ALT à toutes les images
- Lier les réseaux sociaux
- Utiliser des mots clés pertinents et cibler sur les différents secteurs
- Mieux organiser les titres et sous-titres
Analyse
L’association Ataction Insertion fait régulièrement face à un public en situation particulière (langage, handicap). Il me semble donc intéressant de créer un site web en fonction de ses problématiques. Une simple balise ALT pour décrire les images n’est pas suffisante.
Exemple
J’ai donc pu effectuer des recherches ; Suite à l’analyse de plusieurs sites web dans tous domaines confondus, j’ai pu trouver le site web de l’Accor Arena (salle de concert sur Paris), voici ce qu’ils proposent :
- Dyslexie : changement de la typographie pour plus de visibilité
- Fatigue visuelle : adaptation de la typographie
- Daltonisme : changement des couleurs
- Malvoyance : augmentation des textes et icones
- Migraine ophtalmique : taille, couleurs
- Maladie de Parkinson : agrandir les zones cliquables
- Epilepsie : stopper le contenu animé
- Langue : Traduction des pages
Document refonte de site web
Stage au sein du service de Communication de l'association Ataction Insertion à Ris-Orangis (91)
Nina Martel - Etudiante en DEUST Webmaster et Métiers de l'Internet - Université de Limoges
© 2026 Rapport de stage. Created for free using WordPress and Kubio