social

Meta tag theme-color

MetricSpot verifica il meta tag theme-color. Tinge il chrome del browser mobile, la title bar PWA e le tab strip — fix da 30 secondi che fa sembrare un sito intenzionale.

Cosa verifica questo controllo

Scansiona l’<head> del documento per uno o più tag <meta name="theme-color">. Il controllo passa quando almeno uno è presente con un colore CSS valido. Riconosce anche varianti media-query (media="(prefers-color-scheme: light)" e media="(prefers-color-scheme: dark)") così non vieni penalizzato per spedire una coppia light/dark corretta.

Perché è importante

theme-color colora le superfici UI che il browser controlla per tuo conto:

  • Chrome su Android tinge la barra degli indirizzi e la status bar sopra.
  • Safari su iOS (15.4+) tinge la cima del viewport quando la pagina scorre sotto il notch.
  • PWA installate lo usano per la title bar su Android e lo sfondo della splash screen.
  • Edge su desktop lo usa per la tab strip quando il sito è in una finestra Progressive Web App.
  • Slack, Discord e alcuni client di chat lo leggono renderizzando le anteprime di link per contesti di app installate.

Non è un segnale di posizionamento e non influisce su Punteggio prestazioni Lighthouse. È un segnale di rifinitura — un sito che lo spedisce sembra intenzionale, e uno che non lo fa sembra un’installazione WordPress di default. Il fix richiede trenta secondi.

Si abbina naturalmente al resto del modulo social e identity: apple-touch-icon, favicon e Tag Open Graph principali. Stesso tema: come il sito si presenta fuori dal viewport del browser.

Come sistemarlo

Valore statico — scegli il tuo colore brand dominante e mettilo nell’head del documento:

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

Usa un valore hex (#0a3d62), rgb(), o qualsiasi colore CSS valido. Testalo sia su testo bianco sia nero — Android renderizza orologio di sistema e icone batteria sopra il tuo colore, e un colore a saturazione media di solito funziona meglio.

Varianti light + dark — i browser moderni rispettano gli override media-query, così puoi spedire una coppia che segue il tema di sistema dell’utente:

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

Questo è il default giusto per qualsiasi sito che già supporta una dark mode. Safari 15.4+ e Chrome 93+ lo onorano; i browser più vecchi ignorano le varianti e ripiegano sul tag che viene prima senza attributo media, quindi metti il tuo default per ultimo come rete di sicurezza:

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

Sincronizza con il tuo web app manifest. Se spedisci un manifest.webmanifest (qualsiasi PWA installabile lo fa), tieni il suo campo theme_color in sync con il meta tag — le app installate preferiscono il manifest:

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

Astro — aggiungilo una volta nel tuo layout 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) — usa la metadata API in app/layout.tsx:

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

WordPress — aggiungilo via wp_head:

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

Verificalo:

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

Poi apri il sito su un dispositivo Android Chrome (o usa Chrome DevTools → Device Mode → preset mobile) e guarda la barra degli indirizzi — dovrebbe riflettere il tuo colore.

Domande frequenti

theme-color influenza la SEO o il posizionamento?

No. Google non lo usa come segnale di posizionamento. È puramente un’indicazione di presentazione raccolta da browser mobile e host PWA. La regola vive nel modulo Social di MetricSpot perché fa parte di “come appare il tuo sito quando consumato fuori dal viewport” — stessa famiglia delle immagini Open Graph e delle favicon.

Cosa succede sui browser che non lo supportano?

Niente. I browser che non capiscono <meta name="theme-color"> lo ignorano silenziosamente. Non c’è penalità di performance e nessun layout rotto — è un enhancement additivo.

Posso cambiare theme-color da JavaScript?

Sì, ed è animato al volo da Chrome e Safari. Utile per siti con colori specifici per sezione:

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

Sii sobrio — far girare il colore a ogni evento di scroll dà le vertigini. I cambi a livello di sezione (hero vs. content vs. footer) funzionano bene; i cambi per-scroll no.

Fonti

Ultimo aggiornamento 2026-05-11