≡En resumen
- El title tag es un elemento obligatorio en casi cualquier página HTML y va dentro del head, nunca en el body.
- Solo puede haber uno por documento y solo admite texto; los caracteres especiales se escriben como entidades.
- Se ve en la pestaña del navegador, en marcadores e historial, lo leen los lectores de pantalla y Google lo usa para el título del resultado.
- Google no fija un límite de caracteres: recorta por ancho en píxeles, así que lo importante debe ir al principio.
- En WordPress, Shopify o Next.js no se escribe a mano: se genera desde un campo del CMS o del framework.
01 ¿Qué es el title tag?
En SEO se le llama también meta title, título SEO o etiqueta de título; todos son el mismo elemento. Esta página se centra en su parte técnica: cómo se escribe, dónde va y cómo lo generan los CMS. Si lo que buscas es cómo redactarlo para conseguir clics, tienes fórmulas y ejemplos en nuestra guía de cómo escribir títulos SEO.
02 Sintaxis y reglas del elemento title
<!doctype html><html lang="es"><head> <meta charset="utf-8"> <title>Zapatillas de trail para mujer | Tienda Montaña</title> <meta name="description" content="…"></head>
- ✓Va dentro del head. Si aparece en el body, el navegador puede corregirlo, pero es un error de marcado.
- ✓Solo uno por documento: el estándar HTML dice que no debe haber más de un elemento title.
- ✓Solo texto: no admite negritas, enlaces ni otras etiquetas dentro.
- ✓Los caracteres especiales se escriben como entidades: & para «&» y < para «<».
- ✓Conviene colocarlo después del meta charset para que los acentos y la ñ se interpreten bien.
- ✓No es un meta: aunque se diga «meta title», no se escribe como meta name="title".
| Elemento | Dónde está | Para qué sirve |
|---|---|---|
| title | En el head | Título del documento: pestaña, marcadores, buscadores |
| h1 | En el body | Encabezado principal visible dentro de la página |
| og:title | Meta de Open Graph en el head | Título de la tarjeta al compartir en redes |
| Atributo title | En cualquier etiqueta del body | Texto de ayuda que aparece al pasar el ratón; no es el título de la página |
| title dentro de un SVG | Dentro de un gráfico SVG | Nombre accesible del gráfico; no cuenta como título del documento |
03 Dónde se ve el title tag
Pestaña del navegador
Con muchas pestañas abiertas solo se leen las primeras palabras: otra razón para empezar por lo importante.
Marcadores e historial
Es el nombre con el que se guarda la página cuando alguien la añade a favoritos.
Resultados de Google
Es la fuente principal del enlace de título del resultado, aunque Google puede usar el H1 u otros textos.
Redes y mensajería
Si la página no tiene og:title, muchas plataformas usan el title en la vista previa del enlace.
Lectores de pantalla
Es lo primero que anuncian al abrir una página. WCAG lo exige en su criterio 2.4.2, de nivel A.
El title trabaja en equipo con otros elementos de la cabecera: la meta description completa el resultado de búsqueda y el og:title de Open Graph permite adaptar el título a redes sociales sin tocar el que ve Google.
04 Longitud del title: caracteres frente a píxeles
Google no limita la longitud del elemento title. Lo que hace es recortar el enlace de título en sus resultados cuando no cabe en el ancho disponible, que depende del dispositivo. Como el corte se hace por espacio y no por número de letras, un título lleno de letras anchas (M, W, mayúsculas) se corta antes que uno con letras estrechas (i, l, t).
| Criterio | Qué implica |
|---|---|
| Referencia práctica | Entre 50 y 60 caracteres suele verse completo en escritorio |
| Unidad real de corte | Ancho en píxeles, distinto en escritorio y en móvil |
| Mayúsculas | Ocupan más: un título en mayúsculas se corta mucho antes |
| Títulos largos | No penalizan, pero la parte final puede no verse |
| Prioridad | Lo esencial en las primeras 5-6 palabras |
05 Cómo se edita el title en WordPress, Shopify y frameworks
| Plataforma | Cómo se genera | Dónde lo cambias |
|---|---|---|
| WordPress | El tema lo genera si declara el soporte title-tag (disponible desde WordPress 4.1) | Con un plugin SEO como Yoast o Rank Math, en el campo de título SEO de cada página |
| Shopify | Título del producto, colección o página más el nombre de la tienda | En la sección de vista previa del motor de búsqueda de cada ficha |
| WooCommerce | Igual que WordPress | Campo de título SEO del plugin en cada producto y categoría |
| Next.js | Objeto metadata o función generateMetadata de cada ruta | En el código de la página o con plantillas de título |
| Laravel u otro PHP | Plantilla del layout (por ejemplo, una sección de título en Blade) | En cada vista o desde el controlador |
06 Cómo comprobar el title de una página
-
1
Mira el código fuente
Abre ver código fuente (Ctrl+U) y busca title. Verás el HTML que envía el servidor.
-
2
Compara con el DOM renderizado
En las herramientas de desarrollo, escribe document.title en la consola: si cambia respecto al código fuente, lo está modificando JavaScript.
-
3
Rastrea el sitio entero
Un rastreador SEO lista titles vacíos, duplicados, demasiado largos o múltiples en todas las URL.
-
4
Contrasta con Google
Busca tu página en Google y compara el enlace de título con tu title. Si no coinciden, Google lo ha reescrito.
Revisar los titles es una parte fija de cualquier auditoría SEO on page, porque los fallos se repiten por plantillas y afectan a cientos de URL a la vez. Lo repasamos junto al resto de elementos en nuestra checklist de factores de SEO on page.
07 El title tag en el SEO
El title es una de las señales que Google usa para entender de qué trata una página y, sobre todo, lo primero que lee quien ve el resultado. Google recomienda que cada página tenga un title propio, descriptivo y conciso, sin relleno de palabras clave ni texto repetido en todas las páginas. Cuando no lo es, lo sustituye por otro texto de la página, como la etiqueta H1.
La parte técnica garantiza que el title exista y sea correcto; la parte editorial decide si consigue el clic. Si tienes muchas páginas que titular, nuestro servicio de redacción SEO trabaja los titles junto a descripciones y contenidos.
Preguntas frecuentes sobre Title tag
Es el elemento title del HTML, que va en la cabecera de la página y define su título. Se ve en la pestaña del navegador y Google lo usa como principal fuente del título del resultado.
Dentro del head del documento HTML, idealmente después del meta charset. Nunca en el body.
No debe. El estándar HTML permite como máximo un elemento title por documento. Si hay dos, suele ser por un conflicto entre el tema y un plugin SEO.
No hay límite oficial. Google recorta por ancho en píxeles; como referencia, entre 50 y 60 caracteres suele verse completo en escritorio.
No. El title está en la cabecera y se ve fuera de la página; el H1 es el encabezado visible dentro de ella. Pueden coincidir, pero son elementos distintos.
Sí. Meta title, etiqueta title, título SEO y title tag son nombres del mismo elemento title del HTML.
Sí, con document.title, y Google puede leerlo porque renderiza JavaScript. Aun así, es más seguro que el title correcto llegue ya en el HTML que envía el servidor.
Instala un plugin SEO como Yoast o Rank Math y edita el campo de título SEO en cada página o entrada. Sin plugin, WordPress usa el título de la entrada y el nombre del sitio.
Fuentes consultadas
Sobre el autor
CEO de appyweb, especialista en SEO, IA y desarrollo
Fundador de appyweb. Más de una década posicionando webs y tiendas online en Google y en las respuestas de la IA, y dedicado también al desarrollo de software y las automatizaciones.
Ver perfil y artículos → Ver perfil en LinkedIn ↗