Saltar al contenido
Curso de HTML
Todos los cursos
Curso de HTML › Lección 10 › Ejercicio

Ejercicio: SEO y metadatos

  • ⏱ 30 minutos
  • 📶 Nivel: principiante

Objetivo

Preparar el <head> completo de una página con las etiquetas de SEO y de vista previa que vimos, y comprobar la longitud de tu título y tu descripción.

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

💡 Pista 1: ¿cuántos caracteres tiene mi título?

Pega tu título en el widget «Vista previa en buscadores» de la lección: te muestra el conteo y si está dentro del rango recomendado.

💡 Pista 2: ¿qué valor pongo en og:image?

Una dirección completa que empiece con https://, por ejemplo https://tu-usuario.github.io/mi-sitio/img/compartir.png. No sirve una ruta relativa.

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

    ✅ Ver una solución de ejemplo

    Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

    seo.html
    <!doctype html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Plantas Verdes · Tienda de plantas de interior</title>
  <meta name="description" content="Plantas de interior fáciles de cuidar, con guías de riego y luz. Envíos a todo el país y asesoría gratuita.">
  <link rel="canonical" href="https://tu-usuario.github.io/plantas/">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <meta name="theme-color" content="#166534">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Plantas Verdes · Tienda de plantas de interior">
  <meta property="og:description" content="Plantas fáciles de cuidar, con guías de riego y luz.">
  <meta property="og:url" content="https://tu-usuario.github.io/plantas/">
  <meta property="og:image" content="https://tu-usuario.github.io/plantas/img/compartir.png">
  <meta name="twitter:card" content="summary_large_image">
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Store",
    "name": "Plantas Verdes",
    "description": "Tienda de plantas de interior",
    "url": "https://tu-usuario.github.io/plantas/"
  }
  </script>
</head>
<body>
  <h1>Plantas Verdes</h1>
  <p>Plantas de interior fáciles de cuidar.</p>
</body>
</html>

    💡 🏁 Reto extra (opcional)

    Crea un robots.txt y un sitemap.xml para tu sitio con al menos tres páginas, y súbelos a tu repositorio. Después verifica tu sitio en Google Search Console.