Theme-Color-Meta-Tag - MetricSpot Docs

Q: Was passiert auf Browsern, die es nicht unterstützen?

Nichts. Browser, die nicht verstehen, ignorieren es stillschweigend. Keine Performance-Strafe, kein gebrochenes Layout — es ist eine additive Erweiterung.

Was diese Prüfung macht

Scannt den Document-<head> nach einem oder mehreren <meta name="theme-color">-Tags. Die Prüfung besteht, wenn mindestens einer mit einer gültigen CSS-Farbe vorhanden ist. Sie erkennt außerdem Media-Query-Varianten (media="(prefers-color-scheme: light)" und media="(prefers-color-scheme: dark)"), damit du nicht bestraft wirst, wenn du ein sauberes Light/Dark-Paar ausspielst.

Warum es zählt

theme-color färbt UI-Oberflächen, die der Browser für dich steuert:

Chrome auf Android tönt die Adressleiste und die Statusleiste darüber.
Safari auf iOS (15.4+) tönt den oberen Viewport-Bereich, wenn die Seite unter der Notch hindurchscrollt.
Installierte PWAs nutzen es für die Titelleiste auf Android und den Splash-Screen-Hintergrund.
Edge auf dem Desktop nutzt es für den Tab-Strip, wenn die Seite in einem Progressive-Web-App-Fenster läuft.
Slack, Discord und einige Chat-Clients lesen es beim Rendern von Link-Previews in installierten App-Kontexten.

Das ist kein Ranking-Signal und es beeinflusst die Lighthouse-Performance nicht. Es ist ein Politur-Signal — eine Seite, die es ausspielt, wirkt bewusst, und eine, die es nicht tut, sieht aus wie eine Default-WordPress-Installation. Der Fix dauert dreißig Sekunden.

Er passt natürlich zum Rest des Social- und Identity-Moduls: Apple Touch Icon, Favicon und Open-Graph-Kern-Tags. Gleiches Thema: wie die Seite sich außerhalb des Browser-Viewports präsentiert.

So behebst du es

Statischer Wert — wähle deine dominante Markenfarbe und setze sie in den Document-Head:

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

Nutze einen Hex-Wert (#0a3d62), rgb() oder eine beliebige gültige CSS-Farbe. Teste sie gegen weißen und schwarzen Text — Android rendert die System-Uhr und Batterie-Icons auf deine Farbe, und eine mittel-gesättigte Farbe funktioniert meist am besten.

Light- + Dark-Varianten — moderne Browser respektieren Media-Query-Overrides, also kannst du ein Paar ausspielen, das dem System-Theme folgt:

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

Das ist der richtige Default für jede Seite, die schon einen Dark Mode unterstützt. Safari 15.4+ und Chrome 93+ ehren es; ältere Browser ignorieren die Varianten und fallen auf den Tag ohne media-Attribut zurück, der zuerst kommt — setz deinen Default also zuletzt als Sicherheitsnetz:

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

Synchron mit deinem Web-App-Manifest. Lieferst du ein manifest.webmanifest aus (jede installierbare PWA tut das), halte sein theme_color-Feld synchron mit dem Meta-Tag — installierte Apps bevorzugen das Manifest:

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

Astro — füge es einmal in dein Basis-Layout src/layouts/Base.astro ein:

<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) — nutze die 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 — füge es via wp_head hinzu:

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

Auditieren:

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

Öffne die Seite dann auf einem Android-Chrome-Gerät (oder nutze Chrome DevTools → Device Mode → mobile Preset) und schau auf die Adressleiste — sie sollte deine Farbe widerspiegeln.

Häufig gestellte Fragen

Beeinflusst theme-color SEO oder Rankings?

Nein. Google nutzt es nicht als Ranking-Signal. Es ist rein eine Präsentations-Markierung, die von mobilen Browsern und PWA-Hosts aufgegriffen wird. Die Regel lebt in MetricSpots Social-Modul, weil sie zu “wie deine Seite außerhalb des Viewports konsumiert aussieht” gehört — gleiche Familie wie Open-Graph-Bilder und Favicons.

Was passiert auf Browsern, die es nicht unterstützen?

Nichts. Browser, die <meta name="theme-color"> nicht verstehen, ignorieren es stillschweigend. Keine Performance-Strafe, kein gebrochenes Layout — es ist eine additive Erweiterung.

Kann ich theme-color aus JavaScript heraus ändern?

Ja, und es wird von Chrome und Safari im Flug animiert. Nützlich für Seiten mit abschnittsspezifischen Farben:

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

Sei geschmackvoll — die Farbe bei jedem Scroll-Event umzuschalten ist schwindelerregend. Abschnitts-Level-Wechsel (Hero vs. Inhalt vs. Footer) funktionieren gut; pro-Scroll-Wechsel nicht.