Chapitre 09 : Concevoir et créer un site internet

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.

Pourquoi cette partie est importante ?

  • 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é.
Objectifs de la Partie 2 À la fin de ce chapitre, vous serez capable de :

  • 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.

Le menu permet aux visiteurs de se repérer rapidement et de comprendre la structure du site. Il doit être clair, logique et accessible.

Pourquoi créer un menu bien structuré ?

  • 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.
En résumé : vous créez la « carte » du site BatiPro. Un futur client doit pouvoir passer de « Je découvre l’entreprise » (Accueil) à « Je vois ce qu’elle propose » (Nos prestations) puis « Je lis des conseils » (Blog) et enfin « Je les contacte » (Contact).

2. Améliorer le SEO de la page d’accueil 🔍

C’est quoi le référencement naturel (SEO) ?

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”.

Pourquoi utiliser une extension SEO (comme Yoast) ?

  • 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).
Ce que vous faites concrètement ici

  • 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”.

Pourquoi optimiser un article de blog ?

  • 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).
Checklist SEO + accessibilité pour l’article

  • 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”.
Ce que vous apprenez ici :

  • 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.

Pourquoi l’accessibilité est un enjeu pour BatiPro ?

  • 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>.
Exemples concrets

  • 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).
Pourquoi réaliser un audit d’accessibilité ?

  • 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.
Comment utiliser ces outils en pratique ?

  • 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.

Pourquoi parler d’éco-conception pour un site web ?

  • 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.
Comment utiliser ces outils ?

  • 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 👥

Pourquoi créer plusieurs comptes 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.
Exemple avec le cas BatiPro

  • 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 ✉️

Pourquoi une newsletter pour BatiPro ?

  • 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…).

Ce que vous apprenez ici

  • 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.
Bilan de la Partie 2

  • 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