SEO on-page con HTML: metas, H1, canonical y Open Graph

Aprende a escribir el head HTML correcto para SEO: title, meta description, canonical, robots, Open Graph, Twitter Cards y Schema.org. Todo desde el HTML.

El SEO on-page es todo lo que puedes hacer dentro de tu propia página para mejorar su posicionamiento en buscadores. Gran parte de ese trabajo ocurre en el HTML: en el <head>, en la estructura de encabezados y en el marcado semántico del contenido.

Esta lección cubre lo esencial que todo desarrollador debería tener claro.

El <head>: la base del SEO

Lo que el usuario no ve en pantalla tiene tanto o más impacto en el SEO que lo que sí ve. El <head> es donde le dices a Google quién eres, qué haces y cómo quieres aparecer.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>HTML Intermedio: técnicas avanzadas para la web | ElData</title>
  <meta
    name="description"
    content="Domina lazy loading, dialog nativo, atributos data-* y SEO on-page con HTML. Curso intermedio para desarrolladores frontend."
  />

  <link rel="canonical" href="https://eldata.dev/cursos/html-intermedio/06-seo-onpage" />
</head>

<title>: el título más importante

El <title> es lo que aparece en la pestaña del navegador y, sobre todo, como enlace azul en los resultados de búsqueda.

<title>Aprende CSS Grid desde cero | ElData</title>

Buenas prácticas

  • Longitud: entre 50 y 60 caracteres. Google trunca lo que pase de ahí.
  • Incluye la palabra clave principal cerca del inicio.
  • Sé descriptivo y específico: evita títulos genéricos como “Inicio” o “Página 1”.
  • Unique: cada página debe tener un título diferente. Duplicar títulos confunde a Google.
  • Incluye el nombre del sitio al final, separado por | o –.
<!-- ✅ Bien -->
<title>CSS Grid: guía completa con ejemplos | ElData</title>

<!-- ❌ Mal: demasiado genérico -->
<title>Guía CSS</title>

<!-- ❌ Mal: demasiado largo, Google lo trunca -->
<title>Aprende a usar CSS Grid Layout para crear diseños complejos y responsivos de forma sencilla en cualquier proyecto web moderno</title>

meta description: el texto del snippet

La descripción no es un factor de ranking directo, pero sí afecta al CTR (click-through rate): cuánta gente hace clic en tu resultado cuando lo ve.

<meta
  name="description"
  content="Domina CSS Grid con ejemplos reales. Aprende a definir filas, columnas, áreas y alineación. Guía práctica para developers."
/>

Buenas prácticas

  • Longitud: entre 120 y 155 caracteres.
  • Incluye un call to action: “Aprende”, “Descubre”, “Guía práctica”…
  • Menciona la palabra clave de forma natural.
  • Única por página: igual que el título, no la dupliques.
  • Si no la defines, Google la generará automáticamente (y suele quedar peor).

El H1: un único por página

El <h1> es el título principal del contenido. Google le da especial importancia para entender de qué trata la página.

Regla fundamental: solo un <h1> por página.

<!-- ✅ Correcto: un solo H1, el resto son H2, H3... -->
<h1>CSS Grid: guía completa con ejemplos</h1>

<h2>¿Qué es CSS Grid?</h2>
<h3>Diferencias con Flexbox</h3>

<h2>Cómo definir columnas y filas</h2>
<h3>La unidad fr</h3>
<h3>repeat() y minmax()</h3>
<!-- ❌ Incorrecto: múltiples H1 confunden la jerarquía -->
<h1>CSS Grid</h1>
<h1>Guía completa</h1>

La jerarquía de encabezados importa

Los encabezados no son solo estilos tipográficos: son la estructura semántica del documento. Deben tener sentido como un índice de contenidos.

H1: Guía de CSS Grid
  H2: Fundamentos
    H3: display: grid
    H3: columnas y filas
  H2: Técnicas avanzadas
    H3: Template areas
    H3: Auto-fill y auto-fit
  H2: Ejemplos reales

