ℹ Info General

Falta theme-color — Personaliza la barra del navegador en móvil

La meta etiqueta theme-color personaliza el color de la barra del navegador en dispositivos móviles.

¿Qué es theme-color?

La meta etiqueta theme-color indica a los navegadores móviles qué color usar para la barra de herramientas del navegador (zona de la barra de direcciones). Crea una experiencia más envolvente y alineada con tu marca al extender la paleta de colores de tu sitio al propio navegador.

Dónde se muestra

Chrome en Android — Colorea la barra de estado y la barra de herramientas
Safari en iOS (15+) — Colorea el área de la barra de herramientas
Samsung Internet — Personalización completa de la barra
PWAs — Se usa como color de la barra de título de la ventana

¿Por qué deberías añadirlo?

Coherencia de marca — Tu color corporativo se extiende más allá de la página
Aspecto profesional — El sitio se percibe más pulido y similar a una app
Requisito para PWA — Esencial en Progressive Web Apps
Experiencia de usuario — Genera una experiencia de navegación más inmersiva

Cómo solucionarlo

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

Soporte para modo oscuro

<!-- 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)" />

Buenas prácticas

Haz que coincida con el color de tu header/navbar — El theme-color debe integrarse con la zona superior de tu sitio
Usa tu color de marca — Un color reconocible refuerza la identidad de marca
Soporta el modo oscuro — Ofrece colores diferentes para los esquemas claro y oscuro
Usa valores hexadecimales — Es el formato más fiable entre navegadores
Defínelo también en manifest.json — Para las instalaciones como PWA

Verifica tus etiquetas Open Graph

Artículos relacionados

og:image rota

La URL de og:image no devuelve una imagen válida. Las plataformas sociales mostrarán una vista previa rota o vacía.

La URL canónica difiere de la URL de la página

La URL canónica apunta a una URL diferente a la de la página actual.

El charset no es la primera etiqueta meta

La declaración de charset debería ser el primer elemento dentro de <head>.

og:description podría ser más larga

Tienes espacio para una descripción más detallada que aumente la interacción.

og:description contiene una URL

La og:description debería ser un resumen legible, no una URL.

Keyword stuffing en og:description

Repetir las mismas palabras excesivamente en la descripción se percibe como spam.

Servidor MCP de OpenGraph

Inspecciona tags OG directamente desde tu editor

El servidor MCP de OpenGraph te permite inspeccionar y analizar meta tags Open Graph directamente desde tu editor con IA o asistente. Proporciona dos herramientas:

inspect_og — Obtener y puntuar tags OG de cualquier URL
suggest_og_tags — Generar HTML de meta tags recomendados

Agrega el servidor al archivo .cursor/mcp.json de tu proyecto:

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

Reinicia Cursor después de agregar la configuración.

Agrega a tu archivo .vscode/mcp.json (requiere extensión GitHub Copilot):

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

Asegúrate de tener GitHub Copilot con soporte MCP habilitado.

Agrega a tu archivo claude_desktop_config.json:

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

El archivo de configuración está en ~/Library/Application Support/Claude/claude_desktop_config.json en macOS o %APPDATA%\Claude\claude_desktop_config.json en Windows.

Agrega a tu archivo ~/.codeium/windsurf/mcp_config.json:

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

Reinicia Windsurf después de modificar la configuración.

Agrega a tu settings.json de Zed bajo context_servers:

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

Abre ajustes con Cmd+, y agrega la configuración.

Ejemplos de uso

▶ "Inspecciona los tags OG de github.com"

▶ "Sugiere meta tags OG para mi sitio web https://example.com"

▶ "Verifica si mi blog tiene etiquetas Open Graph correctas"