Optimiser votre site : SEO, accessibilité et écoconception 🌱
Dans cette seconde partie, vous allez structurer votre site BatiPro, optimiser son référencement naturel (SEO), puis vérifier et améliorer deux aspects essentiels : l’accessibilité (RGAA) et la sobriété numérique. Vous terminerez par la gestion des utilisateurs et la mise en place d’une newsletter.
- Un site bien structuré est plus simple à utiliser pour les visiteurs… et mieux compris par Google.
- Le SEO permet à BatiPro d’apparaître dans les résultats lorsqu’un internaute tape par exemple « constructeur maison Fabrègues » ou « maison ossature bois ».
- L’accessibilité garantit que le site est utilisable par tous (personnes malvoyantes, daltoniennes, utilisant le clavier, etc.).
- L’éco-conception réduit l’empreinte environnementale du site (moins de données, moins d’énergie, meilleure expérience utilisateur).
- Les audits (SEO, accessibilité, performance) permettent de mesurer la qualité du site et d’identifier ce qui doit être amélioré.
- Créer un menu principal clair et accessible.
- Optimiser le référencement naturel de la page d’accueil et d’un article.
- Appliquer les règles essentielles du RGAA à votre site.
- Réduire l’empreinte carbone de votre site (éco-conception).
- Gérer des comptes utilisateurs dans WordPress.
- Configurer une première newsletter.
Plan du chapitre
1. Créer le menu principal 🍔
Le menu permet aux visiteurs de se repérer rapidement et de comprendre la structure du site. Il doit être clair, logique et accessible.
- Pour un futur client, le menu est souvent le premier repère sur le site : il doit comprendre en quelques secondes ce que propose BatiPro.
- Un menu clair améliore l’expérience utilisateur (UX) : le visiteur trouve vite la page qu’il cherche (Nos prestations, Blog, Contact…).
- Un menu bien organisé aide aussi les moteurs de recherche à comprendre la structure du site.
- Du point de vue de l’accessibilité, un menu logique et bien codé est plus facile à utiliser avec un lecteur d’écran ou uniquement au clavier.
🎬 Vidéo 8 – Créer un menu dans WordPress
Cette vidéo vous montre comment créer un menu principal et y ajouter les pages de votre site.
1.1 Construire le menu “BatiPro”
Chemin : Apparence → Menus
- Créer un menu appelé Menu principal.
- Y ajouter :
- Accueil
- Nos prestations
- Blog
- Contact
- Cochez : Affichage dans l’en-tête.
2. Améliorer le SEO de la page d’accueil 🔍
Le SEO (Search Engine Optimization) regroupe les techniques qui permettent à un site d’apparaître le plus haut possible dans les résultats « gratuits » de Google. L’idée est de faire en sorte que, lorsqu’un internaute tape une requête comme « constructeur de maisons individuelles Fabrègues », le site de BatiPro apparaisse parmi les premiers résultats.
- Un bon SEO apporte du trafic qualifié : ce sont des personnes réellement intéressées par l’offre de BatiPro.
- Contrairement à la publicité payante, le référencement naturel travaille sur le long terme.
- Pour cela, on doit soigner : le titre de la page (balise Title), la méta-description, les titres H1/H2, le contenu et les images.
🎬 Vidéo 9 – Optimiser le référencement SEO
Cette vidéo présente les principaux réglages SEO à appliquer sur votre site (titre, métas, contenu, images…).
L’objectif est de rendre la page d’accueil visible sur des requêtes comme “constructeur maison Montpellier” ou “maison individuelle clés en main”.
- Sans outil, il est difficile de savoir si la page est bien optimisée.
- Yoast SEO fonctionne comme un coach : il analyse la page et affiche des voyants (rouge / orange / vert) pour vous guider.
- Il vous rappelle les bonnes pratiques : longueur du texte, présence de la requête cible, qualité des titres, liens internes, balises ALT, etc.
2.1 Installer une extension de SEO (ex : YOAST SEO)
Chemin : Extensions → Ajouter → rechercher “YOAST SEO”
2.2 Régler le titre et la méta-description de la page d’accueil
| Élément | Exemple de bonne pratique |
|---|---|
| Titre SEO | “Constructeur de maisons individuelles – BatiPro (Montpellier)” |
| Méta-description | Texte de 150–160 caractères présentant BatiPro et ses atouts. |
| Balise H1 | Un seul H1 par page, cohérent avec le titre SEO. |
| Images | Balises ALT descriptives (obligation RGAA + SEO image). |
- Vous choisissez des mots-clés (requête cible) qui correspondent aux recherches des futurs clients.
- Vous rédigez un titre et une méta-description attractifs pour inciter au clic.
- Vous aidez Google à comprendre précisément le sujet de la page d’accueil.
3. SEO de l’article “Maison ossature bois” 🌲
Travaillez maintenant le SEO de l’article “Maison ossature bois” en ciblant l’expression “maison ossature bois constructeur”.
- Les articles du blog permettent à BatiPro de se positionner sur des recherches plus précises (ex : « maison ossature bois MOB », « avantages maison bois »).
- Un article bien optimisé peut devenir une porte d’entrée vers le site : l’internaute découvre l’article, puis clique vers « Nos prestations » ou « Contact ».
- C’est aussi un moyen de montrer l’expertise de l’entreprise (conseils, explications, pédagogie).
- Titre incluant “maison ossature bois”.
- Sous-titres H2/H3 pour structurer le texte.
- Images avec ALT précis (ex : “Maison ossature bois contemporaine”).
- Liens internes vers la page “Nos prestations”.
- Choisir une requête cible adaptée au sujet de l’article.
- Structurer le texte avec des titres lisibles (H2, H3) : c’est bon pour les lecteurs et pour le SEO.
- Créer du maillage interne : les liens depuis l’article vers d’autres pages du site renforcent la cohérence du site aux yeux de Google et facilitent la navigation du visiteur.
4. Accessibilité : introduction au RGAA ♿
Le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) définit les règles pour rendre un site utilisable par tous : malvoyants, non voyants, troubles cognitifs, mobilité réduite, etc.
- Une partie des visiteurs peut avoir des difficultés visuelles, motrices ou cognitives : ils doivent pouvoir utiliser le site sans obstacle.
- Un site plus accessible est souvent un site plus clair, mieux structuré et donc plus agréable pour tous les utilisateurs.
- De plus en plus d’organisations (et parfois la loi) exigent le respect de critères d’accessibilité : c’est un argument de sérieux et de qualité.
4.1 Les 6 règles essentielles à connaître
- Texte alternatif (ALT) pour chaque image informative.
- Contrastes suffisants entre texte et fond.
- Navigation clavier possible (TAB / SHIFT+TAB).
- Liens explicites (éviter “cliquez ici”).
- Structure correcte des titres (un H1, puis H2, H3…).
- Formulaires étiquetés avec
<label>.
- Une image « maison-bois.jpg » doit avoir un ALT du type « Maison ossature bois BatiPro, façade sud » et pas « image1 ».
- Un lien « Contactez-nous pour un devis gratuit » est plus clair que « Cliquez ici ».
- Un formulaire de contact doit dire à quoi sert chaque champ (label « Nom », « Email », « Votre message », etc.).
4.2 Outils gratuits d’audit accessibilité
- Extension WAVE (WebAIM).
- Onglet Lighthouse dans Chrome DevTools.
- Asqatasun (audit open source orienté RGAA).
- Un audit permet de mesurer ce qui va bien et ce qui bloque certains utilisateurs.
- Les outils comme WAVE ou Lighthouse repèrent automatiquement les erreurs fréquentes (absence de ALT, contrastes insuffisants, problèmes de structure…).
- L’objectif n’est pas seulement d’« avoir une bonne note », mais d’améliorer réellement l’expérience de toutes les personnes qui visitent le site.
4.3 Extensions WordPress utiles
- WP Accessibility : correctifs automatiques (skip links, ARIA…)
- Accessibility Checker : vérification automatique des contenus.
- Vous réalisez votre page normalement (contenu, images, formulaires…).
- Ensuite, vous lancez un audit automatique (WAVE, Lighthouse, extension WordPress) et vous regardez les erreurs remontées.
- Vous corrigez progressivement : modifier un texte, ajouter un ALT, améliorer un contraste, etc.
5. Éco-conception & sobriété numérique 🌿
Un site éco-conçu consomme moins de ressources, charge plus vite et améliore l’expérience utilisateur.
- Chaque page chargée consomme de l’énergie (serveurs, réseau, appareils des utilisateurs).
- Des pages trop lourdes (images gigantesques, vidéos en auto-lecture, nombreux scripts) = plus d’énergie consommée et un site lent.
- Pour une entreprise comme BatiPro, qui construit des maisons et peut valoriser la dimension développement durable, un site sobre est cohérent avec son image.
- Un site plus léger est aussi plus agréable à utiliser sur mobile et dans les zones avec une connexion limitée.
5.1 Principes clés d’un site sobre
- Compresser les images (formats WebP si possible).
- Limiter le nombre d’extensions (plugins) installées.
- Éviter les vidéos en lecture automatique.
- Limiter les scripts externes (trackers, widgets inutiles…).
- Choisir un thème léger et bien codé.
5.2 Outils gratuits d’audit écologique
- EcoIndex (ecoindex.fr) : score environnemental de la page.
- PageSpeed Insights : mesure des performances et du poids de la page.
- Vous collez l’URL d’une page BatiPro dans EcoIndex ou PageSpeed.
- Vous observez les indicateurs : poids de la page, temps de chargement, nombre de ressources chargées…
- Vous appliquez ensuite des actions concrètes : compresser des images, supprimer un plugin inutile, désactiver une vidéo en auto-lecture, etc.
5.3 Extensions WordPress utiles
- Smush : compression des images.
- Lazy Load : chargement différé des images.
- Autoptimize : optimisation du code (CSS/JS).
6. Gérer les utilisateurs 👥
- Dans une vraie entreprise, plusieurs personnes peuvent intervenir sur le site : le dirigeant, une assistante, un stagiaire communication…
- WordPress permet de donner à chacun un rôle différent : certains peuvent tout faire, d’autres seulement rédiger, d’autres encore simplement se connecter.
- Cela protège le site : on évite de donner les droits d’administrateur à tout le monde.
🎬 Vidéo 10 – Ajouter des utilisateurs dans WordPress
Cette vidéo montre comment créer de nouveaux comptes, définir des rôles et gérer les droits d’accès.
Chemin : Utilisateurs → Ajouter
- Créer un compte auteur pour un collaborateur BatiPro.
- Donner un rôle contributeur à une personne qui peut proposer des articles mais pas les publier.
- Le gérant (Michel Leblanc) peut avoir un rôle Administrateur : il gère tout le site.
- L’assistante (Julie) peut avoir un rôle Contributeur : elle écrit des articles mais ne les publie pas sans validation.
7. Mettre en place une newsletter ✉️
- Une newsletter permet de rester en contact régulier avec les prospects et les anciens clients.
- Elle s’inscrit dans une logique d’inbound marketing : BatiPro publie des contenus utiles (conseils, explications, exemples de réalisations) pour attirer et fidéliser les clients.
- Elle peut mettre en avant les nouveaux articles du blog, les nouvelles réalisations ou des offres spéciales.
- Le formulaire d’inscription sur le site transforme un simple visiteur en contact qualifié (adresse email, consentement).
🎬 Vidéo 11 – Créer une newsletter
Vidéo qui explique comment installer une extension de newsletter et créer un premier formulaire d’inscription.
Objectif : permettre aux visiteurs de laisser leur email pour recevoir des actualités BatiPro (nouveaux projets, conseils, promotions…).
- Créer un formulaire d’inscription visible sur le site.
- Relier WordPress à un outil de newsletter (Brevo) via une clé API.
- Rédiger une newsletter simple qui renvoie vers les articles du blog BatiPro.
- Vous avez structuré le site avec un menu principal.
- Vous avez amélioré le SEO de la page d’accueil et d’un article clé.
- Vous avez appliqué des règles d’accessibilité RGAA.
- Vous avez réduit l’empreinte carbone du site (éco-conception).
- Vous avez appris à gérer les utilisateurs et à mettre en place une newsletter.
Récapitulatif des vidéos du tutoriel 🎥
| # | Titre de la vidéo | Partie du cours | Lien YouTube |
|---|---|---|---|
| 1 | Installer un thème WordPress | Partie 1 | Voir sur YouTube |
| 2 | Modifier logo, titre et slogan | Partie 1 | Voir sur YouTube |
| 3 | Créer une page et ajouter du contenu | Partie 1 | Voir sur YouTube |
| 4 | Ajouter un widget | Partie 1 | Voir sur YouTube |
| 5 | Ajouter un formulaire de contact | Partie 1 | Voir sur YouTube |
| 6 | Ajouter une carte Google Maps | Partie 1 | Voir sur YouTube |
| 7 | Créer des articles et des catégories | Partie 1 | Voir sur YouTube |
| 8 | Créer un menu | Partie 2 | Voir sur YouTube |
| 9 | Optimiser le référencement SEO | Partie 2 | Voir sur YouTube |
| 10 | Ajouter des utilisateurs | Partie 2 | Voir sur YouTube |
| 11 | Créer une newsletter | Partie 2 | Voir sur YouTube |