SEO y meta etiquetas

De nada sirve un sitio hermoso si nadie lo encuentra. El SEO (Search Engine Optimization) son las prácticas para que Google y otros buscadores entiendan y posicionen tu página. En esta lección verás el SEO técnico que se hace desde HTML: títulos, descripciones, vistas previas para redes sociales, iconos, URLs canónicas y datos estructurados.

Concepto

Piensa en Google como un bibliotecario que tiene que clasificar millones de libros en segundos. Las meta etiquetas son la ficha del libro: título, resumen, autor, idioma, portada. Si la ficha está incompleta o es confusa, el libro queda en el estante equivocado.

El SEO tiene tres partes:

1. Técnico: que el sitio se pueda rastrear, sea rápido y esté bien etiquetado (esta lección).
2. Contenido: textos útiles que respondan lo que la gente busca.
3. Autoridad: que otros sitios te enlacen y tengas reseñas (por ejemplo, el perfil de Google Business para negocios locales).

Ejemplo: un head profesional completo

<!DOCTYPE html>
<html lang="es-MX">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO básico -->
  <title>Café Aroma | Cafetería de especialidad en Coyoacán, CDMX</title>
  <meta name="description" content="Café de especialidad mexicano, pan artesanal y un espacio acogedor en Coyoacán. Consulta el menú, horarios y reserva tu mesa.">
  <link rel="canonical" href="https://cafearoma.mx/">
  <meta name="robots" content="index, follow">

  <!-- Open Graph (Facebook, WhatsApp, LinkedIn) -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://cafearoma.mx/">
  <meta property="og:title" content="Café Aroma | Cafetería de especialidad en Coyoacán">
  <meta property="og:description" content="Café mexicano, pan artesanal y el mejor café de olla de la ciudad.">
  <meta property="og:image" content="https://cafearoma.mx/img/og-cafe-aroma.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Taza de café de olla sobre una mesa de madera">
  <meta property="og:locale" content="es_MX">
  <meta property="og:site_name" content="Café Aroma">

  <!-- Twitter / X -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Café Aroma | Cafetería de especialidad en Coyoacán">
  <meta name="twitter:description" content="Café mexicano, pan artesanal y el mejor café de olla de la ciudad.">
  <meta name="twitter:image" content="https://cafearoma.mx/img/og-cafe-aroma.jpg">

  <!-- Iconos -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
  <meta name="theme-color" content="#3e2723">

  <link rel="stylesheet" href="/css/estilos.css">
</head>

Ahora veamos cada parte.

title

Es el factor on-page más importante. Aparece como el enlace azul en Google y en la pestaña del navegador.

• 50–60 caracteres (Google corta los más largos).
• Único en cada página.
• Palabra clave principal al inicio, marca al final: Servicio o tema | Marca.
• Escrito para personas, no una lista de palabras clave.

<!-- ❌ -->
<title>Inicio</title>
<title>Café, cafetería, café CDMX, mejor café, café barato, café Coyoacán</title>

<!-- ✅ -->
<title>Menú de bebidas y postres | Café Aroma Coyoacán</title>

meta description

El texto gris bajo el título en los resultados. No mejora directamente la posición, pero sí el porcentaje de clics.

• 140–160 caracteres.
• Resume la página e invita a la acción.
• Única en cada página. Si falta, Google toma un fragmento al azar del texto.

Encabezados y contenido

• Un <h1> por página con la idea principal (y la palabra clave de forma natural).
• <h2> y <h3> para organizar: Google los usa para entender los temas.
• HTML semántico (<main>, <article>) ayuda a identificar el contenido principal.
• alt en imágenes y nombres de archivo descriptivos.
• Enlaces internos con texto descriptivo entre tus páginas.

URLs amigables

❌ https://cafearoma.mx/pagina.php?id=27&cat=3
❌ https://cafearoma.mx/Menu_Bebidas_Calientes_2026.html
✅ https://cafearoma.mx/menu/bebidas-calientes

• Cortas, en minúsculas, con guiones medios (no guiones bajos ni espacios).
• Sin acentos ni ñ (/disenos en lugar de /diseños).
• Que describan el contenido.
• Sitio con HTTPS obligatorio.

Open Graph: cómo se ve al compartir

Cuando alguien pega tu enlace en WhatsApp, Facebook, LinkedIn o Slack, esas apps leen las etiquetas Open Graph para mostrar una tarjeta con imagen, título y descripción. Sin ellas, el enlace se ve pobre y nadie le da clic.

Etiqueta	Contenido
og:title	Título (puede ser distinto al <title>, más atractivo).
og:description	Descripción corta.
og:image	Imagen de 1200×630 px, URL absoluta con https, menos de 5 MB (idealmente menos de 300 KB).
og:url	URL canónica de la página.
og:type	website, article, product…
og:locale	Idioma y región: es_MX, es_ES.

Error común

Usar una ruta relativa en og:image (/img/og.jpg). Facebook y WhatsApp necesitan la URL completa con https://. Además, estas apps guardan la vista previa en caché: después de cambiarla, refréscala con el Sharing Debugger de Facebook.

Twitter / X cards

X lee Open Graph como respaldo, pero necesita al menos twitter:card:

• summary: imagen pequeña cuadrada.
• summary_large_image: imagen grande (la más usada).

Favicon, apple-touch-icon y manifest

Un set moderno y suficiente de iconos:

Archivo	Tamaño	Uso
favicon.ico	32×32	Navegadores antiguos y algunas herramientas.
icon.svg	Vectorial	Navegadores modernos (puede adaptarse a modo oscuro).
apple-touch-icon.png	180×180	Al "Agregar a pantalla de inicio" en iPhone.
icon-192.png y icon-512.png	192 y 512	Android y apps instalables, declarados en el manifest.

El manifest (site.webmanifest) describe tu sitio como una app instalable:

{
  "name": "Café Aroma",
  "short_name": "Aroma",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ],
  "theme_color": "#3e2723",
  "background_color": "#fdf6ec",
  "display": "standalone",
  "start_url": "/"
}

theme-color colorea la barra del navegador en Android. Puedes generar todos los iconos a partir de una imagen con RealFaviconGenerator.

canonical: evitar contenido duplicado

Una misma página puede abrirse con varias URLs: con y sin www, con parámetros de campañas (?utm_source=facebook), con barra final o sin ella. Para Google son páginas distintas con el mismo contenido. La etiqueta canónica indica cuál es la "oficial":

<link rel="canonical" href="https://cafearoma.mx/menu">

Ponla en todas las páginas, apuntando a sí mismas con la URL absoluta y definitiva.

robots: qué indexar

<!-- Por defecto (no hace falta escribirlo) -->
<meta name="robots" content="index, follow">

<!-- No mostrar en Google: páginas de gracias, carrito, panel, entornos de prueba -->
<meta name="robots" content="noindex, nofollow">

Además existe el archivo robots.txt en la raíz del sitio, que indica qué rutas puede rastrear cada buscador, y el sitemap.xml, una lista de todas tus URLs:

# robots.txt
User-agent: *
Disallow: /admin/
Sitemap: https://cafearoma.mx/sitemap.xml

Antes de publicar

Si el sitio de pruebas tenía noindex, ¡quítalo al lanzar! Es uno de los errores más comunes y caros: el sitio del cliente no aparece en Google durante semanas.

Datos estructurados (JSON-LD)

Los datos estructurados le dicen a Google, en un formato que entiende perfectamente, qué es tu negocio o contenido: horario, dirección, precio, calificación, preguntas frecuentes. A cambio, Google puede mostrar resultados enriquecidos: estrellas, horarios, precios, eventos, recetas con foto.

Se escriben con el vocabulario de Schema.org en un bloque de script de tipo application/ld+json, normalmente en el head:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CafeOrCoffeeShop",
  "name": "Café Aroma",
  "image": "https://cafearoma.mx/img/fachada.jpg",
  "url": "https://cafearoma.mx/",
  "telephone": "+52-55-1234-5678",
  "priceRange": "$$",
  "servesCuisine": "Café mexicano",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Av. Francisco Sosa 123",
    "addressLocality": "Coyoacán",
    "addressRegion": "CDMX",
    "postalCode": "04000",
    "addressCountry": "MX"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": 19.3498, "longitude": -99.1652 },
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
      "opens": "07:00",
      "closes": "21:00"
    },
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Saturday", "Sunday"],
      "opens": "08:00",
      "closes": "22:00"
    }
  ],
  "sameAs": ["https://instagram.com/cafearoma", "https://facebook.com/cafearoma"]
}
</script>