No saltes niveles (de H2 a H4 directamente). Hazlo en orden descendente.

canonical: evitar contenido duplicado

La URL canónica le dice a Google cuál es la versión “oficial” de una página cuando el mismo contenido puede estar accesible desde varias URLs.

<!-- En todas las variantes de la URL, apuntando a la canónica -->
<link rel="canonical" href="https://eldata.dev/cursos/html-intermedio" />

¿Cuándo necesitas canonical?

  • Tienes paginación (/blog, /blog?page=2, /blog?pagina=2)
  • El mismo contenido es accesible con y sin www
  • Tienes parámetros de seguimiento en URLs (?utm_source=newsletter)
  • Tienes versiones mobile y desktop en URLs distintas
  • Un artículo aparece en varias categorías (/css/grid y /guias/grid)
<!-- URL con parámetros UTM -->
<!-- https://eldata.dev/cursos?utm_source=twitter -->
<link rel="canonical" href="https://eldata.dev/cursos" />

Importante: la URL canónica siempre debe ser absoluta (con https://).

meta robots: controlar el indexado

Le says a Google qué puede y qué no puede hacer con tu página:

<!-- Indexar la página y seguir sus enlaces (por defecto) -->
<meta name="robots" content="index, follow" />

<!-- No indexar esta página (no aparece en Google) -->
<meta name="robots" content="noindex" />

<!-- No seguir los enlaces de esta página -->
<meta name="robots" content="nofollow" />

<!-- Ni indexar ni seguir enlaces -->
<meta name="robots" content="noindex, nofollow" />

<!-- No mostrar snippet (descripción en resultados) -->
<meta name="robots" content="index, nosnippet" />

Páginas donde usar noindex:

  • Panel de administración
  • Páginas de confirmación (“Gracias por tu compra”)
  • Páginas de resultados de búsqueda interna
  • Páginas de staging/desarrollo

Open Graph: cómo se ve al compartir en redes

Cuando alguien comparte tu URL en Twitter, LinkedIn o WhatsApp, esas plataformas leen las Open Graph tags para mostrar el título, la imagen y la descripción correctos.

<!-- Tipo de contenido -->
<meta property="og:type" content="article" />

<!-- Título que aparece en la previsualización -->
<meta property="og:title" content="CSS Grid: guía completa con ejemplos" />

<!-- Descripción del contenido -->
<meta
  property="og:description"
  content="Domina CSS Grid con ejemplos reales. Aprende a definir filas, columnas, áreas y alineación."
/>

<!-- URL canónica -->
<meta property="og:url" content="https://eldata.dev/cursos/css/grid" />

<!-- Imagen de previsualización (recomendado: 1200×630px) -->
<meta property="og:image" content="https://eldata.dev/img/og/css-grid.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Diagrama de CSS Grid con ejemplos de código" />

<!-- Nombre del sitio -->
<meta property="og:site_name" content="ElData" />

<!-- Idioma -->
<meta property="og:locale" content="es_ES" />

Para artículos

Si la página es un artículo, puedes añadir metadatos específicos:

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-03-20T10:00:00Z" />
<meta property="article:author" content="https://eldata.dev/about" />
<meta property="article:section" content="HTML" />
<meta property="article:tag" content="HTML" />
<meta property="article:tag" content="SEO" />

Twitter Cards

Twitter (X) usa sus propias meta tags además de Open Graph:

<!-- Tarjeta grande con imagen -->
<meta name="twitter:card" content="summary_large_image" />

<!-- Tarjeta pequeña con miniatura -->
<!-- <meta name="twitter:card" content="summary" /> -->

<meta name="twitter:title" content="CSS Grid: guía completa con ejemplos" />
<meta
  name="twitter:description"
  content="Domina CSS Grid con ejemplos reales."
/>
<meta name="twitter:image" content="https://eldata.dev/img/og/css-grid.jpg" />
<meta name="twitter:image:alt" content="Diagrama de CSS Grid" />

<!-- Cuenta del autor -->
<meta name="twitter:creator" content="@eldata_dev" />

Si ya tienes las Open Graph tags, Twitter las usará como fallback. Solo necesitas las Twitter Cards si quieres un comportamiento diferente o añadir el twitter:card.

Structured Data: hablar con Google directamente

El marcado estructurado (Schema.org) permite a Google entender el contenido de tu página a un nivel más profundo y mostrarlo con rich snippets: valoraciones con estrellas, precio de productos, pasos de recetas, preguntas frecuentes…

Se implementa con JSON-LD dentro de un <script type="application/ld+json">:

Artículo

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "CSS Grid: guía completa con ejemplos",
  "description": "Domina CSS Grid con ejemplos reales.",
  "datePublished": "2026-03-20",
  "dateModified": "2026-03-20",
  "author": {
    "@type": "Person",
    "name": "ElData",
    "url": "https://eldata.dev/about"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ElData",
    "logo": {
      "@type": "ImageObject",
      "url": "https://eldata.dev/logo.png"
    }
  },
  "image": "https://eldata.dev/img/og/css-grid.jpg"
}
</script>

