Balise méta theme-color - Docs MetricSpot

Q: Que se passe-t-il sur les navigateurs qui ne la supportent pas ?

Rien. Les navigateurs qui ne comprennent pas l'ignorent silencieusement. Pas de pénalité de performance, pas de mise en page cassée — c'est une amélioration additive.

Ce que vérifie ce contrôle

Analyse le <head> du document à la recherche d’une ou plusieurs balises <meta name="theme-color">. Le contrôle passe quand au moins une est présente avec une couleur CSS valide. Il reconnaît aussi les variantes par media query (media="(prefers-color-scheme: light)" et media="(prefers-color-scheme: dark)"), donc vous n’êtes pas pénalisé pour avoir livré une bonne paire clair/sombre.

Pourquoi c’est important

theme-color colore les surfaces d’UI que le navigateur contrôle pour votre compte :

Chrome sur Android teinte la barre d’adresse et la barre d’état au-dessus.
Safari sur iOS (15.4+) teinte le haut de la zone d’affichage quand la page défile sous l’encoche.
PWA installées l’utilisent pour la barre de titre sur Android et le fond du splash screen.
Edge sur desktop l’utilise pour les onglets quand le site est dans une fenêtre PWA.
Slack, Discord et certains clients de chat la lisent pour rendre les aperçus de liens en contexte d’app installée.

Ce n’est pas un signal de classement et ça n’affecte pas le score Lighthouse performance. C’est un signal de soin — un site qui la livre paraît intentionnel, un site qui ne la livre pas ressemble à une installation WordPress par défaut. Le correctif prend trente secondes.

Elle s’associe naturellement au reste du module social et identité : Apple touch icon, Favicon, et Balises OpenGraph essentielles. Même thème : comment le site se présente hors de la zone d’affichage du navigateur.

Comment corriger

Valeur statique — choisissez votre couleur de marque dominante et placez-la dans le head du document :

<meta name="theme-color" content="#0a3d62">

Utilisez une valeur hex (#0a3d62), rgb(), ou toute couleur CSS valide. Testez-la contre du texte blanc et noir — Android rend l’horloge système et les icônes de batterie par-dessus votre couleur, et une couleur de saturation moyenne fonctionne généralement le mieux.

Variantes clair + sombre — les navigateurs modernes respectent les surcharges par media query, vous pouvez donc livrer une paire qui suit le thème système de l’utilisateur :

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0a0a">

C’est le bon défaut pour tout site qui supporte déjà un mode sombre. Safari 15.4+ et Chrome 93+ l’honorent ; les anciens navigateurs ignorent les variantes et retombent sur la première balise sans attribut media, donc mettez votre défaut en dernier comme filet de sécurité :

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0a0a">
<meta name="theme-color" content="#0a3d62">

Synchronisez avec votre web app manifest. Si vous livrez un manifest.webmanifest (toute PWA installable le fait), gardez son champ theme_color synchronisé avec la balise méta — les apps installées préfèrent le manifest :

{
  "name": "Example",
  "theme_color": "#0a3d62",
  "background_color": "#ffffff",
  "display": "standalone"
}

Astro — ajoutez-la une fois dans votre layout de base src/layouts/Base.astro :

<head>
  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0a0a">
</head>

Next.js (App Router) — utilisez l’API metadata dans app/layout.tsx :

export const metadata = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
    { media: "(prefers-color-scheme: dark)", color: "#0a0a0a" },
  ],
};

WordPress — ajoutez-la via wp_head :

add_action('wp_head', function () {
  echo '<meta name="theme-color" content="#0a3d62">';
});

Auditez-la :

curl -s https://votredomaine.com/ | grep -i 'theme-color'

Puis ouvrez le site sur un appareil Android Chrome (ou utilisez Chrome DevTools → Device Mode → préréglage mobile) et regardez la barre d’adresse — elle doit refléter votre couleur.

Questions fréquentes

theme-color affecte-t-il le SEO ou le classement ?

Non. Google ne l’utilise pas comme signal de classement. C’est purement un indice de présentation capté par les navigateurs mobiles et les hôtes PWA. La règle est dans le module Social de MetricSpot parce qu’elle fait partie de « comment votre site est consommé hors zone d’affichage » — même famille que les images OpenGraph et les favicons.

Que se passe-t-il sur les navigateurs qui ne la supportent pas ?

Rien. Les navigateurs qui ne comprennent pas <meta name="theme-color"> l’ignorent silencieusement. Pas de pénalité de performance, pas de mise en page cassée — c’est une amélioration additive.

Puis-je changer theme-color depuis JavaScript ?

Oui, et c’est animé à la volée par Chrome et Safari. Utile pour des sites avec des couleurs spécifiques par section :

document.querySelector('meta[name="theme-color"]')
  .setAttribute('content', '#ff0066');

Soyez de bon goût — basculer la couleur à chaque événement de scroll donne le tournis. Les changements au niveau section (hero vs. contenu vs. pied de page) fonctionnent bien ; les changements à chaque scroll, non.