Cas client / 03 2026 Agadir, Maroc Site vitrine + SEO + Lead gen

Atlas Teardrop.

Comment nous avons donné une présence digitale haut de gamme à un artisan marocain qui fabrique des caravanes teardrop sur-mesure.

atlas

(01) — Le contexte

Un artisan sans visibilité sur Google.

Un fabricant de caravanes teardrop installé à Agadir, capable de livrer des objets exceptionnels — mais invisible sur le web pour le mot-clé qui compte vraiment : teardrop Maroc.

Les caravanes étaient là, le savoir-faire aussi — mais aucun canal pour faire venir les bons prospects. Le bouche-à-oreille atteint un plafond rapide, surtout quand on vise une clientèle internationale en quête d’un objet rare.

Nous avons conçu et livré un site vitrine complet, SEO-optimisé pour le terrain marocain, avec un système de lead-gen WhatsApp direct et un blog pour capturer le trafic long-tail. Stack volontairement minimaliste — HTML/CSS/JS pur — pour une rapidité absolue et zéro dette technique.

(02) — Ce qui a été livré

Un site complet, zéro framework.

3modèles

Trois pages produit dédiées — Le Souss, L’Atlas, Le Sahara — avec hero, galerie, specs et FAQ.

0framework

HTML, CSS et JS purs. Zéro React, zéro Tailwind. Performance et longévité avant tout.

5breakpoints

Mobile-responsive testé jusqu’à 380 px. Le site marche partout, même sur les vieux téléphones.

JSON-LD

Schema.org complet : LocalBusiness, Product, FAQPage, BreadcrumbList. Pour parler la langue de Google.

(03) — La méthode

Cinq étapes.
Du brief au lead.

Un projet artisanal mérite une direction artisanale. On a co-construit chaque page avec le client, plutôt que de plaquer un template.

The Framework.

Étape 01

Direction artistique

Palette terre cuite, pin et sable. Polices Fraunces + Archivo. Un univers visuel qui parle aux acheteurs sensibles à l’artisanat.

Étape 02

Architecture technique

Choix radical : HTML/CSS/JS pur. Aucun framework, aucune dépendance. Pages servies en quelques kilooctets, indexées sans friction.

Étape 03

Pages produits

Une page dédiée par modèle — hero photo, galerie, fiche technique, FAQ accordéon, CTA pinné en bas. Chaque modèle a sa propre identité de gamme.

Étape 04

SEO local

JSON-LD complet, sitemap auto-généré, mots-clés long-tail orientés Maroc. Property GSC validée, pixel Open Graph, balises canonical propres.

Étape 05

Lead-gen WhatsApp

Formulaire 6 champs minimalistes, un seul CTA qui ouvre WhatsApp avec un message pré-rempli. Pas de spam, pas de qualifs interminables — du contact direct.

(04) — La solution livrée

Huit briques.
Un site qui travaille pour l’artisan.

Chaque module a une raison d’être business — convertir un visiteur, ou ranker sur Google. Pas de fonctionnalité décorative.

3 pages produits

Le Souss, L’Atlas, Le Sahara — chaque modèle a sa page complète, sa palette de positionnement et son tier badge.

Formulaire WhatsApp

Six champs essentiels, un seul bouton. Au clic, WhatsApp s’ouvre avec un message structuré pré-rempli.

Blog auto-généré

Pipeline Markdown → HTML statique. Chaque article publie via un fichier .md, génération auto du sitemap.

Carte Maroc animée

Silhouette du Maroc en SVG, marker Agadir double-pulse, animation de respiration. Ancrage géographique fort.

JSON-LD complet

LocalBusiness, Product, FAQPage, BreadcrumbList. Google comprend qui est qui, où, et ce qu’il vend.

Mobile-first

Cinq breakpoints jusqu’à 380 px. Header strict, gallery 2 colonnes, anti-overflow universel.

Sitemap auto

Régénéré à chaque build, soumis à Google Search Console. Indexation accélérée.

Pipeline déploiement

Build local (Python) puis push API Hostinger en 4 étapes. Backup auto avant chaque deploy, zéro perte.

(05) — Sous le capot

Stack minimaliste, conçue pour durer.

HTML / CSS / JS pur

Aucun framework. Aucune dépendance npm. Le site marchera encore dans dix ans, sans maintenance.
Hostinger (mutualisé)

Hébergement choisi pour son rapport prix/perfs et son CDN intégré. Déploiement via API.
Google Fonts (Fraunces + Archivo)

Fraunces pour les titres — caractère artisanal, italiques chaleureuses. Archivo pour le corps, lisible et neutre.
Python + Markdown (blog)

Articles écrits en .md, conversion HTML maison, sitemap regénéré au build. Aucun CMS lourd.
JSON-LD schema.org

Toutes les données structurées Google attend : LocalBusiness, Product, FAQPage, BreadcrumbList.
Hostinger Deploy API

Pipeline push en 4 étapes TUS (upload-urls → POST → PATCH → deploy). Reproductible, scriptable.