Skip to content
AMN Docs

BaseHead

Switch to Zen ModeSwitch to Presentation Mode

Type de ressource : Composant Astro (UI atomique)
Fichier source : src/components/BaseHead.astro
Statut : Actif

1. Vue d’ensemble

Section titled “1. Vue d’ensemble”

1.1. Description

Section titled “1.1. Description”

Composant pour les métadonnées HTML globales de la page (meta tags, title, description, Open Graph, Twitter Card). Importe également le CSS global.

1.2. Objectif

Section titled “1.2. Objectif”
  • Centraliser les mĂ©tadonnĂ©es SEO pour toutes les pages
  • Assurer la cohĂ©rence des meta tags sur tout le site
  • Importer le CSS global pour inclure les styles sur toutes les pages
  • Fournir une image de fallback pour le partage social

1.3. Caractéristiques

Section titled “1.3. CaractĂ©ristiques”
Propriété Valeur
Type UI atomique
Hydratation Aucune
Framework JS Aucun
Accessibilité Partiellement conforme (meta tags)
Responsive Non applicable

2. Architecture et structure

Section titled “2. Architecture et structure”

2.1. Emplacement dans l’arborescence

Section titled “2.1. Emplacement dans l’arborescence”
src/components/
├── BaseHead.astro
├── Header.astro
├── Footer.astro
├── FormattedDate.astro
└── HeaderLink.astro

2.2. Composants dépendants

