SEO en HTML: title, description, canonical y sitemap

SEO (Search Engine Optimization, optimización para buscadores) es todo lo que haces para que tus páginas aparezcan en Google, Bing y otros buscadores, y para que la gente haga clic en ellas. Una parte del SEO depende del contenido y de otras webs que te enlacen, pero otra parte depende directamente de cómo escribes tu HTML. En esta lección verás esa parte: el title y la description, los encabezados, las URLs, la etiqueta canonical, cómo controlar qué se indexa con robots, el sitemap.xml, las versiones en otros idiomas con hreflang y las etiquetas para compartir en redes.

Cómo funciona un buscador

Para entender el SEO hay que saber qué hace un buscador. Su trabajo tiene tres fases:

1. Rastreo (crawling): un programa llamado rastreador o bot (el de Google se llama Googlebot) visita páginas, lee su HTML y sigue sus enlaces para descubrir páginas nuevas.
2. Indexación: el buscador analiza cada página (de qué trata, en qué idioma está, qué imágenes tiene) y la guarda en su índice, una enorme base de datos.
3. Clasificación (ranking): cuando alguien busca algo, el buscador elige del índice las páginas más útiles y las ordena.

Tu HTML influye en las tres: unos enlaces bien hechos ayudan a rastrear, un HTML semántico y claro ayuda a entender la página, y un buen título hace que la gente elija tu resultado.

Nota: el SEO no tiene trucos mágicos. Los buscadores intentan mostrar lo que es útil para las personas, así que casi todo lo que mejora el SEO también mejora la web para quien la visita.

El título y la descripción

Un resultado de Google tiene tres partes: la dirección, el título (en azul) y un fragmento de texto debajo. Las dos últimas salen, normalmente, de tu <head>:

<title>Rutas de senderismo en Picos de Europa para principiantes · Monte Abierto</title>
<meta name="description" content="Doce rutas fáciles por Picos de Europa con mapa, desnivel, duración y consejos para ir con niños. Descarga los tracks gratis.">

Ya viste estas etiquetas en el head y los metadatos. Desde el punto de vista del SEO, estas son las reglas:

El <title>

• Es de lo que más pesa en el SEO de la página. Pon al principio las palabras que la gente buscaría.
• Unos 50-60 caracteres. Si es más largo, Google lo corta con ”…”.
• Único en cada página. Si todas tus páginas se llaman “Inicio”, el buscador no sabe cuál mostrar.
• El nombre de la web, al final y separado: · Monte Abierto o | Monte Abierto.
• Escrito para personas: nada de repetir la misma palabra cinco veces.

La description

• No influye directamente en la posición, pero sí en que la gente haga clic.
• Unos 140-160 caracteres, con un resumen concreto y una razón para entrar.
• También única en cada página.
• Google puede ignorarla y elegir otro trozo del texto si cree que encaja mejor con lo que se ha buscado. Es normal.

Prueba en el editor de esta lección cómo se vería tu resultado con distintos títulos y descripciones.

Encabezados y contenido

Los buscadores leen tu página de forma parecida a un lector de pantalla: se fijan en la estructura. Por eso, lo que ya sabes de HTML semántico es también SEO:

• Un solo <h1> por página, que diga claramente de qué trata. Suele parecerse al <title>, aunque no tiene por qué ser idéntico.
• Encabezados en orden (<h2>, <h3>…) que resuman cada sección. Un buscador que solo leyera tus encabezados debería entender el índice de la página.
• Etiquetas semánticas (<main>, <article>, <nav>) para separar el contenido principal del menú y el pie.
• Texto real, no texto dentro de imágenes. Un buscador no lee bien un cartel en JPG.
• alt descriptivo en las imágenes: es lo que usa Google Imágenes. Lo tienes en imágenes.

<main>
  <article>
    <h1>Rutas de senderismo en Picos de Europa para principiantes</h1>
    <p>Doce rutas de menos de 500 metros de desnivel...</p>

    <h2>Ruta del Cares</h2>
    <img src="/img/cares.jpg" alt="Senda del Cares excavada en la roca sobre el río" width="800" height="533">
    <p>...</p>

    <h2>Lagos de Covadonga</h2>
    <p>...</p>
  </article>
</main>

Enlaces internos

Los enlaces entre tus propias páginas ayudan a los buscadores a descubrirlas y a entender de qué trata cada una. Dos reglas:

• Que sean enlaces de verdad, con <a href>. Un <div> o un <button> que navega con JavaScript puede no seguirse.
• Que el texto del enlace diga a dónde lleva: “consulta la ruta del Cares” (con el enlace en esas palabras) mejor que “haz clic aquí”. El texto del enlace es una pista para el buscador sobre la página de destino.

URLs legibles

La dirección de la página también se ve en el resultado y da pistas al buscador:

Peor	Mejor
/pagina.php?id=4821&cat=7	/rutas/picos-de-europa/
/Rutas_Senderismo_FACILES.html	/rutas/faciles/
/2026/10/06/post-1/	/blog/que-llevar-en-la-mochila/

