SEO y metadatos

⏱ 35 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Escribir un <title> y una meta description efectivos.
Añadir favicon, canonical y etiquetas Open Graph.
Describir tu contenido con datos estructurados JSON-LD.
Crear un robots.txt y un sitemap.xml.

1.Qué es el SEO

SEO (Search Engine Optimization) es el conjunto de prácticas para que los buscadores entiendan tu página y la muestren a quien la necesita. No es un truco para «engañar a Google»: es, sobre todo, escribir un HTML claro y contenido útil.

Los buscadores recorren la web con programas llamados rastreadores, leen tu HTML y deciden de qué trata cada página. Tú no controlas su decisión, pero sí puedes darles las señales correctas, y casi todas se escriben en el <head>.

Señal	Dónde	Qué comunica
Título	`<title>`	De qué trata la página (lo más importante)
Descripción	`<meta name="description">`	Un resumen que suele aparecer bajo el título en los resultados
Contenido	`<h1>`, `<h2>`, texto, `alt`	La estructura y el significado
Dirección	La URL	Un nombre claro: `/cursos/html` es mejor que `/p?id=374`
Vistas previas	Etiquetas Open Graph	Cómo se ve al compartirla en redes

📌 Nota · Paciencia

Los buscadores tardan días o semanas en descubrir un sitio nuevo. No existe un SEO instantáneo: construye bien la base y mejora con el tiempo.

2.Título y descripción

Son lo primero que ve una persona en una lista de resultados. Juntos funcionan como el anuncio de tu página:

En el head

<title>Curso de HTML desde cero · Gratis y en español</title>
<meta name="description" content="Aprende HTML paso a paso con apuntes, práctica en vivo, autoevaluaciones y un proyecto final.">

Título: único para cada página, entre 30 y 60 caracteres, con lo más importante al principio.
Descripción: entre 70 y 160 caracteres, que invite a hacer clic y describa el contenido con verdad.
Si son más largos, el buscador los corta con «…».
No repitas el mismo título en todas las páginas.

Escribe abajo y mira, en tiempo real, cómo podría verse tu página en una lista de resultados:

Se escribe un título y una descripción y la vista previa de buscador y los contadores de caracteres se actualizan — Escribes el título y la descripción y la vista previa se actualiza al instante.

💡 Consejo · Escribe para personas

No llenes el título de palabras clave («html curso html gratis html español»). Un título natural y claro funciona mejor y es más fácil de entender para todos.

3.Las demás etiquetas del head

Un head completo

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Curso de HTML desde cero · Gratis y en español</title>
  <meta name="description" content="Aprende HTML paso a paso con apuntes, práctica en vivo y un proyecto final.">
  <link rel="canonical" href="https://cacg-code.github.io/web-desde-cero/">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <meta name="theme-color" content="#4f46e5">
</head>

Etiqueta	Para qué sirve
`meta charset`	Codificación de caracteres. Debe ir primero en el `<head>`
`meta viewport`	Hace que la página se adapte a pantallas de celular
`link rel="canonical"`	Indica la dirección oficial de la página cuando existe en varias versiones
`link rel="icon"`	El favicon: el iconito de la pestaña
`meta name="theme-color"`	Color de la barra del navegador en el celular
`meta name="robots"`	`noindex` pide que no aparezca en buscadores; úsalo en páginas privadas

⚠️ Importante · noindex no es una contraseña

noindex solo le pide al buscador que no la muestre; cualquiera con la dirección puede abrirla. Para contenido realmente privado necesitas protección de acceso.

🔍 Ejemplo · Un favicon en SVG

Un favicon puede ser un archivo SVG pequeño. Este curso usa el suyo con <link rel="icon" href="…svg" type="image/svg+xml">. Para compatibilidad antigua se añade además un favicon.ico.

4.Vistas previas al compartir: Open Graph

Cuando alguien pega tu enlace en WhatsApp, Facebook, LinkedIn o Slack, la tarjeta con título, descripción e imagen sale de las etiquetas Open Graph:

Open Graph y Twitter Card

<meta property="og:type" content="website">
<meta property="og:title" content="Curso de HTML desde cero">
<meta property="og:description" content="Aprende HTML paso a paso, gratis y en español.">
<meta property="og:url" content="https://cacg-code.github.io/web-desde-cero/">
<meta property="og:image" content="https://cacg-code.github.io/web-desde-cero/assets/img/compartir.png">
<meta property="og:locale" content="es_MX">
<meta name="twitter:card" content="summary_large_image">

