Etiqueta meta theme-color - Docs de MetricSpot

Què comprova aquesta auditoria

Escaneja el <head> del document buscant una o més etiquetes <meta name="theme-color">. La comprovació passa quan n’hi ha almenys una amb un color CSS vàlid. També reconeix les variants per media query (media="(prefers-color-scheme: light)" i media="(prefers-color-scheme: dark)") perquè no et penalitzin per enviar un parell propi light/dark.

Per què importa

theme-color acoloreix superfícies d’UI que el navegador controla en nom teu:

Chrome a Android tinta la barra d’adreces i la barra d’estat de sobre.
Safari a iOS (15.4+) tinta la part superior del viewport quan la pàgina fa scroll sota el notch.
Les PWA instal·lades l’utilitzen per a la barra de títol a Android i el fons de la splash screen.
Edge a l’escriptori l’utilitza per a la barra de pestanyes quan el lloc està en una finestra PWA.
Slack, Discord i alguns clients de xat la llegeixen quan renderitzen previsualitzacions d’enllaç per a contextos d’app instal·lada.

No és un senyal de posicionament i no afecta la puntuació Lighthouse. És un senyal de polidesa: un lloc que l’envia sembla intencionat, i un que no, sembla una instal·lació de WordPress per defecte. L’arreglo triga trenta segons.

Es combina naturalment amb la resta del mòdul social i d’identitat: apple-touch-icon, favicon i etiquetes Open Graph. Mateix tema: com es presenta el lloc fora del viewport del navegador.

Com solucionar-ho

Valor estàtic, tria el color dominant de la teva marca i posa’l al head del document:

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

Utilitza un valor hex (#0a3d62), rgb() o qualsevol color CSS vàlid. Prova’l amb text blanc i amb text negre: Android renderitza el rellotge del sistema i les icones de bateria sobre el teu color, i un color de saturació mitjana sol funcionar millor.

Variants light + dark, els navegadors moderns respecten els overrides amb media query, així que pots enviar un parell que segueixi el tema del sistema de l’usuari:

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

Aquest és el defecte correcte per a qualsevol lloc que ja suporta mode fosc. Safari 15.4+ i Chrome 93+ l’honoren; els navegadors antics ignoren les variants i recorren a la primera etiqueta sense atribut media, així que posa el teu defecte al final com a xarxa de seguretat:

<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">

Sincronitza-ho amb el teu web app manifest. Si envies un manifest.webmanifest (qualsevol PWA instal·lable ho fa), mantén el seu camp theme_color sincronitzat amb la meta etiqueta: les apps instal·lades prefereixen el manifest:

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

Astro, afegeix-ho un cop al teu base layout 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), utilitza l’API de metadata a app/layout.tsx:

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

WordPress, afegeix-ho via wp_head:

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

Audita-ho:

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

Després obre el lloc en un dispositiu Android Chrome (o utilitza Chrome DevTools → Device Mode → preset mòbil) i mira la barra d’adreces: hauria de reflectir el teu color.

Preguntes freqüents

theme-color afecta el SEO o el posicionament?

No. Google no l’utilitza com a senyal de posicionament. És purament una pista de presentació recollida pels navegadors mòbils i amfitrions de PWA. La regla viu al mòdul Social de MetricSpot perquè forma part de “com es veu el teu lloc quan es consumeix fora del viewport”, mateixa família que les imatges Open Graph i els favicons.

Què passa als navegadors que no la suporten?

Res. Els navegadors que no entenen <meta name="theme-color"> l’ignoren silenciosament. No hi ha penalització de rendiment ni layout trencat: és una millora additiva.

Puc canviar theme-color des de JavaScript?

Sí, i Chrome i Safari l’animen sobre la marxa. Útil per a llocs amb colors específics per secció:

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

Sigues elegant: invertir el color en cada scroll event és marejant. Els canvis a nivell de secció (hero vs. contingut vs. footer) funcionen bé; els canvis per scroll no.