Qué son los metadatos del <head> y por qué importan en SEO técnico
Los metadatos HTML son señales que se declaran principalmente en el <head> y que ayudan a los motores de búsqueda, navegadores y plataformas sociales a interpretar una URL: cómo debe mostrarse (snippet), si debe indexarse, cómo se comporta en móviles, cómo se relaciona con variantes de idioma y cómo se previsualiza al compartirse. En SEO técnico, el objetivo no es “añadir etiquetas por añadir”, sino generar metadatos correctos, completos y consistentes por URL, evitando duplicidades, ausencias y valores genéricos que suelen aparecer cuando se renderiza con plantillas sin datos o con SSR mal configurado.
<title>: señal fuerte y visible en SERP
Qué hace
El <title> define el título del documento. Suele ser el elemento más influyente del <head> en términos de relevancia temática y también es el texto que con frecuencia aparece como título del resultado en buscadores (aunque puede reescribirse). Debe describir la página con precisión y diferenciarla de otras URLs.
Buenas prácticas técnicas
- Unicidad por URL: cada página debe tener un
<title>distinto. - Longitud razonable: evita títulos excesivamente largos; prioriza lo esencial al inicio.
- Evita plantillas genéricas:
“Inicio | Mi Sitio”para todas las páginas es un patrón típico de duplicidad. - Coherencia con el contenido: el título debe reflejar lo que el usuario verá en el
<h1>y el cuerpo.
Ejemplo
<title>Zapatillas de running para asfalto | Marca X</title><meta name="description">: controla el snippet, no el ranking directo
Qué hace
La meta description es un resumen que los buscadores suelen usar como base para el snippet (texto descriptivo del resultado). No es una señal de ranking directa, pero sí impacta en la presentación y puede influir en el CTR cuando es relevante y específica. Los buscadores pueden reescribirla si no coincide con la consulta o si es de baja calidad.
Buenas prácticas técnicas
- Unicidad por URL: evita descripciones duplicadas en listados, paginaciones o fichas similares.
- Longitud razonable: redacta para que el mensaje clave quepa sin depender de truncado.
- Describe la propuesta de valor real: incluye atributos diferenciales (envío, stock, categoría, ubicación) solo si son ciertos.
- No uses relleno de keywords: prioriza legibilidad y precisión.
Ejemplo
<meta name="description" content="Zapatillas de running para asfalto con amortiguación media. Tallas 36–46, envío 24/48h y devoluciones fáciles."><meta name="robots">: indexación y seguimiento a nivel de página
Qué hace
La etiqueta <meta name="robots"> indica a los rastreadores cómo tratar la página. Las directivas más comunes son index/noindex y follow/nofollow. Es especialmente útil cuando necesitas controlar el estado de indexación por plantilla o por tipo de página (por ejemplo, resultados internos, filtros, páginas temporales, etc.).
Directivas clave
index: permite indexar (comportamiento por defecto si no hay restricciones).noindex: solicita no indexar la URL.follow: permite seguir enlaces (por defecto).nofollow: solicita no seguir enlaces de la página.
Ejemplos
<meta name="robots" content="index,follow"><meta name="robots" content="noindex,follow">Notas técnicas importantes
- Coherencia con el objetivo: si una página debe aparecer en resultados, evita
noindex. - Evita contradicciones: no mezcles señales opuestas entre plantillas (por ejemplo, una canonical hacia una URL indexable pero con
noindexpor error). - Entornos: en staging es común usar
noindex; asegúrate de no desplegarlo a producción por accidente.
<meta name="viewport">: base técnica para mobile
Qué hace
El viewport controla cómo se escala y se renderiza la página en dispositivos móviles. No es una etiqueta “SEO” en el sentido clásico, pero es esencial para una experiencia móvil correcta y evita problemas de renderizado que afectan a la calidad percibida y a señales de usabilidad.
- Escuche el audio con la pantalla apagada.
- Obtenga un certificado al finalizar.
- ¡Más de 5000 cursos para que explores!
Descargar la aplicación
Configuración recomendada
<meta name="viewport" content="width=device-width, initial-scale=1">Errores típicos
- Omitirla en páginas antiguas o plantillas especiales (checkout, landings).
- Usar valores que bloquean el zoom sin necesidad (puede afectar accesibilidad).
hreflang: relación entre variantes de idioma/país (si hay multidioma)
Qué hace
hreflang ayuda a indicar qué URL corresponde a cada idioma (y opcionalmente región) cuando existe contenido equivalente en varias versiones. Es una señal técnica para orientar la entrega correcta por idioma/país y reducir confusiones entre variantes.
Implementación básica en <head>
<link rel="alternate" hreflang="es" href="https://example.com/es/producto"> <link rel="alternate" hreflang="en" href="https://example.com/en/product"> <link rel="alternate" hreflang="x-default" href="https://example.com/product">Reglas técnicas mínimas
- Reciprocidad: si la versión ES apunta a EN, la EN debe apuntar a ES.
- Consistencia de URLs: usa URLs absolutas y canónicas.
- Cobertura completa: cada variante debe listar todas las variantes (incluida ella misma).
Open Graph y Twitter Cards: consistencia al compartir (apoyo indirecto)
Qué hacen
Las etiquetas Open Graph (OG) y Twitter Cards controlan cómo se previsualiza una URL en redes sociales y mensajería. No suelen ser señales de ranking directo, pero aportan consistencia, reducen previsualizaciones erróneas y mejoran la presentación del contenido compartido (lo que puede aumentar clics y menciones).
Conjunto mínimo recomendado
<meta property="og:title" content="Zapatillas de running para asfalto | Marca X"> <meta property="og:description" content="Amortiguación media, tallas 36–46, envío 24/48h."> <meta property="og:url" content="https://example.com/zapatillas-running-asfalto"> <meta property="og:image" content="https://example.com/media/og/zapatillas.jpg"> <meta property="og:type" content="product"> <meta name="twitter:card" content="summary_large_image">Pautas técnicas
- Genera
og:urlcon la URL canónica real (sin parámetros innecesarios). - La imagen debe ser accesible públicamente, con URL absoluta y tamaño adecuado.
- Evita que OG/Twitter contradigan
<title>y description: deben ser coherentes, no copias ciegas.
Generación en plantillas/SSR: evitar duplicidad, ausencias y valores genéricos
Problemas típicos en proyectos con SSR/plantillas
- Metadatos por defecto para todo: el layout global define
<title>Mi Sitio</title>y nunca se sobreescribe. - Datos no disponibles en el servidor: el SSR renderiza sin datos (título vacío) y el cliente lo “arregla” después; algunos bots pueden ver el HTML inicial incompleto.
- Duplicidad por paginación/filtros: páginas diferentes comparten el mismo
<title>/descriptionporque la plantilla no incorpora variables (página 2, filtro aplicado, etc.). - Errores de cache: una capa de caché sirve el
<head>de una URL a otra si la clave de caché no incluye ruta/idioma.
Patrón recomendado: “contrato de metadatos” por tipo de página
Define un esquema de metadatos por tipo de página (home, categoría, producto, artículo, búsqueda interna, cuenta, etc.) y asegúrate de que el SSR siempre pueda construirlo con datos reales o con fallbacks controlados.
| Tipo de página | title | description | robots | OG/Twitter |
|---|---|---|---|---|
| Producto | Nombre + atributo clave + marca | Beneficio + disponibilidad/envío | index,follow | Imagen del producto |
| Categoría | Categoría + intención (p.ej. “ofertas”) | Rango, marcas, envío | index,follow | Imagen representativa |
| Búsqueda interna | Consulta + marca | Opcional o genérica controlada | noindex,follow (común) | Opcional |
| Filtros combinatorios | Solo si estrategia lo permite | Solo si aporta valor | frecuente: noindex,follow | Opcional |
Guía práctica paso a paso para implementarlo en SSR
- Identifica el tipo de página a partir de la ruta y el modelo de datos (p.ej.
/producto/:slug). - Resuelve datos en servidor antes de renderizar el HTML: nombre, categoría, idioma, imagen principal, estado (activo/agotado), etc.
- Construye metadatos con funciones puras (sin efectos secundarios) para garantizar consistencia:
function buildTitle({type, name, category, brand}) { if (type === 'product') return `${name} | ${brand}`; if (type === 'category') return `${category} | ${brand}`; return `Mi Sitio | ${brand}`; } function buildDescription({type, summary}) { return summary?.slice(0, 160) ?? 'Descubre productos y ofertas.'; } function buildRobots({type}) { if (type === 'search') return 'noindex,follow'; return 'index,follow'; } - Inyecta en el
<head>del HTML SSR y evita depender de actualizaciones en cliente para completar metadatos críticos. - Define fallbacks no genéricos: si falta un dato, usa un fallback específico por tipo de página (mejor que un texto idéntico para todo el sitio).
- Controla la caché: la clave debe incluir ruta completa, idioma, y cualquier variante que cambie el
<head>(por ejemplo,Accept-Languagesi renderizas por cabecera). - Evita duplicidad por parámetros: si hay parámetros que no deben crear páginas distintas, no los incorpores a
og:urlni a títulos/descripciones; mantén consistencia con la URL canónica.
Pautas de validación: checklist técnico por URL
1) Unicidad por URL
- title único: detecta duplicados por plantilla (categorías con el mismo nombre, paginación sin sufijo, etc.).
- description única o, si no es viable, al menos específica por tipo de página (evita el mismo texto en miles de URLs).
- OG:
og:titleyog:descriptioncoherentes con la URL;og:imageestable y correcta.
2) Longitud razonable
- Evita títulos/descripciones excesivamente largos que diluyan lo importante.
- Prioriza la información clave al inicio (nombre del producto, categoría, atributo diferencial).
3) Coherencia con el contenido
- El
<title>y la description deben describir lo que el usuario ve (no promesas falsas). - Si la página cambia por idioma, los metadatos deben cambiar con el idioma (incluye
hreflangsi aplica).
4) Estado de indexación deseado
- Verifica que el
meta robotscoincide con la intención: páginas que deben posicionar no deben llevarnoindex. - Revisa plantillas especiales (búsqueda interna, filtros, cuenta, carrito, etc.) para evitar indexación accidental o bloqueo involuntario.
5) Cómo comprobarlo rápidamente
- Inspección del HTML: abre “Ver código fuente” y confirma que el
<head>contiene los valores correctos en el HTML inicial (especialmente en SSR). - Comprobación por lote: usa un crawler o script que extraiga
<title>, meta description, robots, OG yhreflangy reporte duplicados, vacíos y longitudes extremas. - Validación de indexación: contrasta el
meta robotscon el comportamiento esperado en buscadores (si una URL no aparece, revisa primeronoindexy coherencia de señales).
