Día 6: Landing Page y SEO

Tienes el producto funcionando en producción — ahora necesitas que los visitantes entiendan en 5 segundos qué hace, por qué lo necesitan y cómo empezar. La landing page es el vendedor que trabaja 24/7. Hoy la construyes con copy generado por Claude y componentes visuales de v0.dev, y la optimizas para que Google la encuentre.

Objetivo del día

Landing page publicada con hero, sección de features, testimonios (o placeholders), precios y CTA. Meta tags configurados para SEO básico. Puntuación de PageSpeed Insights superior a 80 en mobile.

Escribe el copy con Claude (no con tu intuición)

El error más común es escribir copy que describe el producto en lugar de copy que habla al usuario. Claude puede ayudarte a escribir copy centrado en el beneficio:

Producto: [nombre]. Problema que resuelve: [problema].
Cliente ideal: [descripción].
Propuesta de valor: [la que escribiste el Día 1].

Escríbeme el copy para una landing page SaaS con estas secciones:
1. Hero: titular (máximo 8 palabras), subtítulo (1-2 frases), CTA principal y secundario
2. Problema (2-3 oraciones que hagan al usuario sentir "eso me pasa a mí")
3. Solución (cómo el producto resuelve el problema, sin jerga técnica)
4. 3 features principales con título corto y descripción de 1 línea cada una
5. Sección de precio: [tu precio] con 5 bullet points del valor incluido
6. CTA final con urgencia o beneficio claro

Tono: directo, sin hipérboles, como si hablaras con un amigo que tiene el problema.

Itera el headline hasta que responda la pregunta: "¿Qué hace esto y para quién?" en menos de 3 segundos de lectura.

Construye la landing con v0.dev

Ve a v0.dev y usa el copy generado por Claude para construir la página:

Landing page para un SaaS llamado [nombre].
Hero section con este titular: "[tu titular]" y este subtítulo: "[tu subtítulo]".
CTA button: "[texto del botón]".
Diseño limpio y moderno, estilo Linear o Vercel, fondo blanco, tipografía sans-serif.
Incluye: hero, 3 feature cards con iconos, tabla de pricing con un plan destacado,
y sección de footer con links básicos.

Descarga el código generado, cópialo a app/(marketing)/page.tsx o app/page.tsx si no tienes rutas separadas. Ajusta los textos con los que generó Claude. v0.dev usa shadcn/ui y Tailwind, que ya tienes instalados.

Estructura de la landing que convierte

El orden importa. Esta secuencia está probada:

1. Navbar — logo, link a features, precios, botón de login/signup
2. Hero — titular, subtítulo, CTA principal, imagen o screenshot del producto
3. Social proof — logos de clientes, número de usuarios, o cita de un early adopter
4. Problema/Solución — haz que el usuario se identifique antes de presentar la solución
5. Features — 3 características clave con beneficio concreto (no "potente", sino "ahorra 3 horas/semana")
6. Precios — 1-2 planes simples, destaca el más popular
7. FAQ — 4-5 objeciones comunes respondidas
8. CTA final — repite la oferta con fricción reducida ("Prueba gratis 14 días, sin tarjeta")

SEO básico: meta tags y Open Graph

En app/layout.tsx, añade los meta tags esenciales. Pídele a Claude que los genere:

Genera el objeto metadata de Next.js 14 para esta landing page SaaS:
- Nombre del producto: [nombre]
- Descripción: [descripción de 155 caracteres máximo, incluyendo keyword principal]
- URL: [tu dominio]
- Imagen OG: [ruta a tu screenshot o imagen de hero, 1200x630px]

Incluye: title, description, openGraph completo, y twitterCard.

Crea un sitemap.xml dinámico en app/sitemap.ts:

export default function sitemap() {
  return [
    { url: 'https://tudominio.com', lastModified: new Date() },
    { url: 'https://tudominio.com/pricing', lastModified: new Date() },
  ];
}

Google Search Console: 5 minutos

1. Ve a search.google.com/search-console
2. Añade tu dominio como propiedad
3. Verifica la propiedad vía DNS o meta tag (Vercel lo hace fácil con el meta tag)
4. Envía el sitemap: https://tudominio.com/sitemap.xml

Google tarda días o semanas en indexar. Lo importante es tenerlo configurado hoy.

Velocidad de carga: los 3 cambios que más impactan

Prueba tu landing en pagespeed.web.dev. Si el score está por debajo de 80, aplica:

1. Imágenes en formato WebP o AVIF — usa next/image en lugar de <img>, Next.js optimiza automáticamente
2. Fuentes con font-display: swap — evita el texto invisible durante la carga
3. No cargues JS innecesario en la landing — los componentes puramente visuales deben ser 'use client' solo si tienen interactividad

Herramientas IA del día

• Claude — copy del hero, features, pricing, FAQ, meta tags, headline testing
• v0.dev — generación del layout y componentes visuales de la landing
• PageSpeed Insights — diagnóstico de velocidad y oportunidades de mejora

Checklist del día

• Headline responde "qué es y para quién" en menos de 3 segundos
• Copy completo generado con Claude (hero, features, pricing, FAQ)
• Landing construida con v0.dev y código integrado al proyecto
• Screenshot o imagen del producto en la sección hero
• Meta tags y Open Graph configurados en app/layout.tsx
• Sitemap.xml generado y accesible en /sitemap.xml
• Propiedad verificada en Google Search Console y sitemap enviado
• PageSpeed Insights: score mayor a 80 en mobile
• CTA principal lleva al flujo de registro correctamente