0Pricing
HTML Academy · Lección

title y su función en SEO

Escriba títulos de página eficaces que tengan un buen posicionamiento en los motores de búsqueda

title y su función en SEO es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

El elemento title

El elemento <title> establece el título del documento, uno de los elementos más importantes de HTML:

  • Se muestra en la pestaña del navegador
  • Aparece en los resultados de los motores de búsqueda (SERP)
  • Se usa como nombre predeterminado de los marcadores
  • Los lectores de pantalla lo leen cuando se carga una página

Dónde va title

El elemento title debe estar dentro de <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Learn HTML5 — CoddyKit</title>
  </head>
  <body>...</body>
</html>

Buenas prácticas de SEO para title

Cómo escribir títulos eficaces para SEO:

  • Manténgalo por debajo de 60 caracteres (Google trunca los títulos más largos)
  • Incluya la palabra clave principal cerca del principio
  • Incluya el nombre del sitio (normalmente al final)
  • Haga que sea único para cada página del sitio
  • Hágalo descriptivo y atractivo: es lo primero que leen los usuarios en los resultados de búsqueda

Patrón de title: página — sitio

Patrones habituales de title:

<!-- Page name first, site name last -->
<title>HTML Forms — CoddyKit</title>
<title>Contact Us — My Company</title>
<title>Search Results for "html" — CoddyKit</title>

<!-- For the homepage: site name first -->
<title>CoddyKit — Learn to Code</title>

<!-- Avoid: -->
<title>Untitled Document</title>  <!-- terrible -->
<title>Page 1</title>             <!-- not descriptive -->

Títulos dinámicos en SPA

Las aplicaciones de una sola página deben actualizar title al navegar:

// React / Next.js:
// <title> is set in document.head or via framework

// Vanilla JavaScript:
function navigateTo(page) {
  const titles = {
    home: 'Home — MyApp',
    about: 'About Us — MyApp',
    blog: 'Blog — MyApp',
  };
  document.title = titles[page] || 'MyApp';
  history.pushState({}, '', '/' + page);
}

title y Open Graph

El elemento title se complementa con Open Graph para compartir contenido en redes sociales:

<head>
  <title>HTML5 Semantic Elements Guide — CoddyKit</title>

  <!-- Override title for social sharing: -->
  <meta property="og:title" content="Master HTML5 Semantic Elements">
</head>
<!-- If og:title is absent, social networks may fall back to <title> -->

Comprobar la longitud de title

Cómo comprobar la longitud de title en DevTools:

  • Abra Chrome DevTools → panel Elements
  • Busque <head> → <title>
  • Cuente los caracteres, incluidos los espacios
  • O bien: auditoría de Lighthouse → SEO → Document has a title

name de Schema.org frente a title

Título de la página frente a name de Schema.org:

<!-- HTML title: shown in tabs and search results -->
<title>Widget Pro Review — Best Widgets 2025</title>

<!-- Schema.org: machine-readable name for structured data -->
<script type="application/ld+json">
{
  "@type": "Product",
  "name": "Widget Pro"
}
</script>

Accesibilidad de title

title es lo primero que oyen los usuarios de lectores de pantalla al abrir una página nueva:

  • Incluya siempre un title significativo
  • En páginas de modal o diálogo, o en SPA: actualice title para describir el estado actual
  • Los lectores de pantalla leen title al cargar la página y en cada cambio de ruta
  • Escriba títulos que tengan sentido al leerlos sin el contexto de la página

Títulos internacionalizados

En sitios multilingües, establezca los títulos en el idioma de la página:

<!-- French page: -->
<html lang="fr">
  <head>
    <title>Apprendre HTML5 — CoddyKit</title>
  </head>

<!-- Hreflang tells Google about language variants: -->
<link rel="alternate" hreflang="en" href="https://example.com/en">
<link rel="alternate" hreflang="fr" href="https://example.com/fr">

title en iframes

Cuando una página se carga en un iframe, el title del iframe es importante:

<!-- The iframe should have a descriptive title attribute: -->
<iframe src="/map" title="Interactive store locator map"></iframe>
<!-- The page inside the iframe also has its own <title> element -->
<!-- Screen readers read the iframe's title attribute, not the inner title -->

Medir el impacto SEO de title

Herramientas para comprobar la optimización de title:

  • Lighthouse → auditoría de SEO
  • Google Search Console → Performance (consulte los títulos reales que aparecen en las búsquedas)
  • SEMrush / Ahrefs → compruebe la vista previa del fragmento SERP
  • Extensiones de Chrome: MozBar, SEO Meta in 1 Click

Comprobación rápida

¿Cuál es el número máximo recomendado de caracteres para el title de una página HTML?

Recapitulación: title y SEO

Aspectos esenciales de title:

  • En <head>; único por página; obligatorio
  • Menos de 60 caracteres; palabra clave cerca del principio; nombre del sitio al final
  • Actualícelo en las SPA en cada navegación
  • Complementa og:title para compartir contenido en redes sociales
  • Los lectores de pantalla anuncian title al cargar la página

Preguntas frecuentes

¿La lección «title y su función en SEO» es gratis?

Sí — el texto completo de «title y su función en SEO» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «title y su función en SEO»?

Escriba títulos de página eficaces que tengan un buen posicionamiento en los motores de búsqueda Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «title y su función en SEO»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. title y su función en SEO
  2. meta charset viewport author y description
  3. URL canónicas y meta robots
  4. Favicon y Apple Touch Icon
← Volver a HTML Academy