Etiqueta HTML <title>
La etiqueta HTML <title> define el título de un documento HTML. El título se muestra en la barra del navegador y en las páginas de resultados de búsqueda.
La etiqueta HTML <title> define el título de un documento. Es un fragmento de metadatos del documento: no aparece en ningún lugar dentro de la página en sí, pero controla cómo se etiqueta la página en todos los lugares donde se hace referencia a ella — la pestaña del navegador, un marcador, un resultado de búsqueda y un enlace compartido en redes sociales.
Esta página explica por qué cada página necesita exactamente un <title>, dónde debe ir y cómo escribir uno que funcione bien tanto para los usuarios como para los motores de búsqueda.
Por qué importa el <title>
El <title> es uno de los pocos elementos obligatorios en un documento HTML válido. Los navegadores y los motores de búsqueda lo tratan como el nombre canónico y legible de la página, por lo que aparece en muchos lugares a la vez:
- Pestaña / ventana del navegador — el texto de la pestaña es el título de la página.
- Marcadores — cuando un usuario añade la página a marcadores, el título se convierte en el nombre predeterminado del marcador.
- Resultados de búsqueda (SERPs) — el título se suele usar como el titular azul y clicable del resultado, por lo que influye notablemente en la tasa de clics.
- Compartir en redes sociales — cuando se publica un enlace en una aplicación de chat o red social, el título se incluye en la tarjeta de vista previa del enlace (junto con las etiquetas meta como Open Graph).
- Accesibilidad — los lectores de pantalla anuncian el título cuando se carga una página, ayudando a los usuarios a confirmar dónde se encuentran.
Dado que tantas herramientas lo consumen, un título claro y preciso mejora tanto la UX (las personas reconocen la pestaña o el resultado correcto) como el SEO (los motores de búsqueda posicionan la página para consultas relevantes).
El título debe contener las palabras clave más importantes de la página para que los motores de búsqueda la posicionen para consultas relevantes — pero escríbelo pensando primero en las personas.
Dónde va: exactamente uno, dentro de <head>
El <title> debe estar dentro de la sección <head>, que es donde corresponden los metadatos del documento, y un documento debe contener exactamente un <title>. El <head> contiene información sobre la página (título, juego de caracteres, viewport, datos meta) en lugar de contenido visible, por lo que el título encaja naturalmente allí junto con el resto de los datos descriptivos de la página.
Sintaxis
El elemento <title> se usa en pares. El texto se escribe entre las etiquetas de apertura <title> y de cierre </title>, y solo puede contener texto — no otros elementos HTML.
Ejemplo de la etiqueta HTML <title>:
Etiqueta HTML <title>
<!DOCTYPE html>
<html>
<head>
<title>W3Docs - learn HTML, CSS, PHP, JavaScript online.</title>
</head>
<body>
<p>The main content of the page.</p>
</body>
</html>Cómo escribir un buen título: débil frente a optimizado
Un título vago o ausente obliga a los navegadores a recurrir a la URL, y los motores de búsqueda pueden reescribirlo o ignorarlo. Compara las dos páginas a continuación.
Título débil — demasiado corto y genérico:
<head>
<title>Home</title>
</head>Título optimizado — descriptivo, con el patrón Nombre de página | Nombre del sitio:
<head>
<title>HTML <title> Tag: Syntax, SEO and Examples | W3Docs</title>
</head>La plantilla Nombre de página | Nombre del sitio es una convención habitual y fiable: la parte única y rica en palabras clave del título va primero (donde es más visible en un resultado de búsqueda y en una pestaña de navegador estrecha), y el nombre del sitio va al final para el reconocimiento de marca. Una barra vertical (|) o un guion (-) es el separador habitual.
Pautas prácticas
- Mantén una longitud de unos 55–60 caracteres. Es una orientación, no un límite estricto — los motores de búsqueda truncan los títulos largos, así que coloca las palabras importantes al principio.
- Sé descriptivo. Evita títulos de una o dos palabras; usa una frase significativa que resuma la página.
- Haz que cada título sea único en todo tu sitio para que cada página sea distinguible en pestañas y resultados de búsqueda.
- Evita el exceso de palabras clave. Una lista de palabras se percibe como spam y no ayuda a nadie.
- Evita caracteres especiales poco habituales, que los distintos navegadores pueden renderizar de manera inconsistente.
Atributos
La etiqueta <title> admite los Atributos Globales. En la práctica, solo lang es significativo — declara el idioma del texto del título, lo que resulta útil cuando el título difiere del idioma del documento. Atributos como id, class y style son aceptados por el analizador sintáctico, pero no tienen efecto, ya que el título nunca se renderiza dentro de la página donde podrían aplicarse estilos o scripts.