Títulos y descripciones

El título (<title>) y la meta descripción (<meta name="description">) son los dos metadatos más visibles de cualquier página web. Son lo que el usuario ve en los resultados de búsqueda antes de decidir si hacer clic. Son la primera impresión del contenido para alguien que no lo ha visto todavía.

El título de página (<title>)

Qué es y dónde aparece

El elemento <title> en el <head> del HTML define el título del documento. Aparece en:

  • La pestaña del navegador.
  • Los resultados de búsqueda (como el enlace principal del resultado).
  • Las previsualizaciones al compartir en redes sociales (cuando no hay Open Graph definido).
  • Los marcadores del navegador.
<head>
  <title>Títulos y meta descripciones: cómo escribirlos y por qué importan | Arquitectura de la Información</title>
</head>

Cómo escribir un título eficaz

Longitud: Google trunca los títulos que superan aproximadamente 600px de ancho en los resultados de búsqueda, lo que equivale a unos 55–65 caracteres en tipografía estándar. Títulos más largos no son un error, pero la parte visible en los resultados debe ser la más informativa.

Estructura recomendada: Tema principal: subtema o especificación | Nombre del sitio

  • El tema principal primero: la información más importante debe estar al inicio, donde no se trunca.
  • El nombre del sitio al final: refuerza la marca pero no es lo primero que el usuario necesita leer.
  • El separador: |, -, — o : son separadores habituales. Elegir uno y usarlo consistentemente en todo el sitio.

Unicidad: Cada página debe tener un título único en todo el sitio. Los títulos duplicados son un síntoma de contenido duplicado o de una arquitectura mal definida.

Especificidad: El título debe describir el contenido de esa página específica, no el sitio en general. “Arquitectura de la Información” como título de todas las páginas es inútil. “Jerarquía vs. Taxonomía: diferencias y cuándo usar cada una | Arquitectura de la Información” es específico.

Palabras de alto valor primero: Los buscadores y los usuarios escanean el título de izquierda a derecha. Las palabras más relevantes deben estar al inicio.

La meta descripción

Qué es y dónde aparece

La meta descripción es un fragmento de texto en el <head> que describe el contenido de la página. No es un factor de posicionamiento directo, pero influye en la tasa de clic: un resultado con una descripción bien escrita obtiene más clics que uno con una descripción genérica o ausente.

<meta name="description" content="La jerarquía organiza los contenidos en árbol; la taxonomía los clasifica por atributos. Aprende la diferencia, cuándo usar cada sistema y cómo combinarlos." />

Aparece en:

  • Los resultados de búsqueda (el texto en gris debajo del título). Nota: Google puede reemplazarla con un fragmento del contenido que considere más relevante para la consulta específica.
  • Las previsualizaciones al compartir (cuando no hay Open Graph definido).

Cómo escribir una meta descripción eficaz

Longitud: Aproximadamente 150–160 caracteres. Google trunca las descripciones más largas.

Orientada a la acción o al beneficio: La descripción es, en la práctica, el “argumento de venta” del resultado. Debe responder a la pregunta implícita del usuario: ¿qué voy a encontrar aquí y por qué me interesa?

Específica al contenido de la página: No copiar la misma descripción en múltiples páginas. Cada página debe tener su propia descripción que refleje su contenido específico.

Sin comillas dobles en el texto: Las comillas dobles dentro de la meta descripción pueden truncar el atributo en el HTML. Usar comillas simples o evitarlas si es posible.

No incluir “En este artículo verás…”: Las fórmulas genéricas de introducción ocupan caracteres sin añadir valor. Ir directamente al contenido.

Títulos H1 vs. títulos de página <title>

Son elementos distintos con funciones distintas:

<title>: Metadato del documento. Aparece en los resultados de búsqueda y en la pestaña del navegador. El usuario no lo ve en la página en sí.

<h1>: Encabezado principal del contenido visible en la página. El usuario lo ve al abrir la página.

Deben ser coherentes pero no necesariamente idénticos. El <title> puede ser más largo y más descriptivo (para el contexto de los resultados de búsqueda); el <h1> puede ser más conciso (para el contexto de la lectura de la página).

Ejemplo:

  • <title>: “Breadcrumbs: implementación, tipos y datos estructurados | Arquitectura de la Información”
  • <h1>: “Breadcrumbs: implementación, tipos y datos estructurados”

Tener múltiples <h1> en la misma página era problemático en HTML4. En HTML5 es técnicamente válido, pero desde el punto de vista de la accesibilidad y la claridad estructural, un único <h1> por página sigue siendo la práctica recomendada.

Para profundizar