El head y los metadatos en HTML

El elemento <head> es la cabecera del documento. Contiene información sobre la página que no se ve dentro de ella: el título de la pestaña, la codificación de caracteres, los estilos, los scripts y los datos que usan Google y las redes sociales.

Una cabecera completa y bien escrita tiene este aspecto:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Curso de HTML desde cero · DevSchool</title>
  <meta name="description" content="Aprende HTML paso a paso con ejemplos que puedes editar.">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/css/estilos.css">
  <script src="/js/app.js" defer></script>
</head>

Vamos línea a línea.

<meta charset="utf-8">

Indica la codificación de caracteres, es decir, cómo se traducen los bytes del archivo en letras. Con UTF-8 puedes escribir cualquier carácter: tildes, eñes, emojis, alfabetos no latinos.

• Debe ir lo primero dentro del <head>.
• Tu editor debe guardar el archivo también en UTF-8 (es lo normal en VS Code).

Si falta, o no coincide con cómo se guardó el archivo, verás cosas como España en lugar de España.

En páginas antiguas verás <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">. Es la forma de HTML 4 y con una codificación que ya no se recomienda. En HTML5 basta con <meta charset="utf-8">.

<meta name="viewport">

<meta name="viewport" content="width=device-width, initial-scale=1">

Sin esta línea, el móvil muestra la página como si fuera un ordenador, en miniatura, y el usuario tiene que hacer zoom. Con ella, la página usa el ancho real de la pantalla. Es imprescindible para el diseño responsive.

No añadas user-scalable=no ni maximum-scale=1: impiden hacer zoom a quien tiene problemas de visión.

<title>

Es obligatorio. Es el texto de la pestaña del navegador, el nombre que se guarda en los marcadores y, sobre todo, el título azul que aparece en Google.

Un buen <title>:

• Describe esa página concreta, no toda la web: “Formularios en HTML · DevSchool” mejor que “DevSchool”.
• Pone lo importante al principio.
• Tiene unos 50-60 caracteres. Si es más largo, Google lo corta.
• Es distinto en cada página.

<meta name="description">

<meta name="description" content="Aprende a crear formularios en HTML con ejemplos...">

Es el resumen que suele mostrar Google debajo del título. No mejora directamente la posición, pero un buen resumen hace que más gente haga clic. Escribe unas 140-160 caracteres que expliquen qué va a encontrar la persona.

La antigua <meta name="keywords"> ya no la usa ningún buscador importante. No pierdas tiempo con ella.

<link>: archivos relacionados

<link> es un elemento vacío que conecta el documento con otros archivos:

<!-- Hoja de estilos -->
<link rel="stylesheet" href="css/estilos.css">

<!-- Icono de la pestaña (favicon) -->
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="icono-180.png">

<!-- URL canónica: la dirección "oficial" de esta página -->
<link rel="canonical" href="https://devschool.es/html/head/">

No confundas <link> con <a>: <link> va en el <head> y relaciona archivos; <a> va en el <body> y crea enlaces que el usuario pulsa.

<style> y <script>

También puedes escribir CSS directamente en la cabecera:

<style>
  body { font-family: system-ui, sans-serif; }
</style>

Y cargar JavaScript:

<script src="js/app.js" defer></script>

El atributo defer hace que el script se descargue en paralelo pero se ejecute cuando el HTML ya está cargado. Así puedes ponerlo en el <head> sin que falle al buscar elementos que aún no existen. La otra opción clásica es poner el <script> al final del <body>.

Fíjate en una pequeña incoherencia de HTML: para JavaScript se usa <script> tanto para escribir el código dentro como para enlazar un archivo externo; para CSS se usan dos elementos distintos, <style> y <link>.

Compartir en redes: Open Graph

Cuando alguien comparte tu enlace en WhatsApp, LinkedIn o X, esas aplicaciones leen unas etiquetas especiales para mostrar una tarjeta con título, descripción e imagen:

<meta property="og:title" content="Curso de HTML desde cero">
<meta property="og:description" content="Lecciones cortas con ejemplos que puedes editar.">
<meta property="og:image" content="https://devschool.es/img/compartir-html.png">
<meta property="og:url" content="https://devschool.es/html/">
<meta property="og:type" content="website">

La imagen debería medir unos 1200 × 630 píxeles.

<base>

<base href="https://ejemplo.com/docs/"> cambia la dirección desde la que se calculan todas las rutas relativas de la página. Se usa muy poco y suele causar más confusión que ventajas; es bueno conocerlo para reconocerlo.

Lo mínimo imprescindible

Si tienes prisa, estas cuatro líneas no pueden faltar en ninguna página:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Título descriptivo de esta página</title>
<meta name="description" content="Resumen de lo que contiene.">