Layout SVG

Meta Theme-color: Die Farbe der Browser-Adressleiste anpassen

Du möchtest für deine Website die Farbe der Adressleiste im Browser anpassen? Kein Problem. Mit dem Meta-Tag theme-color definierst du deine eigene Farbe.

Image by pierre9x6 (https://pixabay.com/de/photos/wohnungen-t%c3%bcren-farben-tokio-japan-4358755/)

Image by pierre9x6 (https://pixabay.com/de/photos/wohnungen-t%c3%bcren-farben-tokio-japan-4358755/)

Sicherlich ist dir beim surfen mit dem Smartphone schonmal aufgefallen, dass die Browser-Adressleiste häufig eine andere Farbe annimmt, je nachdem auf welcher Website man sich gerade befindet. Das Meta-Tag theme-color bietet die Möglichkeit, eine Farbe zu definieren, die Browser verwenden sollen, um die Anzeige der Seite oder der umgebenden Benutzeroberfläche anzupassen. So können Browser die Farbe beispielsweise für die Titelleiste der Seite oder als farbliche Hervorhebung in einer Tab-Bar oder einem Task-Switcher verwenden.

Wie kann ich die Farbe anpassen?

In dem du in den <head> Bereich deiner Website den folgenden Meta-Tag einfügst:

<meta name="theme-color" content="#000" />

Innerhalb von content="" gibst du den Wert deiner Farbe an. Selbstverständlich darf es sich hierbei nur um einen validen Farbwert handeln. Ausgenommen davon sind Farbwerte mit einem Alpha-Wert, also einer Transparenz wie zum Beispiel rgba.

Hier kannst du den Unterschied zwischen einer Adressleiste mit und ohne theme-color sehen:

Ohne theme-color

Browser-Adressleiste ohne theme-color Meta-Tag

Mit theme-color

Browser-Adressleiste mit theme-color Meta-Tag

Warum ist das sinnvoll?

Einerseits um deine Website innerhalb der mobilen Tab-Übersicht hervorzuheben und sie somit besser zuordnen zu können. Andererseits um das Design deiner Website „abzurunden“. Durch die Farbanpassung der Adressleiste wird der gesamte Browser zum Teil deines Webdesigns. So lässt sich der ‚wow‘-Effekt einer Website in der mobilen Ansicht erhöhen.

Google wird es dir danken

Zwar nicht mit einem besseren Ranking, aber wer weiß ob es in Zukunft vielleicht noch ein Rankingfaktor wird. Nicht umsonst kann man im Lighthouse-Modus des Chrome-Webtools überprüfen ob das Meta-Tag eingebaut ist, oder nicht. Auch andere SEO-Tools weisen auf theme-color hin.

Browserkompatibilität

Leider ist das Feature nicht in jedem Browser verfügbar (Stand: September 2021). Auf caniuse.com findest Du eine Übersicht welche Browser theme-color unterstützen und welche nicht.

Hinweis

Falls in den Browsereinstellungen das dunkle Design (Dark-Mode) aktiviert ist, wird die benutzerdefinierte Farbeinstellung für theme-color vom Browser überschrieben. Das Feature funktioniert (vorerst) nur im hellen Design.

Hat dir der Beitrag gefallen?

Dann lass gerne einen Like da.

x
Vielen Dank für deine Bewertung
Layout SVG Bottom

Kommentar verfassen

Deine Email-Adresse wird nicht veröffentlicht.
Erforderliche Felder sind mit * gekennzeichnet

Layout SVG Bottom