Pages Missing Theme Color Meta Tag
Pages are missing the theme-color meta tag, resulting in a generic browser address bar color on mobile devices.
By Seoxpert Editorial · Published
Why it matters
The theme-color meta tag customizes the browser address bar color on Android Chrome and enhances the look of installed PWAs. Without it, users see a default grey or white bar, missing an opportunity to reinforce your site's branding and improve the mobile experience.
Impact
Leaving this unresolved results in a less branded and less visually engaging experience for mobile users and PWA installations.
How it's detected
An automated crawler checks the <head> of each page for the presence of a meta tag with name="theme-color".
Common causes
- Omitting the theme-color meta tag during site development
- Lack of awareness about mobile browser customization
- Not updating templates to include the tag across all pages
- Assuming the tag is only needed for PWAs
How to fix it
Code examples
Missing theme-color meta tag (problem)
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<!-- No theme-color meta tag -->
</head>
<body>
...
</body>
</html>Correct usage of theme-color meta tag (fix)
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<meta name="theme-color" content="#123456">
</head>
<body>
...
</body>
</html>FAQ
What value should I use for the theme-color meta tag?
Use your primary brand color in hex format, such as #123456, to match your site's branding.
Is the theme-color meta tag required for SEO rankings?
No, it is not a ranking factor, but it improves user experience and branding on mobile browsers.
Do I need the theme-color meta tag on every page?
Yes, include it on every page to ensure a consistent experience across your site.
Does the theme-color meta tag affect desktop browsers?
It mainly affects mobile browsers like Android Chrome and PWAs, not most desktop browsers.
Found this issue on your site?
Run a scan to see if Pages Missing Theme Color Meta Tag affects your pages.
Scan my website →