BasicSEO: lowInside <head>

meta theme-color

Q: Does meta theme-color affect SEO?

The SEO impact of meta theme-color is rated as low. This is primarily a UX and branding feature with minimal SEO impact. However, PWA sites with a consistent theme-color get a more polished home screen installation experience. Chrome displays the theme-color in the address bar immediately as the page loads, providing a branded feel even before content renders.

Sets the colour of the browser chrome (address bar, tab bar) on mobile devices when the page is viewed.

The theme-color meta tag customises the browser UI colour on supporting mobile browsers (Chrome for Android, Edge Mobile, Samsung Internet) and when a site is added to the home screen as a Progressive Web App (PWA). It affects the address bar, tab bar, and task switcher appearance.

This is primarily a UX and branding feature with minimal SEO impact. However, PWA sites with a consistent theme-color get a more polished home screen installation experience. Chrome displays the theme-color in the address bar immediately as the page loads, providing a branded feel even before content renders.

The media attribute allows different colors for light and dark mode: <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff"> and <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0d16">.

HTML Example

<meta name="theme-color" content="#0a0d16">
<!-- Dark/light mode variants: -->
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0d16">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">

Attributes

nameMust be "theme-color".

contentA valid CSS colour value (hex, rgb, named colour).

mediaOptional media query to target light/dark mode.

Related Tags

meta viewport

Controls how a page scales and displays on mobile devices — requi…

← All Meta Tags