FAQ (preguntas frecuentes)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "¿CSS Grid reemplaza a Flexbox?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "No. Grid es para diseños bidimensionales (filas y columnas). Flexbox es para diseños unidimensionales (una fila o una columna)."
      }
    },
    {
      "@type": "Question",
      "name": "¿CSS Grid funciona en todos los navegadores?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Sí, CSS Grid tiene soporte en todos los navegadores modernos desde 2017."
      }
    }
  ]
}
</script>

El <head> completo y bien ordenado

Este es el orden recomendado para los elementos del <head>:

<head>
  <!-- 1. Charset: siempre el primero -->
  <meta charset="UTF-8" />

  <!-- 2. Viewport: segundo -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- 3. Title y description -->
  <title>Título de la página | Sitio</title>
  <meta name="description" content="Descripción de la página." />

  <!-- 4. Canonical y robots -->
  <link rel="canonical" href="https://tusitio.com/pagina" />
  <meta name="robots" content="index, follow" />

  <!-- 5. Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Título de la página" />
  <meta property="og:description" content="Descripción." />
  <meta property="og:url" content="https://tusitio.com/pagina" />
  <meta property="og:image" content="https://tusitio.com/img/og.jpg" />

  <!-- 6. Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image" />

  <!-- 7. Estilos críticos -->
  <link rel="stylesheet" href="/estilos.css" />

  <!-- 8. Recursos: favicon, fuentes -->
  <link rel="icon" href="/favicon.ico" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />

  <!-- 9. Structured Data -->
  <script type="application/ld+json">{ ... }</script>
</head>

Checklist de SEO on-page

Antes de publicar cualquier página, revisa:

  • <title> único, entre 50–60 caracteres, con la keyword principal.
  • <meta name="description"> única, entre 120–155 caracteres.
  • Un solo <h1> por página, con la keyword principal.
  • Jerarquía de encabezados correcta (H1 → H2 → H3, sin saltos).
  • <link rel="canonical"> apuntando a la URL canónica con https://.
  • Open Graph completo: og:title, og:description, og:image, og:url.
  • Imagen OG de 1200×630px, con texto legible y sin texto recortado.
  • meta robots configurado correctamente (index/noindex).
  • Atributos alt descriptivos en todas las imágenes.
  • URLs limpias, en minúsculas, con guiones (no guiones bajos).

¿Qué hemos aprendido?

  • El <title> y la <meta description> son los elementos más visibles del SEO.
  • Un único <h1> por página con la keyword principal es obligatorio.
  • El canonical evita penalizaciones por contenido duplicado.
  • Las Open Graph tags controlan cómo se ve tu página al compartirla.
  • El JSON-LD (Schema.org) permite a Google mostrar rich snippets.

¡Curso completado!

Has terminado el curso de HTML Intermedio/Avanzado. Ahora conoces las herramientas que separan un HTML que funciona de un HTML que rinde, es accesible y está bien posicionado.

Próximos pasos sugeridos: