Maquetación Web Dinámica / HTML5 desde cero: el esqueleto

Metadatos y SEO básico: title, description, OpenGraph y favicon

Teoría15 min20 XP

Dos páginas idénticas: una aparece en Google con un título claro y al compartirla en WhatsApp muestra una tarjeta con imagen; la otra sale como "index.html" y un enlace pelado. La diferencia son ~10 líneas en el <head>. Hoy las aprendes todas.

El head mínimo profesional

head-completo.html

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Recetas de 15 minutos | Cocina Express</title>
<meta
  name="description"
  content="30 recetas probadas que se preparan en 15 minutos o menos,
           con ingredientes de cualquier supermercado."
>
<link rel="icon" href="favicon.svg" type="image/svg+xml">
</head>

charset="utf-8": habilita tildes, eñes y emojis. Primera línea del head, siempre.
viewport: sin ella, los celulares muestran tu página en miniatura como si fuera de escritorio. La entenderás a fondo en el módulo de responsive.
<title>: el texto de la pestaña Y el título azul en Google. Fórmula probada: Qué es esta página | Nombre del sitio, menos de 60 caracteres.
description: el texto gris bajo el título en Google. No afecta el ranking directamente, pero define si la gente hace CLIC. 150-160 caracteres.

OpenGraph: la tarjeta al compartir

Cuando pegas un enlace en WhatsApp, X o LinkedIn, la tarjeta con imagen, título y descripción sale de las etiquetas OpenGraph (og:):

opengraph.html

<meta property="og:title" content="Recetas de 15 minutos">
<meta property="og:description" content="30 recetas probadas, rápidas y ricas.">
<meta property="og:image" content="https://cocinaexpress.co/og-image.jpg">
<meta property="og:url" content="https://cocinaexpress.co/recetas">
<meta property="og:type" content="website">

Detalle importante: la URL de og:image debe ser absoluta (con https://) porque la leerá el servidor de WhatsApp/X desde afuera de tu página — las rutas relativas no significan nada para él. La imagen ideal mide 1200×630px.

El favicon

El ícono de la pestaña. El formato moderno es SVG (escala perfecto y soporta modo oscuro), con un .ico de respaldo para navegadores viejos si tu público lo requiere:

favicon.html

<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="icon" href="favicon.ico" sizes="32x32">

¿Por qué la og:image debe llevar URL absoluta (https://...)?

Mini-reto

Completa el <head> de tu index.html con los 7 metadatos de esta lección. Luego pega la URL de cualquier sitio famoso en opengraph.xyz y compárala con la tuya: verás exactamente qué tarjeta genera cada metadato.

Qué sigue

Tienes TODO el HTML que necesitas. Hora de demostrarlo: el reto de módulo — maquetar la estructura semántica completa de un periódico digital, sin una línea de CSS. Solo estructura, como los profesionales empiezan cualquier proyecto.