Seoxpert.io
Get started
lowBest Practices

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

Add a <meta name="theme-color" content="#YOUR_BRAND_COLOR"> tag to the <head> section of every page. Replace #YOUR_BRAND_COLOR with your brand's primary color in hex format. Ensure this tag is present on all templates or layouts used by your site.

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 →