ℹ Info General

Missing theme-color — Customize the Browser Toolbar on Mobile

The theme-color meta tag customizes the browser toolbar color on mobile devices.

What is theme-color?

The theme-color meta tag tells mobile browsers what color to use for the browser toolbar (address bar area). It creates a more immersive, branded experience by extending your site's color scheme into the browser chrome.

Where it's visible

Chrome on Android — Colors the status bar and toolbar
Safari on iOS (15+) — Colors the toolbar area
Samsung Internet — Full toolbar theming
PWAs — Used as the window title bar color

Why should you add it?

Brand consistency — Your brand color extends beyond the page
Professional appearance — The site feels more polished and app-like
PWA requirement — Essential for Progressive Web Apps
User experience — Creates a more immersive browsing experience

How to fix it

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

Support dark mode

<!-- Light mode -->
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />

<!-- Dark mode -->
<meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)" />

Best practices

Match your header/navbar color — The theme-color should blend with your site's top area
Use your brand color — A recognizable color reinforces brand identity
Support dark mode — Provide different colors for light and dark schemes
Use hex values — Most reliable format across browsers
Also set in manifest.json — For PWA installations

Check your Open Graph tags

Related articles

Missing og:title

The og:title tag is essential for social sharing. Without it, platforms will use the page title or URL.

og:title Is Too Long

Titles longer than 60 characters may be truncated on social platforms.

og:title Is Too Short

Short titles may not be descriptive enough for social sharing.

Missing og:description

The og:description tag provides a summary of the page content for social platforms.

og:description Is Too Long

Descriptions over 160 characters may be truncated on social platforms.

og:description Is Too Short

Short descriptions miss the opportunity to engage users.

OpenGraph MCP Server

Inspect OG tags directly from your editor

The OpenGraph MCP server lets you inspect and analyze Open Graph meta tags directly from your AI-powered editor or assistant. It provides two tools:

inspect_og — Fetch and score OG tags for any URL
suggest_og_tags — Generate recommended meta tag HTML

Add the server to your project's .cursor/mcp.json file:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Restart Cursor after adding the configuration.

Add to your .vscode/mcp.json file (requires GitHub Copilot extension):

{
  "servers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Make sure you have GitHub Copilot with MCP support enabled.

Add to your claude_desktop_config.json file:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

The config file is at ~/Library/Application Support/Claude/claude_desktop_config.json on macOS or %APPDATA%\Claude\claude_desktop_config.json on Windows.

Add to your ~/.codeium/windsurf/mcp_config.json file:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Restart Windsurf after modifying the configuration.

Add to your Zed settings.json under context_servers:

{
  "context_servers": {
    "opengraph": {
      "command": {
        "path": "npx",
        "args": ["-y", "opengraph-mcp"]
      }
    }
  }
}

Open settings with Cmd+, and add the configuration.

Usage examples

▶ "Inspect the OG tags of github.com"

▶ "Suggest OG meta tags for my website https://example.com"

▶ "Check if my blog post has proper Open Graph tags"