⚠ Advertencia SEO

Falta el atributo lang en <html> — Esencial para accesibilidad y SEO

El atributo lang ayuda a los motores de búsqueda y lectores de pantalla a entender el idioma de la página.

¿Qué es el atributo lang?

El atributo lang en la etiqueta <html> declara el idioma principal del contenido de la página. Informa a navegadores, motores de búsqueda y tecnologías de asistencia en qué idioma está escrito el texto.

¿Por qué es fundamental?

Accesibilidad (requisito WCAG)

Los lectores de pantalla usan el atributo lang para seleccionar las reglas de pronunciación correctas
Sin él, un lector de pantalla podría intentar leer texto en español con pronunciación en inglés, haciéndolo incomprensible
Es un requisito de nivel A de WCAG, el nivel más básico de conformidad en accesibilidad

SEO

Los motores de búsqueda lo utilizan para entender el idioma del contenido y mostrarlo a la audiencia correcta
Es una señal para el SEO internacional y la segmentación geográfica
Ayuda a una indexación adecuada en los resultados de búsqueda específicos por idioma

Funcionalidades del navegador

Los navegadores lo utilizan para la corrección ortográfica en el idioma correcto
Sugerencias de traducción — Los navegadores sugieren traducir páginas cuando el idioma no coincide con el del usuario
Separación silábica y renderizado de texto — Algunos idiomas requieren un tratamiento de texto diferente

Cómo solucionarlo

Añade el atributo lang a tu etiqueta <html>:

<html lang="en">

Códigos de idioma comunes

Código	Idioma
`en`	Inglés
`es`	Español
`fr`	Francés
`de`	Alemán
`pt`	Portugués
`ja`	Japonés
`zh`	Chino
`ar`	Árabe
`ko`	Coreano
`it`	Italiano

Para variantes regionales

<html lang="en-US">  <!-- Inglés americano -->
<html lang="en-GB">  <!-- Inglés británico -->
<html lang="pt-BR">  <!-- Portugués de Brasil -->
<html lang="zh-CN">  <!-- Chino simplificado -->

Buenas prácticas

Inclúyelo siempre — Toda página HTML debería tener un atributo lang
Usa el código correcto — Códigos de dos letras ISO 639-1
Que coincida con tu contenido — Establece el idioma de la mayor parte del contenido de la página
Usa lang en sub-elementos — Para contenido en varios idiomas: <span lang="fr">Bonjour</span>

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"