Cómo usar Claude Code: lo que aprendí arreglando 86 páginas
Claude CodeSEOWeb DevelopmentAi Tools
La IA puede construirte una web en una tarde.
Lo que no te dice es que esa web está rota por dentro. A menos que se lo preguntes bien.
La semana pasada me senté con Claude Code para "pulir" mi web personal, kevinmeneses.com. Unos logos, alguna animación, quizá una sección nueva. Al final del día tenía cuatro landing pages nuevas, un menú móvil que antes no existía y una lista de problemas que no sabía que tenía:
86 páginas que Google estaba excluyendo por rotas
una copia completa de mi web viviendo en www
cero contactos medidos en 90 días de analítica
Nada de eso se veía desde el navegador. Todo se veía en cuanto Claude se conectó a las herramientas adecuadas.
Search Console: 86 páginas excluidas por una etiqueta noindex, y subiendo cada semana.
Si estás:
aprendiendo cómo usar Claude Code en una web real,
haciendo una web para tu negocio o para clientes con IA,
o construyendo tu propio creador de webs con IA,
estas son las 11 buenas prácticas de Claude Code que más me importaron, ordenadas por importancia. No son trucos genéricos: son lecciones de una reconstrucción real. Cada una trae un prompt para copiar y una nota sobre lo que significa si te dedicas a crear software de webs.
El contexto (en un párrafo)
Mi web usa un stack muy habitual: Next.js para las páginas, Strapi como CMS del blog y Vercel como hosting. En una sola sesión, solo conversando, Claude Code y yo añadimos secciones animadas y logos de clientes, creamos cuatro páginas de servicio optimizadas para keywords en dos idiomas, un menú móvil, FAQs, y conectamos Google Search Console y Google Analytics para arreglar lo que mostraban.
Yo no escribí el código. Sí tomé todas las decisiones.
El nuevo hero de la home: órbita de servicios animada, construida y verificada en la misma sesión.
1. Dale contexto a Claude Code antes de darle trabajo
Lo primero que hizo Claude fue encontrar mi proyecto y leer un archivo llamado CLAUDE.md: notas en lenguaje normal sobre dónde está alojada la web, qué se rompe si lo tocas y cómo publico los artículos.
Ese archivo me ahorró horas. Claude sabía que el CMS se despliega a mano, que cada post en inglés necesita su traducción al español y qué arreglo antiguo no se puede deshacer nunca.
Artículos relacionados
Sin contexto, un asistente listo se convierte en un desconocido muy rápido.
Prueba este prompt:
"Lee este proyecto y escribe un CLAUDE.md que explique el stack, dónde está alojada cada parte, cómo arrancarlo en local y qué sería peligroso cambiar."
Si construyes software de webs: cada web generada debería incluir un archivo de contexto vivo. La próxima persona (o IA) que la toque lo va a necesitar.
2. "Hecho" no es "verificado": que lo pruebe en un navegador real
Claude construyó un menú móvil. El código estaba limpio y la compilación pasaba.
Luego abrió la página en un navegador real, pulsó el menú y vio el problema: el panel era transparente. Un efecto de desenfoque en la cabecera cambiaba cómo se posicionaba el panel, y los enlaces flotaban encima de la página sin fondo.
Ninguna comprobación automática detecta eso. Solo mirarlo.
Prueba este prompt:
"Después de cada cambio, abre la página en el navegador, úsala como lo haría un visitante, haz una captura y dime qué ves. No me digas que está hecho hasta haberlo comprobado."
Si construyes software de webs: la verificación visual debería ser una función del producto, no un hábito del usuario.
3. Revisa el móvil siempre
Dos fallos solo existían en el móvil: un botón de play que tapaba el texto en una sección animada y una cifra de facturación ("+25.000 €") que se partía en dos líneas y parecía rota.
En escritorio, los dos se veían perfectos. Los dos se arreglaron en dos minutos en cuanto alguien miró una pantalla pequeña.
Revisado a 390 píxeles de ancho: la home y la landing de LinkedIn ghostwriter.
Prueba este prompt:
"Revisa esta página a 375 píxeles de ancho. Busca cualquier cosa cortada, superpuesta, mal partida o que provoque scroll horizontal."
Si construyes software de webs: prueba por defecto la pantalla más pequeña habitual, antes de que tu usuario vea el resultado.
4. El texto, las cifras y los servicios los decides tú
La IA escribe textos muy seguros de sí mismos. A veces demasiado.
Al redactar mis páginas de servicio, Claude incluyó "secuencias de email de onboarding" como entregable. Sonaba bien. No lo vendo. A su favor: Claude marcó cada afirmación que había añadido por su cuenta y me pidió confirmarla. Quité lo que no ofrezco, añadí lo que no podía saber (tengo una newsletter en LinkedIn con más de 1.600 suscriptores) y dejé una misma cifra de facturación idéntica en toda la web.
Una web que promete cosas que no haces es un riesgo.
Prueba este prompt:
"Haz una lista de cada afirmación, cifra y servicio que hayas escrito y que no venga de mí, para que confirme o elimine cada uno."
Si construyes software de webs: marca las afirmaciones inventadas por la IA para revisión humana. Nunca las publiques en silencio.
5. Elige las keywords de cada página con datos, no con intuición
Mi intuición para la página de YouTube era la frase "YouTube content creation": unas 1.600 búsquedas al mes en EE. UU.
Entonces Claude sacó los resultados reales de Google. Quien busca esa frase son creadores aprendiendo a hacer vídeos. No empresas que quieren contratar a alguien.
En cambio, "LinkedIn ghostwriter" tiene unas 260 búsquedas al mes, casi nada de competencia, y los primeros resultados son justo el tipo de página que yo estaba haciendo. Renombré mi página de LinkedIn en inglés en torno a esa frase.
Poco volumen. Intención correcta.
La página renombrada en torno a "LinkedIn ghostwriter" después de mirar datos reales de búsqueda.
Prueba este prompt:
"Antes de crear esta página, mira el volumen de búsqueda, la dificultad y los resultados actuales de Google para estas 5 frases, y dime cuál usa de verdad mi cliente objetivo."
Si construyes software de webs: genera páginas a partir de la demanda y la intención de búsqueda, no solo de lo que el usuario escribió en el prompt.
6. Conecta Claude Code a tus herramientas reales con MCP
Esta es la parte que la mayoría aún no ha visto, así que va sin tecnicismos.
Claude Code se puede conectar a otros servicios mediante MCP (Model Context Protocol). Es a lo que se refiere la gente cuando habla de "servidores MCP de Claude Code". Piensa en cada conector como darle a Claude la llave de una de tus herramientas, con tu permiso. En mi sesión, esas llaves fueron:
OpenSEO: datos de keywords, además de mi Google Search Console y mi Google Analytics
Mi navegador: para abrir páginas, pulsar botones y ver lo que ve un visitante
Google Calendar: me creó un recordatorio de revisión para la semana siguiente
Una tarea programada: volverá a revisar mi SEO y mi analítica sola dentro de siete días
Sin conectores, Claude solo ve tu código. Con ellos, ve cómo Google ve tu web y cómo la usan los visitantes reales.
Todos los hallazgos importantes del resto del artículo salieron de ahí.
Prueba este prompt:
"Usando Search Console y Google Analytics, dime los tres mayores problemas de mi web ahora mismo, en lenguaje sencillo, y qué me está costando cada uno."
Si construyes software de webs: las integraciones son la ventaja competitiva. Un creador de webs que lee los datos de búsqueda y analítica de su propia web ganará a uno que solo genera páginas.
7. Mide contactos, no solo visitas
Este es el hallazgo que cambió cómo veo mi web.
Google Analytics llevaba tres meses funcionando. Contaba visitas, páginas y países. En todo ese tiempo registró cero solicitudes de contacto.
No porque nadie me contactara. Porque la web nunca le avisaba a Analytics cuando alguien lo hacía.
Dicho como en una tienda: Analytics sabía que la gente entraba. No tenía ni idea de que alguien pidiera presupuesto.
Así que añadimos una pequeña señal para cada acción que importa al negocio: enviar el formulario de contacto, pulsar mi email, pulsar "Solicitar propuesta" (con el paquete de precio), pulsar un enlace de afiliado y abrir una pregunta de las FAQs. Después marqué "formulario enviado" y "clic en el email" como eventos clave en Google Analytics. Ahora cada informe responde a la única pregunta que importa: ¿qué página me trae clientes?
Google Analytics en tiempo real: el primer clic en el email registrado como evento clave.
Un detalle que casi todo el mundo pasa por alto: tus propias visitas inflan los números. En mi web, entrar una vez en cualquier página con ?notrack=1 le dice a ese navegador que deje de contarme.
Prueba este prompt:
"Asegúrate de que Google Analytics registra cuando alguien envía el formulario de contacto o pulsa mi email, y dame una forma de excluir mis propias visitas."
Si construyes software de webs: la medición de conversiones debería venir activada por defecto. Una web que no puede enseñar a su dueño de dónde vienen los contactos acabará sustituida por una que sí pueda.
8. Un solo dominio y redirecciones permanentes
Search Console es el boletín de notas gratuito que Google hace de tu web. Claude leyó el mío y encontró dos problemas silenciosos:
Las direcciones antiguas de los artículos redirigían de forma "temporal". Google seguía tratando la dirección antigua como la buena y repartía mi posicionamiento entre dos versiones del mismo artículo. Una redirección permanente le dice a Google que lo junte todo.
www.kevinmeneses.com era una copia completa de mi web. En vez de mandar a los visitantes a la dirección principal, lo servía todo dos veces.
Los dos se arreglaron con un pequeño cambio de configuración. Los dos llevaban meses costándome.
Puedes revisar tu propia web con unas líneas de Python:
import requests
URLS = [
"https://www.kevinmeneses.com/es",
"https://kevinmeneses.com/articles/5-skills-de-claude-code-para-trading-algoritmico",
]
for url in URLS:
r = requests.get(url, allow_redirects=False, timeout=10)
print(r.status_code, url, "->", r.headers.get("Location", ""))
308 significa permanente. 307 es la redirección temporal que debes evitar en páginas que se han movido para siempre.
Prueba este prompt:
"Comprueba si mi dominio con www y sin www sirven los dos la web, y si las URLs antiguas usan redirecciones permanentes (308) o temporales (307)."
Si construyes software de webs: un único dominio canónico y redirecciones permanentes deberían ser lo predeterminado, no un ajuste escondido tres menús más abajo.
9. Prueba el cambio de idioma en páginas internas
Esta fue la que más me sorprendió.
Search Console tenía 86 páginas excluidas de Google. No eran páginas reales. Eran direcciones que nunca deberían existir: una URL en inglés con el nombre de un artículo en español.
La culpa era del botón de idioma. Cuando alguien en un artículo en español pulsaba "EN", se conservaba el nombre del artículo en español y solo cambiaba el idioma. El lector caía en una página vacía de "no encontrado", y Google apuntaba otra URL rota cada vez.
Las URLs rotas: rutas en inglés con nombres de artículos en español, y al revés.
Ahora, cuando alguien pide un artículo en el idioma equivocado, la web busca la traducción y le lleva a ella.
Prueba este prompt:
"Abre un artículo, cambia de idioma con el botón de la propia web y dime dónde acabo. Haz lo mismo con cada tipo de página."
Si construyes software de webs: si generas webs multidioma, prueba el cambio de idioma en páginas internas. Ahí se esconden los fallos.
10. Prueba la versión de producción y sospecha de la caché
En un momento, una animación nueva simplemente no aparecía. El código estaba bien. Una prueba aislada de los estilos funcionaba.
El servidor de desarrollo estaba sirviendo una hoja de estilos antigua guardada en caché. Borrar la caché lo arregló al instante. Lo mismo pasó con las imágenes: al cambiar tres logos de clientes que se veían borrosos, los navegadores seguían mostrando los viejos hasta que los archivos tuvieron nombres nuevos.
Por eso, antes de cada publicación, Claude compilaba la versión de producción completa y la probaba en local. Hay comportamientos que solo existen en producción.
Prueba este prompt:
"Antes de publicar, compila la versión de producción, arráncala en local y prueba las páginas que hemos cambiado. Si algo parece desactualizado, borra la caché antes de depurar el código."
Si construyes software de webs: invalidar la caché sigue siendo uno de los problemas más difíciles del software. Haz que tus usuarios no lo noten.
11. Primero revisa, después publica
Claude nunca publicó nada por su cuenta. Cada cambio se construía, se probaba y me lo enseñaba primero. Solo cuando yo decía "súbelo", hacía el commit, lo desplegaba y después revisaba la web en vivo para confirmar que el cambio estaba ahí.
Ese ritmo me dejó cambiar de rumbo sin riesgo. Quité una sección de GitHub que no me convencía, reenfoqué una sección entera en los problemas de los founders y moví un vídeo, todo antes de que ningún visitante viera las versiones anteriores.
La sección que reenfoqué en los problemas de los founders antes de publicar.
Prueba este prompt:
"No publiques nada hasta que yo lo apruebe. Cuando lo haga, despliégalo y luego revisa la web en vivo para confirmar que el cambio está."
Si construyes software de webs: una vista previa, una aprobación explícita y una comprobación después de publicar son lo que hace que la gente confíe en la IA para una web en producción.
Cómo usar Claude Code bien: lo esencial
Claude Code es rapidísimo construyendo. Su valor real aparece cuando le pides que verifique: en el navegador, en el móvil y en producción.
Conectarlo a Search Console, Analytics y datos de keywords convirtió una sesión de diseño en una auditoría de negocio. Ahí estaban los problemas caros.
Las decisiones siguen siendo tuyas: qué vendes, qué prometes y qué publicas.
Preguntas frecuentes
❓ ¿Claude Code puede crear y editar una web?
✅ Sí. Claude Code puede crear páginas, componentes y estilos en un proyecto real, arrancar la web en local y probarla en un navegador. Funciona mejor en un proyecto existente con un contexto claro sobre cómo está construida y desplegada la web.
❓ ¿Cómo se usa Claude Code si no eres desarrollador?
✅ Para dirigirlo no hace falta programar. Yo describía los cambios en lenguaje normal y revisaba los resultados visualmente. Saber lo básico ayuda a valorar las decisiones y a detectar respuestas que suenan bien pero no son lo que quieres.
❓ ¿Claude Code sirve para SEO?
✅ Sí, sobre todo conectado a datos reales. Con Search Console y herramientas de keywords encontró problemas de redirecciones, un dominio duplicado y páginas rotas, y eligió las keywords de cada página según el volumen y la intención de búsqueda reales.
❓ ¿Qué son los conectores (MCP) de Claude Code?
✅ Los conectores usan el Model Context Protocol para dar a Claude acceso a las herramientas que tú apruebes, como Google Search Console, Google Analytics, tu calendario o tu navegador. Así trabaja con datos reales de tu negocio en lugar de suponer.
Reflexión final
Los creadores de webs con IA hicieron fácil crear una web.
Los siguientes harán fácil mantenerla bien: verificada en cada pantalla, visible para Google y honesta sobre lo que vende y lo que gana.
Ese es el producto que yo querría usar. Y la historia que querría contar.
¿Estás construyendo un creador de webs con IA o una plataforma no-code?
Escribo contenido técnico que enseña a desarrolladores y founders lo que tu producto hace de verdad, desde tutoriales prácticos hasta casos reales como este.
→Trabaja conmigo
Search Console: 86 páginas excluidas por una etiqueta noindex, y subiendo cada semana.
El nuevo hero de la home: órbita de servicios animada, construida y verificada en la misma sesión.
Revisado a 390 píxeles de ancho: la home y la landing de LinkedIn ghostwriter.
La página renombrada en torno a "LinkedIn ghostwriter" después de mirar datos reales de búsqueda.
Google Analytics en tiempo real: el primer clic en el email registrado como evento clave.
Las URLs rotas: rutas en inglés con nombres de artículos en español, y al revés.
La sección que reenfoqué en los problemas de los founders antes de publicar.