Tipos más usados en proyectos de clientes:

Tipo	Para
LocalBusiness (y subtipos: Restaurant, Dentist, AutoRepair…)	Negocios locales.
Organization	Empresas: logo, redes sociales.
Product + Offer	Productos con precio y disponibilidad.
Article / BlogPosting	Entradas de blog y noticias.
FAQPage	Preguntas frecuentes.
Event	Eventos con fecha y lugar.
BreadcrumbList	Migas de pan.

Valida tu JSON-LD con la Prueba de resultados enriquecidos de Google.

Buena práctica

Los datos estructurados deben coincidir con lo que se ve en la página. Si declaras un horario o una calificación que el usuario no puede ver, Google puede penalizarte.

Herramientas de SEO

• Google Search Console (gratis): da de alta el sitio del cliente, sube el sitemap y revisa errores de indexación y búsquedas por las que aparece.
• Lighthouse → categoría SEO.
• PageSpeed Insights: la velocidad (Core Web Vitals) influye en el posicionamiento.
• Google Business Profile: imprescindible para negocios locales (aparecer en Google Maps).

Casos de uso reales

• Restaurante: JSON-LD Restaurant con horario y menú; Open Graph con foto del platillo estrella para compartir en WhatsApp.
• Blog: og:type="article", canonical en cada entrada, JSON-LD BlogPosting con autor y fecha.
• Tienda: JSON-LD Product con precio para aparecer con precio y disponibilidad en Google.
• Página de "gracias por tu compra": noindex.

Ejercicios

1. Escribe el <title> y la meta description de la página de servicios de un dentista en Puebla.
2. Escribe las etiquetas Open Graph y Twitter para un artículo de blog titulado "5 errores al elegir una cafetera".
3. Escribe el JSON-LD de tipo Dentist con nombre, teléfono, dirección y horario de lunes a viernes de 9:00 a 18:00.

Ver solución

<!-- Ejercicio 1 -->
<title>Limpieza dental y ortodoncia en Puebla | Clínica Sonrisa</title>
<meta name="description" content="Limpieza dental, blanqueamiento, ortodoncia e implantes en Puebla. Primera consulta sin costo. Agenda tu cita por WhatsApp.">

<!-- Ejercicio 2 -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://cafearoma.mx/blog/errores-elegir-cafetera">
<meta property="og:title" content="5 errores al elegir una cafetera">
<meta property="og:description" content="Evita gastar de más: lo que debes revisar antes de comprar tu cafetera.">
<meta property="og:image" content="https://cafearoma.mx/img/blog/cafeteras-og.jpg">
<meta property="og:locale" content="es_MX">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="5 errores al elegir una cafetera">
<meta name="twitter:image" content="https://cafearoma.mx/img/blog/cafeteras-og.jpg">
<link rel="canonical" href="https://cafearoma.mx/blog/errores-elegir-cafetera">

<!-- Ejercicio 3 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Dentist",
  "name": "Clínica Sonrisa",
  "telephone": "+52-222-123-4567",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Calle 5 de Mayo 210",
    "addressLocality": "Puebla",
    "addressRegion": "Puebla",
    "postalCode": "72000",
    "addressCountry": "MX"
  },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
    "opens": "09:00",
    "closes": "18:00"
  }]
}
</script>

Resumen

• <title> (50–60 caracteres) y meta description (140–160) únicos por página.
• Un <h1> claro, encabezados ordenados, HTML semántico y URLs limpias en minúsculas con guiones.
• Open Graph y Twitter cards controlan la vista previa al compartir; og:image de 1200×630 con URL absoluta.
• Favicon SVG + ICO, apple-touch-icon de 180×180 y un manifest con iconos de 192 y 512.
• canonical evita duplicados; robots controla la indexación (¡quita el noindex al lanzar!).
• JSON-LD con Schema.org habilita resultados enriquecidos; valídalo con las herramientas de Google.