• Cortas, descriptivas y en minúsculas.
• Palabras separadas por guiones (-), no por guiones bajos ni espacios.
• Sin tildes ni eñes: /montana/ mejor que /montaña/, que en el navegador se convierte en /monta%C3%B1a/.
• Estables: si cambias una URL, los enlaces que te apuntaban dejan de funcionar. Si no queda más remedio, el servidor debe hacer una redirección 301 (permanente) de la antigua a la nueva, para que los buscadores trasladen todo a la nueva dirección.

La URL canónica

A menudo, la misma página se puede abrir desde varias direcciones:

https://monteabierto.es/rutas/cares/
https://www.monteabierto.es/rutas/cares/
https://monteabierto.es/rutas/cares/?utm_source=instagram
https://monteabierto.es/rutas/cares/index.html

Para ti son la misma página; para un buscador, son cuatro páginas con contenido duplicado, y no sabe cuál mostrar. La etiqueta canonical le dice cuál es la dirección “oficial”:

<link rel="canonical" href="https://monteabierto.es/rutas/cares/">

• Ponla en todas las páginas, también apuntando a sí misma.
• Siempre con la URL completa, con https:// y el dominio.
• Elige una forma y sé coherente: con www o sin él, con barra final o sin ella.
• Es una sugerencia: si es incoherente con el resto de señales (por ejemplo, apunta a una página que da error), Google puede ignorarla.

Controlar qué se indexa: robots

No todas las páginas deben salir en Google: la página de “gracias por tu pedido”, el área privada, los resultados del buscador interno o una versión de pruebas. Hay dos herramientas distintas y conviene no confundirlas.

La etiqueta <meta name="robots">

Va en el <head> de la página concreta y le da instrucciones al buscador:

<!-- No mostrar esta página en los resultados -->
<meta name="robots" content="noindex">

<!-- No mostrarla y no seguir sus enlaces -->
<meta name="robots" content="noindex, nofollow">

Valor	Significado
index / noindex	Mostrar o no la página en los resultados
follow / nofollow	Seguir o no los enlaces de la página
noimageindex	No indexar las imágenes de la página
max-snippet:0	No mostrar fragmento de texto en el resultado

Si no pones nada, se entiende index, follow, así que solo necesitas la etiqueta para restringir.

El archivo robots.txt

