social

Meta theme-color

MetricSpot comprueba la meta theme-color. Tinta el chrome del navegador móvil, las barras de PWA y las tab strips — un arreglo de 30 segundos que hace que un sitio se vea intencional.

Qué comprueba esta verificación

Recorre el <head> del documento en busca de una o varias etiquetas <meta name="theme-color">. La verificación pasa cuando al menos una está presente con un color CSS válido. También reconoce variantes con media-query (media="(prefers-color-scheme: light)" y media="(prefers-color-scheme: dark)") para que no te penalice por enviar un par decente de claro/oscuro.

Por qué importa

theme-color colorea superficies de UI que controla el navegador por ti:

  • Chrome en Android tinta la barra de direcciones y la barra de estado de encima.
  • Safari en iOS (15.4+) tinta la parte superior del viewport cuando la página se desliza bajo el notch.
  • PWAs instaladas lo usan para la barra de título en Android y el fondo del splash screen.
  • Edge en escritorio lo usa para la tab strip cuando el sitio está en una ventana PWA.
  • Slack, Discord y algunos clientes de chat lo leen al renderizar previsualizaciones de enlaces en contextos de app instalada.

No es señal de ranking y no afecta a Lighthouse performance. Es una señal de pulido — un sitio que la lleva se ve intencional, y uno que no la lleva se ve como una instalación de WordPress por defecto. El arreglo lleva treinta segundos.

Encaja naturalmente con el resto del módulo de social e identidad: Apple touch icon, Favicon y Etiquetas Open Graph. Mismo tema: cómo se presenta el sitio fuera del viewport del navegador.

Cómo arreglarlo

Valor estático — elige tu color de marca dominante y mételo en el head del documento:

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

Usa un valor hex (#0a3d62), rgb() o cualquier color CSS válido. Pruébalo contra texto blanco y negro — Android renderiza el reloj del sistema y los iconos de batería encima de tu color, y un color de saturación media suele funcionar mejor.

Variantes claro + oscuro — los navegadores modernos respetan overrides por media-query, así que puedes enviar un par que siga el tema del sistema del usuario:

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

Es el default correcto para cualquier sitio que ya soporte modo oscuro. Safari 15.4+ y Chrome 93+ lo respetan; los navegadores antiguos ignoran las variantes y caen a la primera etiqueta sin atributo media, así que pon tu default al final como red de seguridad:

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

Sincronízalo con tu web app manifest. Si envías un manifest.webmanifest (cualquier PWA instalable lo hace), mantén su campo theme_color sincronizado con la meta tag — las apps instaladas prefieren el manifest:

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

Astro — añádelo una vez en tu 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 en app/layout.tsx:

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

WordPress — añádelo vía wp_head:

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

Audítalo:

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

Luego abre el sitio en un dispositivo Android con Chrome (o usa Chrome DevTools → Device Mode → preset móvil) y mira la barra de direcciones — debería reflejar tu color.

Preguntas frecuentes

¿theme-color afecta al SEO o al ranking?

No. Google no lo usa como señal de ranking. Es puramente una pista de presentación que recogen los navegadores móviles y los hosts de PWA. La regla vive en el módulo Social de MetricSpot porque forma parte de “cómo se ve tu sitio cuando se consume fuera del viewport” — misma familia que las imágenes Open Graph y los favicons.

¿Qué pasa en navegadores que no lo soportan?

Nada. Los navegadores que no entienden <meta name="theme-color"> lo ignoran en silencio. No hay penalización de rendimiento ni layout roto — es una mejora aditiva.

¿Puedo cambiar theme-color desde JavaScript?

Sí, y Chrome y Safari lo animan al vuelo. Útil para sitios con colores específicos por sección:

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

Hazlo con gusto — voltear el color en cada evento de scroll marea. Los cambios a nivel de sección (hero vs. contenido vs. footer) funcionan bien; los cambios por scroll no.

Fuentes

Última actualización 2026-05-11