social

Meta theme-color

O MetricSpot verifica a meta tag theme-color. Tinge o chrome do navegador móvel, barras de PWA e barras de separadores — uma correção de 30 segundos que dá ar de intencional.

O que esta verificação faz

Faz scan ao <head> do documento à procura de uma ou mais tags <meta name="theme-color">. A verificação passa quando pelo menos uma está presente com uma cor CSS válida. Também reconhece variantes com media queries (media="(prefers-color-scheme: light)" e media="(prefers-color-scheme: dark)"), para não seres penalizado por enviar um par claro/escuro adequado.

Porque é importante

O theme-color colore superfícies de UI que o navegador controla em teu nome:

  • Chrome em Android tinge a barra de endereços e a barra de estado acima dela.
  • Safari em iOS (15.4+) tinge o topo do viewport quando a página passa por baixo do notch.
  • PWAs instaladas usam-no para a barra de título no Android e o fundo do ecrã de splash.
  • Edge em desktop usa-o para a barra de separadores quando o site está em modo PWA.
  • Slack, Discord e alguns clientes de chat leem-no ao renderizar pré-visualizações de links em contextos de app instalada.

Isto não é sinal de ranking nem afeta o Lighthouse performance. É um sinal de polimento — um site que o envia parece intencional, e um site que não envia parece uma instalação WordPress por defeito. A correção leva trinta segundos.

Combina naturalmente com o resto do módulo social e de identidade: apple-touch-icon, favicon e Open Graph tags principais. Mesmo tema: como o site se apresenta fora do viewport do navegador.

Como corrigir

Valor estático — escolhe a cor dominante da tua marca e põe-na no head do documento:

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

Usa um valor hex (#0a3d62), rgb(), ou qualquer cor CSS válida. Testa contra texto branco e preto — o Android renderiza o relógio e os ícones de bateria por cima da tua cor, e uma cor de saturação média costuma funcionar melhor.

Variantes claro + escuro — os navegadores modernos respeitam sobreposições por media query, por isso podes enviar um par que siga o tema do sistema do utilizador:

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

Este é o default certo para qualquer site que já suporte modo escuro. Safari 15.4+ e Chrome 93+ honram-no; navegadores mais antigos ignoram as variantes e recorrem à primeira tag sem atributo media, por isso põe o default no fim como rede de segurança:

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

Sincroniza com o teu web app manifest. Se envias um manifest.webmanifest (qualquer PWA instalável envia), mantém o seu campo theme_color em sincronia com a meta tag — apps instaladas preferem o manifest:

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

Astro — adiciona-o uma vez no teu 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 a API de metadata em app/layout.tsx:

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

WordPress — adiciona via wp_head:

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

Audita:

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

Depois abre o site num dispositivo Android Chrome (ou usa Chrome DevTools → Device Mode → preset de telemóvel) e olha para a barra de endereços — deve refletir a tua cor.

Perguntas frequentes

O theme-color afeta SEO ou rankings?

Não. O Google não o usa como sinal de ranking. É puramente uma pista de apresentação apanhada por navegadores móveis e hosts de PWA. A regra vive no módulo Social do MetricSpot porque faz parte de “como o teu site fica quando é consumido fora do viewport” — mesma família que imagens Open Graph e favicons.

O que acontece em navegadores que não o suportam?

Nada. Os navegadores que não entendem <meta name="theme-color"> ignoram-no silenciosamente. Não há penalização de desempenho nem layout partido — é um melhoramento aditivo.

Posso mudar o theme-color a partir de JavaScript?

Sim, e é animado em direto pelo Chrome e pelo Safari. Útil para sites com cores específicas por secção:

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

Sê de bom gosto — virar a cor a cada evento de scroll tonteia. Mudanças ao nível de secção (hero vs. conteúdo vs. rodapé) funcionam bem; mudanças por scroll não.

Fontes

Última atualização 2026-05-11