Es un archivo de texto en la raíz del dominio (https://monteabierto.es/robots.txt) que dice a los rastreadores qué zonas no deben visitar:

User-agent: *
Disallow: /admin/
Disallow: /carrito/

Sitemap: https://monteabierto.es/sitemap.xml

• User-agent: * significa “para todos los rastreadores”.
• Cada Disallow indica una ruta que no deben rastrear.
• La línea Sitemap indica dónde está el mapa del sitio (lo verás enseguida).

Cuidado: robots.txt impide rastrear, no indexar. Si bloqueas una página en robots.txt, Google no puede leerla… y por tanto tampoco ve su noindex. Si otras webs la enlazan, puede aparecer en los resultados igualmente, sin descripción. Para que una página no salga en Google, déjala rastrear y ponle <meta name="robots" content="noindex">.

Y recuerda: robots.txt es público y los bots maliciosos lo ignoran. No es una medida de seguridad: lo privado se protege con contraseña.

Enlaces que no quieres respaldar

Un enlace es, para los buscadores, una especie de recomendación. Si enlazas algo que no quieres respaldar, márcalo con rel:

<a href="https://tienda-de-botas.example/" rel="sponsored">Botas con descuento</a>
<a href="https://web-de-un-usuario.example/" rel="ugc nofollow">Web del autor del comentario</a>

• sponsored: enlace pagado o publicitario.
• ugc (user generated content): enlace puesto por usuarios, como en comentarios o foros.
• nofollow: cualquier otro enlace que no quieras respaldar.

El mapa del sitio: sitemap.xml

Un sitemap es un archivo XML con la lista de las páginas de tu web que quieres que los buscadores conozcan. No es obligatorio (los buscadores encuentran las páginas siguiendo enlaces), pero ayuda en webs grandes, nuevas o con páginas poco enlazadas.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://monteabierto.es/</loc>
    <lastmod>2026-10-01</lastmod>
  </url>
  <url>
    <loc>https://monteabierto.es/rutas/cares/</loc>
    <lastmod>2026-09-15</lastmod>
  </url>
</urlset>

• Cada página va en un <url> con su dirección completa en <loc>.
• <lastmod> es la fecha de la última modificación real, en formato AAAA-MM-DD.
• Solo las URL canónicas que quieres indexar: nada de páginas con noindex ni redirecciones.
• Se avisa de su existencia en el robots.txt y en Google Search Console.

Casi ningún sitemap se escribe a mano: los generan los gestores de contenidos (WordPress) y los frameworks (Astro, Next.js) automáticamente.

Webs en varios idiomas: hreflang

Si tu web tiene la misma página en varios idiomas, indica a los buscadores qué versión corresponde a cada idioma, para que muestren a cada persona la suya:

<link rel="alternate" hreflang="es" href="https://monteabierto.es/rutas/cares/">
<link rel="alternate" hreflang="en" href="https://monteabierto.es/en/routes/cares/">
<link rel="alternate" hreflang="fr" href="https://monteabierto.es/fr/itineraires/cares/">
<link rel="alternate" hreflang="x-default" href="https://monteabierto.es/rutas/cares/">

• El valor es un código de idioma (es, en, fr) y, si hace falta, de país: es-MX para español de México, en-GB para inglés del Reino Unido.
• x-default es la versión para quien no encaja en ninguna de las anteriores.
• Todas las versiones deben llevar la lista completa, incluida la suya propia. Si la página en inglés no enlaza de vuelta a la española, el buscador ignora la relación.
• Cada versión tiene su propio lang en el <html> (<html lang="en">) y su propia canonical, que apunta a sí misma, no a la versión española.

Compartir en redes: Open Graph

Cuando alguien comparte tu enlace en WhatsApp, LinkedIn o Telegram, la aplicación lee las etiquetas Open Graph para montar una tarjeta. No influyen en Google, pero sí en cuánta gente hace clic al ver el enlace compartido:

<meta property="og:title" content="Ruta del Cares: guía para principiantes">
<meta property="og:description" content="12 km sin apenas desnivel entre Poncebos y Caín.">
<meta property="og:image" content="https://monteabierto.es/img/compartir-cares.jpg">
<meta property="og:url" content="https://monteabierto.es/rutas/cares/">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">

Lo esencial: property en lugar de name, imagen de unos 1200 × 630 píxeles y URLs completas. La última línea pide a X (antes Twitter) una tarjeta con imagen grande; si falta, usa las etiquetas og: igualmente.

Datos estructurados

Puedes ir un paso más allá y describir el contenido con un vocabulario que los buscadores entienden: “esto es una receta y tarda 40 minutos”, “esto es un evento el sábado a las 10”. Con eso, Google puede mostrar resultados enriquecidos, con estrellas, precios o fechas. Se explica en la lección de datos estructurados.

Móvil y velocidad

Google indexa primero la versión móvil de tu web, así que una página que se ve mal en el móvil está en desventaja. Imprescindible: el <meta name="viewport"> y un diseño responsive.

La velocidad también cuenta. Google mide la experiencia de carga con unas métricas llamadas Core Web Vitals: cuánto tarda en verse lo principal, cuánto tarda en responder a un clic y si el contenido “salta” mientras carga. Cómo mejorarlas desde el HTML lo verás en rendimiento.

Herramientas para revisar tu SEO

• Google Search Console (gratuita): te dice qué páginas tiene Google indexadas, con qué búsquedas apareces, qué errores encuentra y te deja enviar tu sitemap. Es la primera herramienta que hay que configurar al publicar una web.
• Lighthouse, en las DevTools de Chrome: su apartado SEO revisa título, descripción, robots, enlaces rastreables y tamaño del texto. Lo viste en buenas prácticas.
• La búsqueda site:monteabierto.es en Google muestra qué páginas de ese dominio tiene indexadas.
• Ver código fuente (Ctrl + U) en tu propia página: comprueba que el title, la description y la canonical son los que esperas.

Errores frecuentes

• El mismo <title> en todas las páginas (o el “Document” de la plantilla): cada página necesita el suyo.
• Varios <h1> o encabezados elegidos por su tamaño: el orden de los encabezados es la estructura; el tamaño se cambia con CSS.
• Bloquear en robots.txt una página con noindex: el buscador no puede leer el noindex y la página puede seguir apareciendo.
• Olvidar quitar el noindex de la versión de pruebas al publicar: la web entera desaparece de Google.
• Canonical con ruta relativa o apuntando a otra página distinta: usa siempre la URL completa de la propia página.
• hreflang sin reciprocidad: si las versiones no se enlazan entre sí, el buscador lo ignora.
• Cambiar URLs sin redirigir: se pierden las visitas que llegaban desde Google y desde otras webs.
• Texto importante dentro de imágenes: el buscador no lo lee bien y tampoco quien usa un lector de pantalla.
• Rellenar el título y el texto con palabras clave repetidas: los buscadores lo detectan y lo penalizan.

Resumen

Elemento	Para qué	Clave
<title>	Título del resultado	50-60 caracteres, único, lo importante delante
meta description	Fragmento del resultado	140-160 caracteres, invita al clic
<h1> y encabezados	Estructura del contenido	Un <h1>, niveles en orden
URLs	Dirección legible	Minúsculas, guiones, estables (301 si cambian)
rel="canonical"	Evitar contenido duplicado	URL completa, en todas las páginas
meta robots	No indexar una página	noindex
robots.txt	No rastrear zonas	No es seguridad; no bloquees lo que tiene noindex
sitemap.xml	Lista de páginas para el buscador	Solo URL canónicas, enviado en Search Console
hreflang	Versiones en otros idiomas	Recíproco y con x-default
Open Graph	Tarjeta al compartir	Imagen de 1200 × 630, URLs completas

En la siguiente lección verás cómo conseguir que tus páginas carguen rápido: rendimiento.

<!-- Página española -->
<link rel="alternate" hreflang="en" href="https://ejemplo.es/en/">

<!-- Página inglesa: no tiene ninguna etiqueta hreflang -->