Section titled “2.2. Composants dĂ©pendants”
Composant parent Fichier Relation
Toutes les pages src/pages/*.astro Utilisation dans le <head>

2.3. Composants enfants utilisés

Section titled “2.3. Composants enfants utilisĂ©s”
Composant enfant Fichier RĂŽle
Aucun - Composant leaf

3. Implémentation

Section titled “3. ImplĂ©mentation”

3.1. Variante : Composant UI atomique (HTML + CSS purs)

Section titled “3.1. Variante : Composant UI atomique (HTML + CSS purs)”
src/components/BaseHead.astro
---
import '../styles/global.css';
import type { ImageMetadata } from 'astro';
import FallbackImage from '../assets/blog-placeholder-1.jpg';
import { SITE_TITLE } from '../consts';


interface Props {
  title: string;
  description: string;
  image?: ImageMetadata;
}


const canonicalURL = new URL(Astro.url.pathname, Astro.site);


const { title, description, image = FallbackImage } = Astro.props;
---


<!-- Global Metadata -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" href="/favicon.ico" />
<link rel="sitemap" href="/sitemap-index.xml" />
<link
  rel="alternate"
  type="application/rss+xml"
  title={SITE_TITLE}
  href={new URL('rss.xml', Astro.site)}
/>
<meta name="generator" content={Astro.generator} />


<!-- Canonical URL -->
<link rel="canonical" href={canonicalURL} />


<!-- Primary Meta Tags -->
<title>{title}</title>
<meta name="description" content={description} />


<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content={Astro.url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(image.src, Astro.url)} />


<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />

3.2. Utilisation dans une page

Section titled “3.2. Utilisation dans une page”
---
import BaseHead from '../components/BaseHead.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
---


<!doctype html>
<html lang="en">
  <head>
    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
  </head>
  <body>
    <!-- Contenu de la page -->
  </body>
</html>

4. Props et interface

Section titled “4. Props et interface”

4.1. Props obligatoires

Section titled “4.1. Props obligatoires”
Prop Type Description Exemple
title string Titre de la page "Accueil"
description string Description de la page "Blog personnel"

4.2. Props optionnelles

Section titled “4.2. Props optionnelles”
Prop Type Description Valeur par défaut
image ImageMetadata Image pour Open Graph/Twitter FallbackImage (blog-placeholder-1.jpg)

4.3. Slots

Section titled “4.3. Slots”

Aucun slot n’est implĂ©mentĂ© dans ce composant.

5. StratĂ©gie d’hydratation

Section titled “5. StratĂ©gie d’hydratation”

5.1. Politique d’hydratation

Section titled “5.1. Politique d’hydratation”
Type de composant Stratégie Rationale
Composant UI atomique Aucune HTML pur, pas d’interaction

5.2. Directives Astro utilisées

Section titled “5.2. Directives Astro utilisĂ©es”

Aucune directive n’est utilisĂ©e (composant HTML pur).

5.3. Impact sur les performances

Section titled “5.3. Impact sur les performances”
MĂ©trique Sans hydratation
HTML size +1 KB
CSS size +taille global.css
JS size 0 KB
TTI Immédiat

6. Styles et design system

Section titled “6. Styles et design system”

6.1. Utilisation des design tokens

Section titled “6.1. Utilisation des design tokens”

Non applicable - ce composant n’a pas de styles inline, il importe le CSS global.

6.2. Responsive design

Section titled “6.2. Responsive design”

Non applicable - les meta tags viewport assurent le responsive design au niveau global.

6.3. Mode sombre

Section titled “6.3. Mode sombre”

Non applicable - ce composant ne gĂšre pas le mode sombre.

7. Accessibilité (a11y)

Section titled “7. AccessibilitĂ© (a11y)”

7.1. Conformité WCAG 2.1 AA

Section titled “7.1. ConformitĂ© WCAG 2.1 AA”
CritÚre Implémentation Statut
1.1.1 Non-text Content Alt text non applicable (pas d’images) N/A
1.3.1 Info and Relationships Structure HTML sĂ©mantique (<head>, <title>) ✅
1.4.3 Contrast (Minimum) Non applicable (pas de contenu visuel) N/A
2.4.7 Focus Visible Non applicable (pas d’élĂ©ments interactifs) N/A

7.2. Attributs ARIA utilisés

Section titled “7.2. Attributs ARIA utilisĂ©s”

Aucun attribut ARIA n’est utilisĂ© (composant de mĂ©tadonnĂ©es).

7.3. Navigation clavier

Section titled “7.3. Navigation clavier”

Non applicable (composant de métadonnées).

7.4. Tests d’accessibilitĂ©

Section titled “7.4. Tests d’accessibilitĂ©â€
Terminal window
# Test avec Lighthouse
npx lighthouse http://localhost:4321/ --view

8. Performance et optimisation

Section titled “8. Performance et optimisation”

8.1. Optimisations appliquées

Section titled “8.1. Optimisations appliquĂ©es”
  • ✅ HTML statique par dĂ©faut
  • ✅ Pas de JavaScript
  • ✅ Import unique du CSS global
  • ✅ Canonical URL pour Ă©viter le duplicate content

8.2. Core Web Vitals

Section titled “8.2. Core Web Vitals”
Métrique Objectif Stratégie
LCP < 2.5s Pas de JS bloquant
INP < 200ms Pas de JS
CLS < 0.1 Pas de layout shift

8.3. Taille du composant

Section titled “8.3. Taille du composant”
Type HTML CSS JS (hydraté) Total
UI atomique 1 KB +global.css 0 KB 1 KB + global.css

9. DĂ©bogage et troubleshooting

Section titled “9. DĂ©bogage et troubleshooting”

9.1. ProblĂšmes courants

Section titled “9.1. Problùmes courants”
SymptĂŽme Cause probable Solution
Styles non appliquĂ©s global.css non importĂ© VĂ©rifier le chemin d’import
Meta tags incorrects Props non passées Vérifier les props title et description
Image fallback incorrecte FallbackImage non trouvĂ© VĂ©rifier le chemin de l’asset

9.2. Tests manuels

Section titled “9.2. Tests manuels”
Terminal window
# Test local
npm run dev


# VĂ©rification des meta tags
# Ouvrir les DevTools → Onglet Network → Recharger la page
# Vérifier les meta tags dans la réponse HTML

9.3. Logs et monitoring

Section titled “9.3. Logs et monitoring”

Non applicable (composant statique).

10. Bonnes pratiques

Section titled “10. Bonnes pratiques”

10.1. Architecture

Section titled “10.1. Architecture”
  • ✅ Centraliser les mĂ©tadonnĂ©es dans un composant unique
  • ✅ Importer le CSS global une seule fois
  • ✅ Utiliser une image de fallback pour le partage social
  • ✅ Typer les props avec TypeScript

10.2. Accessibilité

Section titled “10.2. AccessibilitĂ©â€
  • ✅ Toujours inclure un title et une description
  • ✅ Utiliser les meta tags Open Graph et Twitter Card
  • ✅ Inclure une canonical URL

10.3. Performance

Section titled “10.3. Performance”
  • ✅ Pas de JavaScript inutile
  • ✅ Image fallback optimisĂ©e
  • ✅ Pas de styles inline

10.4. Maintenance

Section titled “10.4. Maintenance”
  • ✅ Mettre Ă  jour les meta tags selon les besoins SEO
  • ✅ VĂ©rifier la compatibilitĂ© des meta tags avec les rĂ©seaux sociaux

11. Évolutions et roadmap

Section titled “11. Évolutions et roadmap”

11.1. Améliorations planifiées

Section titled “11.1. AmĂ©liorations planifiĂ©es”
  • Ajout de meta tags supplĂ©mentaires (robots, author)
  • Support du mode sombre (theme-color)
  • Ajout de structured data (JSON-LD)
  • Support des diffĂ©rentes images pour Open Graph et Twitter

11.2. Limitations connues

Section titled “11.2. Limitations connues”
  • ❌ Pas de support du mode sombre
  • ❌ Pas de structured data
  • ❌ Meta tags Twitter incomplets (twitter:title, twitter:description manquants)

12. Ressources liées

Section titled “12. Ressources liĂ©es”
  • Documentation Astro : Components
  • Documentation Astro : SEO
  • DAT L2 : §4 - StratĂ©gie d’Hydratation & Gestion du JavaScript
  • Composants associĂ©s :
    • src/components/Header.astro
    • src/components/Footer.astro
  • Fichiers assets : src/assets/blog-placeholder-1.jpg
  • CSS global : src/styles/global.css

13. Historique des modifications

Section titled “13. Historique des modifications”
Date Version Description Auteur
2026-09-15 1.0 Création initiale Devin
Edit page

Last updated:

Built with StarlightPowered by Cloudflare