Pages : Page d'atterrissage
Guide la structure des pages d'atterrissage de campagne, le flux de conversion et l'optimisation. Utilisation principale : Publicités payantes (PPC/SEM) — les pages d'atterrissage sont généralement construites pour recevoir du trafic payant ; l'alignement entre la publicité et la page est crucial pour la conversion. Voir paid-ads-strategy pour savoir quand utiliser les publicités payantes et les principes d'alignement annonce-page. S'applique également aux inscriptions d'affiliés, lancements de produits, capture de leads, inscriptions aux webinaires, et autres pages de conversion à objectif unique. Échelle : Lors de la construction de nombreuses pages d'atterrissage (spécifiques à une ville, à un produit, à une intégration), utilisez programmatic-seo (modèle + données) et template-page-generator pour la conception du modèle. Diffère de la page d'accueil (multi-usage) et des pages produits (catalogue).
Lors de l'appel : Lors de la première utilisation, si utile, ouvrez avec 1 à 2 phrases sur ce que couvre cette compétence et pourquoi c'est important, puis fournissez le résultat principal. Lors des utilisations suivantes ou lorsque l'utilisateur demande de passer outre, allez directement au résultat principal.
Publicités payantes : Exigences pour la page d'atterrissage
Lorsque la page d'atterrissage reçoit du trafic payant : la promesse de l'annonce doit être immédiatement visible sur la page ; mobile-first (CTA au-dessus de la ligne de flottaison, chargement rapide) ; formulaire minimal (moins de champs) ; éléments de confiance au-dessus de la ligne de flottaison. Voir paid-ads-strategy pour l'alignement complet annonce-page et le Quality Score.
Évaluation initiale
Vérifiez d'abord le contexte du projet : Si .claude/project-context.md ou .cursor/project-context.md existe, lisez-le pour connaître le produit, l'audience et la proposition de valeur.
Identifiez :
- Objectif de la page : Inscription, achat, capture de leads, webinaire, téléchargement
- Source de trafic : Publicités payantes, e-mail, affiliation, organique
- Audience : Froide vs chaude ; segmentez si connu
Structure de la page d'atterrissage (Flux en 5 étapes)
| Étape | Objectif | Éléments |
|---|---|---|
| 1. Arrêter le défilement | Capturer l'attention en ~2,6 secondes | Titre, sous-titre, image ou vidéo hero |
| 2. Gagner la confiance | Preuve sociale avant la demande | Logos, témoignages, évaluations, nombre de clients |
| 3. Expliquer la valeur | Avantages, fonctionnalités, cas d'usage | Texte clair ; à qui cela s'adresse, ce que cela fait |
| 4. Lever les doutes | Gestion des objections | FAQ, garanties, comparaison |
| 5. Inciter à l'action | CTA unique principal | Une action claire ; répéter aux points logiques |
Chaque élément doit servir l'une de ces cinq fonctions. Les pages avec plusieurs offres concurrentes génèrent environ 266 % de leads en moins.
Formule de titre
[À qui cela s'adresse] + [Résultat spécifique] + [Temps/qualificatif]
- À éviter : Promesses abstraites ("Libérez votre potentiel", "Transformez votre entreprise")
- Préférer : Concret ("Réduisez le traitement des factures de 70 % — sans nouveau logiciel")
Bonnes pratiques CTA
- Un seul CTA principal : Aucune action concurrente ; créez une "voie unique" vers la conversion
- Au-dessus de la ligne de flottaison sur mobile : Accessible au pouce ; ~65 %+ du trafic est mobile
- Texte axé sur la valeur : "Démarrer l'essai gratuit" plutôt que "Envoyer"
- Associer à des signaux de confiance : Nombre de clients, logos ou statistiques à côté du bouton
- Supprimer ou minimiser la navigation : Peut augmenter la conversion de 2 à 28 %
Pages d'atterrissage programmatiques (Échelle)
Lorsque vous avez besoin de nombreuses pages d'atterrissage (par exemple, spécifiques à une ville, à un produit, à une intégration), utilisez programmatic-seo : un modèle + données = des centaines ou milliers de pages d'atterrissage. Appliquez la structure de page d'atterrissage (flux en 5 étapes, CTA, confiance) au modèle ; voir template-page-generator pour la conception du modèle. Exemple : Pages d'atterrissage "[Produit] pour [Ville]" avec données locales ; pages d'inscription d'intégration "[Appli A] + [Appli B]".
Types de pages
| Type | Usage | Destination du CTA |
|---|---|---|
| Click-through | Audience chaude avant d'envoyer vers l'offre ; idéal pour SaaS, abonnements | pricing-page, products-page, inscription |
| Capture de leads | Collecter l'e-mail pour le nurturing ; formulaires de 5 champs ou moins (les formulaires plus longs provoquent ~81 % d'abandon) | newsletter-signup, contact-page |
| Axé produit | Présentation approfondie des fonctionnalités et avantages ; lancement de produit | products-page, features-page |
| Comparatif | X vs Y ; annonces sur mots-clés de marque concurrente ; intention commerciale | alternatives-page, features-page, pricing-page |
| Cas d'usage / Solutions | Pour les produits intégrés difficiles à diviser en outils | features-page, services-page |
| Outils gratuits | Utilitaires autonomes ; génération de leads ; même ICP ; extrait du produit | tools-page-generator ; page d'outil comme page d'atterrissage si avec accès conditionnel |
| Pont/bonus | Incitation supplémentaire à acheter via votre lien | pricing-page, products-page |
| Webinaire/événement | Inscription à l'événement ; collecter les inscriptions avant le direct | resources-page (webinaire en tant que ressource) |
Page d'atterrissage ↔ Types de page (Contenu et flux)
Tirer le contenu de (étapes 2 à 4) :
- customer-stories-page-generator : Témoignages, études de cas pour preuve sociale ; extraits Défi→Solution→Résultats
- faq-page-generator : Section FAQ pour gérer les objections ; réutiliser les Q&R liés à la conversion
- features-page-generator : Texte descriptif des fonctionnalités axé sur les avantages pour l'étape "Expliquer la valeur"
- resources-page-generator : Aimant à leads (ebook, modèle) en échange d'un e-mail ; webinaire en tant que ressource
Le CTA envoie vers :
- pricing-page-generator : Page d'atterrissage click-through → tarifs ; inscription, essai
- products-page-generator : Page d'atterrissage produit → détail du produit ou catalogue
- services-page-generator : Page d'atterrissage service → contact, devis, réservation
- contact-page-generator : Page d'atterrissage capture de leads → formulaire de contact ; demande de démo B2B
- affiliate-page-generator, creator-program : Inscription partenaire = type de page d'atterrissage
Liens internes :
- Lier la page d'atterrissage à la page d'accueil (ancre de marque) ; about-page (confiance) ; privacy-page (conformité du formulaire)
- Éviter les pages d'atterrissage orphelines : assurez au moins un lien interne depuis le sitemap, la navigation ou le hub de campagne
Performances et design
- Temps de chargement : Moins de 2,5 secondes ; chaque seconde supplémentaire peut coûter ~7 % de conversion
- Mobile-first : Responsive ; CTA visible sans défilement
- Visuels : L'image ou la vidéo hero peut améliorer la conversion jusqu'à 80 %
- Esthétique frontend : Pour une typographie distinctive, des animations, une composition spatiale, des arrière-plans — voir brand-visual-generator Esthétique frontend
- Divulgation : Divulgation d'affiliation/paid conforme à la FTC lorsque applicable
Liste de vérification avant livraison
Avant de publier une page d'atterrissage, vérifiez :
| Catégorie | Vérification |
|---|---|
| Visuel | Pas d'émojis comme icônes (utilisez SVG) ; icônes d'un ensemble cohérent (Heroicons/Lucide) ; les états de survol ne provoquent pas de décalage de mise en page |
| Interaction | Tous les éléments cliquables ont cursor-pointer ; le survol fournit un retour clair ; transitions de 150 à 300 ms |
| Accessibilité | Les images ont un texte alternatif ; les champs de formulaire ont des étiquettes ; la couleur n'est pas le seul indicateur ; prefers-reduced-motion respecté |
| Mise en page | Pas de défilement horizontal sur mobile ; contenu non caché derrière une navigation fixe ; responsive à 375px, 768px, 1024px |
| Performances | Temps de chargement inférieur à 2,5 s ; LCP optimisé ; images en WebP/chargement différé si approprié |
| Images | Voir image-optimization pour le texte alternatif, le format, le responsive, le chargement différé |
Format de sortie
- Titre et sous-titre
- Structure (sections du flux en 5 étapes)
- Emplacement des signaux de confiance
- Texte et emplacement du CTA
- Gestion des objections (FAQ, garanties)
- Liens internes (pages de destination)
- Métadonnées SEO (si la page est indexée)
Compétences associées
- hero-generator : Section hero (étape 1)
- grid, list : Mise en page du contenu sous le hero ; sections, fonctionnalités, témoignages
- cta-generator : Conception et emplacement du bouton CTA
- image-optimization : Texte alternatif, WebP, LCP, responsive, chargement différé
- pricing-page-generator : Destination de la page d'atterrissage click-through ; CTA d'inscription
- faq-page-generator : Section FAQ pour gérer les objections
- howto-section-generator : Section d'étapes "Comment faire" (par exemple, flux de configuration) avant FAQ/CTA
- comparison-table-generator : Section de tableau de comparaison concurrent / traditionnel-vs-moderne ; correspondance de message avec les annonces
- homepage-generator : Page d'accueil multi-usage vs page d'atterrissage à objectif unique ; structure similaire
- paid-ads-strategy : Alignement annonce-page ; quand utiliser les publicités payantes
- alternatives-page-generator : Annonces sur mots-clés de marque concurrente → page d'atterrissage comparative (pas un blog)
- programmatic-seo : Mise à l'échelle des pages d'atterrissage via modèle + données
- template-page-generator : Structure de modèle pour les pages d'atterrissage programmatiques
- title-tag, meta-description, page-metadata : Métadonnées de la page d'atterrissage