og:image debe ser una dirección completa (con https://), idealmente de 1200 × 630 px.
og:url es la dirección que quieres que se asocie.
twitter:card con summary_large_image muestra una tarjeta grande.

💡 Consejo · Prueba tus tarjetas

Las redes guardan en memoria las vistas previas. Si cambias algo y no se actualiza, usa el depurador de la red (por ejemplo, el de Facebook o el inspector de LinkedIn) para volver a leerla.

5.Contenido y estructura

Lo que más pesa en el SEO no está en el <head>: está en tu contenido. Lo que ya aprendiste ayuda directamente:

Práctica	Por qué ayuda
Un solo `<h1>` con el tema principal	Es la señal más clara del tema de la página
Subtítulos `<h2>`, `<h3>` en orden	Estructuran las ideas y permiten fragmentos destacados
Texto original, claro y útil	Los buscadores premian el contenido que ayuda a las personas
`alt` descriptivo en imágenes	Las imágenes pueden aparecer en la búsqueda de imágenes
Texto de enlace descriptivo	«Guía de HTML» dice más que «haz clic aquí»
Etiquetas semánticas	`<main>`, `<article>`, `<nav>`… aclaran qué es cada zona
Páginas rápidas y adaptadas al celular	La velocidad y el uso móvil son factores de calidad

URLs con sentido

Cortas y en minúsculas: /lecciones/html-semantico.
Guiones (-) para separar palabras, no guiones bajos ni espacios.
Sin tildes ni caracteres especiales, y estables: cambiarlas rompe los enlaces que ya existen.

6.Datos estructurados (JSON-LD)

Los datos estructurados describen tu página con un vocabulario estándar, schema.org, para que los buscadores entiendan cosas concretas: un curso, una receta, un evento, un producto.

JSON-LD de un curso

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "Curso de HTML desde cero",
  "description": "Aprende HTML paso a paso, gratis y en español.",
  "inLanguage": "es",
  "provider": {
    "@type": "Person",
    "name": "Tu nombre"
  }
}
</script>

Se escribe dentro de un <script type="application/ld+json">. No se ve en la página: solo lo leen las máquinas. A veces permite que el buscador muestre resultados enriquecidos (estrellas, fechas, precios).

📌 Nota · Verifica siempre

Google ofrece la Prueba de resultados enriquecidos para comprobar que tu JSON-LD es válido. Un dato incorrecto es peor que no tenerlo: describe solo lo que realmente está en tu página.

7.robots.txt y sitemap.xml

Son dos archivos de texto que se colocan en la raíz del sitio y hablan directamente con los rastreadores:

Archivo	Función
`robots.txt`	Dice qué partes del sitio pueden o no recorrer los rastreadores
`sitemap.xml`	Lista las páginas que quieres que encuentren

robots.txt

User-agent: *
Allow: /

Sitemap: https://cacg-code.github.io/web-desde-cero/sitemap.xml

sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url><loc>https://cacg-code.github.io/web-desde-cero/</loc></url>
  <url><loc>https://cacg-code.github.io/web-desde-cero/01-primeros-pasos/</loc></url>
  <url><loc>https://cacg-code.github.io/web-desde-cero/02-texto-y-enlaces/</loc></url>
</urlset>

⚠️ Importante · Los sitios con carpeta de proyecto

En un repositorio de GitHub Pages que se publica en una subcarpeta (como /web-desde-cero/), los rastreadores buscan robots.txt en la raíz del dominio, no en la subcarpeta. El robots.txt que cuenta es el de tu-usuario.github.io. El sitemap.xml sí puede estar dentro de tu proyecto, y puedes enviarlo desde Google Search Console.

💡 Consejo · Search Console

Google Search Console es gratuito. Te muestra si tu sitio está indexado, con qué búsquedas aparece y qué errores hay. Verifica tu sitio y envía tu sitemap.xml.

8.Errores frecuentes

Mismo <title> y la misma descripción en todas las páginas.
Títulos muy largos que se cortan, o tan cortos como «Inicio».
Más de un <h1> o ninguno.
Imágenes sin alt y enlaces como «clic aquí».
Rellenar de palabras clave (técnica que los buscadores penalizan).
Olvidar og:image con una dirección completa: la tarjeta sale sin imagen.
Dejar noindex puesto después de terminar el sitio, y preguntarse por qué no aparece.
Cambiar las URLs sin redirigir, y perder todos los enlaces anteriores.
Prometer en la descripción algo que la página no tiene.

📒 Apuntes para llevar

SEO es ayudar a los buscadores a entender tu página; casi todo se escribe en el <head> y en el contenido.
<title>: único por página, de 30 a 60 caracteres. meta description: de 70 a 160 caracteres.
canonical indica la dirección oficial; icon define el favicon; theme-color, el color del navegador móvil.
Open Graph (og:title, og:description, og:image, og:url) controla la tarjeta al compartir en redes.
Un solo <h1>, títulos en orden, alt, enlaces descriptivos y HTML semántico ayudan al posicionamiento.
Los datos estructurados JSON-LD describen el contenido con el vocabulario de schema.org.
robots.txt y sitemap.xml van en la raíz del sitio y guían a los rastreadores.
El mejor SEO es contenido original y útil, páginas rápidas y adaptadas al celular.

9.Glosario

Término	Significado
SEO	Optimización para motores de búsqueda.
Rastreador	Programa que recorre la web leyendo páginas para el buscador.
Indexar	Guardar una página en la base del buscador para poder mostrarla.
Meta description	Resumen de una página que suele aparecer bajo el título en los resultados.
Canonical	Dirección oficial de una página que existe en varias versiones.
Open Graph	Etiquetas que definen la tarjeta al compartir un enlace en redes.
JSON-LD	Formato para datos estructurados que leen las máquinas.
Favicon	Icono pequeño que se ve en la pestaña del navegador.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Entre cuántos caracteres conviene que esté un <title>?

¿Qué etiquetas controlan la tarjeta que se ve al compartir un enlace en WhatsApp?

og:title, og:description e og:image forman la vista previa.

¿Cuántos <h1> conviene tener por página?

Un único <h1> aclara el tema principal.

<meta name="robots" content="noindex"> sirve para…

¿Dónde debe ir og:image?

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio