La etiqueta title en HTML

🧠 ¿Qué es la etiqueta <head> y por qué es importante?

La etiqueta <head> actúa como un contenedor en el que se incluyen elementos clave que proporcionan información sobre el documento HTML. Aunque su contenido no se muestra directamente en el navegador, sí desempeña un papel crucial en cómo se interpreta y presenta la página.

Como mínimo, es recomendable incluir dos elementos esenciales dentro del <head>:

htmlCopiarEditar<head>
  <title>Nombre del documento</title>
  <meta charset="utf-8" />
</head>

El elemento <meta charset="utf-8" /> especifica al navegador que la codificación del documento es UTF-8, lo que permite que caracteres como acentos, eñes y símbolos especiales se muestren correctamente. Esta práctica evita problemas relacionados con la visualización de texto en diferentes idiomas.

📄 La función del título: <title>

La etiqueta <title> define el nombre del documento HTML. Es obligatoria y debe incluirse exactamente una vez por página. Este título no se muestra dentro del cuerpo de la página, pero sí en lugares como:

  1. La pestaña del navegador.
  2. Los resultados de búsqueda, si la página es indexada por Google (aunque Google puede reemplazarlo).
  3. Aplicaciones y bots que necesiten identificar el contenido del sitio.

📝 Recomendaciones para un buen título de página

Aunque técnicamente puedes escribir cualquier texto dentro del <title>, hay ciertas prácticas recomendadas para que este sea útil tanto para los usuarios como para el posicionamiento en buscadores (SEO):

  1. Evita títulos vacíos o genéricos como “Página sin título”.
  2. Asegúrate de que cada página de tu sitio tenga un título único.
  3. Usa un texto breve y descriptivo que refleje el contenido de la página.
  4. Aunque Google no define un límite exacto, se sugiere mantener el título entre 50 y 60 caracteres.
  5. No repitas palabras clave innecesariamente. En lugar de ayudarte, esto puede perjudicar tu posicionamiento.
  6. Si necesitas proporcionar información adicional, considera usar la etiqueta <meta name="description"> para complementar el título.

🧪 Cómo acceder al título con JavaScript

JavaScript permite leer y modificar el contenido de la etiqueta <title> de forma sencilla. Esto es útil si deseas actualizar el título dinámicamente, por ejemplo, al cargar contenido mediante AJAX.

Formas de acceder al título:

javascriptCopiarEditardocument.title                         // Devuelve el texto del título
document.querySelector("title").text  // Otra forma de acceder al mismo valor

// Comparación que devuelve true
document.querySelector("title").text === document.title;

Este acceso permite que el título de la página pueda ser actualizado de manera dinámica en función del comportamiento del usuario o el contenido que se carga.