concepto HTML vigente

Metadata del documento

Metadata del documento

El elemento head contiene metadata que el navegador necesita pero que no se renderiza: title (título de la pestaña y del SEO), meta (charset, viewport, description, Open Graph) y link (hoja de estilos, favicon, fuentes).

El <head> es la parte invisible de un documento HTML. Todo lo que contiene está dirigido al navegador y a los agentes externos — motores de búsqueda, redes sociales, otros navegadores — no al usuario que ve la página. El contenido del <head> no se renderiza en el viewport, pero determina cómo se muestra la pestaña del navegador, cómo aparece el resultado en Google, cómo se ve el link cuando alguien lo comparte en redes sociales, y si la página carga su hoja de estilos antes de mostrar el contenido.

Un <head> bien construido es invisible para el usuario que visita la página, pero tiene impacto real y medible: una página sin charset correcto muestra caracteres rotos; una sin viewport se ve como una página de escritorio reducida en pantallas móviles; una sin title pierde puntos de SEO y confunde a quien tiene muchas pestañas abiertas. Estos elementos son la infraestructura silenciosa de cualquier documento HTML publicado.

Los tres elementos que viven en el <head> son <title>, <meta> y <link>. Cada uno tiene un rol diferente: <title> declara el nombre del documento, <meta> transmite pares clave-valor de metadata al navegador y a agentes externos, y <link> conecta el documento con recursos externos.

Cómo funciona

<title> — el nombre del documento

<title> contiene el texto que aparece en la pestaña del navegador, en los resultados de búsqueda como el enlace principal, y como texto por defecto cuando se guarda la página en favoritos. Es el único elemento obligatorio del <head> (además del <meta charset>): sin él, el documento es técnicamente inválido.

Un buen <title> es específico y único por página — no "Mi sitio", sino "Flexbox — Referencia CSS | Frontend Classroom". Los motores de búsqueda lo usan como señal principal de relevancia.

<meta> — metadata en pares clave-valor

<meta> es un elemento vacío que transmite pares nombre-contenido. Las variantes más importantes:

  • charset: declara la codificación de caracteres del documento. Siempre UTF-8, siempre como primer <meta> del <head>. Sin él, los caracteres fuera del ASCII básico (acentos, ñ, emojis) pueden mostrarse rotos.
  • name="viewport": controla cómo el navegador móvil escala la página. El valor estándar es content="width=device-width, initial-scale=1". Sin este meta, el navegador móvil renderiza la página como si tuviera 980px de ancho y la escala hacia abajo.
  • name="description": texto que los motores de búsqueda muestran debajo del título en los resultados. No garantiza aparecer (Google puede elegir otro fragmento), pero es la señal de preferencia del autor.
  • property="og:*": etiquetas Open Graph para redes sociales. Controlan título, descripción e imagen cuando alguien comparte el link en Twitter/X, Facebook, LinkedIn, etc.
<head> <title> pestaña / SEO <meta> charset="UTF-8" name="viewport" name="description" property="og:title" property="og:image" y más variantes… <link> rel="stylesheet" rel="icon" rel="preload" rel="canonical" rel="alternate"

<link> — conexión con recursos externos

<link> conecta el documento con recursos que necesita. El atributo rel declara la relación:

  • rel="stylesheet": carga una hoja de estilos CSS. Es bloqueante por defecto — el navegador no pinta la página hasta que la hoja esté cargada, para evitar el flash de contenido sin estilos (FOUC).
  • rel="icon": el favicon de la pestaña y de los favoritos.
  • rel="preload": le avisa al navegador que va a necesitar un recurso pronto (una fuente, una imagen hero) para que lo descargue con anticipación, antes de que el parser llegue al elemento que lo usa.
  • rel="canonical": declara la URL canónica de la página cuando hay varias URLs que sirven el mismo contenido (paginación, parámetros de query). Importante para SEO.

Cuándo usar qué

NecesidadElemento / atributo
Título de pestaña y SEO<title> — obligatorio
Codificación de caracteres<meta charset="UTF-8"> — siempre primero
Escala en móvil<meta name="viewport" content="width=device-width, initial-scale=1">
Descripción para buscadores<meta name="description" content="...">
Imagen al compartir en redes<meta property="og:image" content="...">
Hoja de estilos CSS<link rel="stylesheet" href="estilos.css">
Favicon<link rel="icon" href="favicon.svg">
Cargar fuente anticipadamente<link rel="preload" href="fuente.woff2" as="font" crossorigin>

meta description vs title

El <title> es lo que el usuario ve en la pestaña y en el resultado de búsqueda como enlace. La meta description es el texto de apoyo debajo del enlace en los resultados — los buscadores la muestran si la consideran relevante para la consulta. Si no existe, el buscador elige un fragmento del contenido de la página. No hay garantía, pero sí preferencia: una description bien escrita aumenta el click-through rate.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Flexbox — Referencia CSS | Frontend Classroom</title>
  <meta name="description"
        content="Sistema de layout unidimensional de CSS. Aprende a usar display: flex, flex-direction, justify-content y align-items.">
  <meta property="og:title" content="Flexbox — Referencia CSS">
  <meta property="og:description" content="Sistema de layout unidimensional de CSS.">
  <meta property="og:image" content="https://ejemplo.com/og/flexbox.png">
  <link rel="canonical" href="https://ejemplo.com/referencia/css/flexbox/">
  <link rel="icon" href="/favicon.svg">
  <link rel="stylesheet" href="/estilos/global.css">
</head>