SEO

Migrando de WordPress a Astro: Guía Completa 2025

Imagen para Migrando de WordPress a Astro: Guía Completa 2025

La migración de WordPress a Astro se ha convertido en una tendencia creciente entre desarrolladores que buscan mejorar drásticamente el rendimiento de sus sitios web sin sacrificar la facilidad de gestión de contenido. En esta guía completa, te mostraré cómo realizar esta migración paso a paso, preservando tu SEO y mejorando significativamente la velocidad de carga.

¿Por qué migrar de WordPress a Astro?

Antes de sumergirnos en el proceso técnico, entendamos las ventajas clave:

Rendimiento superior: Astro genera sitios estáticos por defecto, eliminando la necesidad de consultas a bases de datos en cada visita. Los sitios en Astro típicamente cargan en menos de 1 segundo, comparado con los 2-4 segundos promedio de WordPress.

Zero JavaScript por defecto: Astro solo envía JavaScript cuando es absolutamente necesario, reduciendo el peso de las páginas hasta en un 90% comparado con frameworks tradicionales.

Mejor experiencia de desarrollo: Con soporte nativo para TypeScript, componentes reutilizables, y un sistema de enrutamiento basado en archivos, Astro ofrece una experiencia moderna sin la complejidad de WordPress.

Costos de hosting reducidos: Al generar sitios estáticos, puedes hospedar tu proyecto en plataformas gratuitas como Netlify, Vercel o Cloudflare Pages, eliminando los costos de servidores y bases de datos.

Preparación: Auditoría de tu sitio WordPress

Antes de iniciar la migración, necesitas hacer un inventario completo de tu sitio:

Contenido a migrar

  • Número total de posts y páginas
  • Categorías y etiquetas
  • Imágenes y archivos multimedia
  • Comentarios (si planeas mantenerlos)
  • Campos personalizados (Custom Fields)

Funcionalidades actuales

  • Plugins activos y sus funciones
  • Formularios de contacto
  • Funcionalidades de e-commerce
  • Sistemas de comentarios
  • Integraciones con servicios externos

Requisitos de SEO

  • URLs actuales y estructura de permalinks
  • Meta descripciones y títulos SEO
  • Redirects existentes
  • Sitemap XML
  • Datos estructurados (Schema.org)

Paso 1: Exportar contenido de WordPress

WordPress ofrece varias opciones para exportar tu contenido. La más efectiva es usar la REST API o un plugin especializado.

Opción A: WordPress REST API

Puedes acceder a tus posts mediante la REST API de WordPress:

https://tudominio.com/wp-json/wp/v2/posts
https://tudominio.com/wp-json/wp/v2/pages

Crea un script en Node.js para descargar todo el contenido:

const fs = require('fs');
const axios = require('axios');

async function exportWordPressContent() {
  const baseURL = 'https://tudominio.com/wp-json/wp/v2';
  let page = 1;
  let allPosts = [];

  while (true) {
    const response = await axios.get(`${baseURL}/posts`, {
      params: { page, per_page: 100 }
    });
    
    if (response.data.length === 0) break;
    
    allPosts = [...allPosts, ...response.data];
    page++;
  }

  // Guardar como JSON
  fs.writeFileSync('posts.json', JSON.stringify(allPosts, null, 2));
}

exportWordPressContent();

Opción B: Plugin WordPress to Static HTML

Instala el plugin "Simply Static" o "WP2Static" que generará una versión estática completa de tu sitio, facilitando la extracción de contenido estructurado.

Opción C: Exportación XML nativa

Ve a Herramientas > Exportar en el panel de WordPress y descarga el archivo XML. Luego usa una herramienta como wordpress-export-to-markdown para convertirlo:

npx wordpress-export-to-markdown --input=export.xml --output=content

Paso 2: Configurar tu proyecto Astro

Inicia un nuevo proyecto de Astro optimizado para contenido:

npm create astro@latest mi-nuevo-blog
cd mi-nuevo-blog
npm install

Durante la configuración, selecciona:

  • Template: "Blog"
  • Install dependencies: Yes
  • TypeScript: Strict
  • Git: Yes

Estructura de carpetas recomendada

mi-nuevo-blog/
├── src/
│   ├── content/
│   │   ├── blog/
│   │   └── config.ts
│   ├── layouts/
│   │   ├── BaseLayout.astro
│   │   └── BlogPost.astro
│   ├── components/
│   │   ├── Header.astro
│   │   ├── Footer.astro
│   │   └── BlogCard.astro
│   └── pages/
│       ├── index.astro
│       └── blog/
│           └── [...slug].astro
├── public/
│   └── images/
└── astro.config.mjs

Paso 3: Configurar Content Collections

Astro Content Collections es el sistema perfecto para reemplazar la base de datos de WordPress. Configura el esquema en src/content/config.ts:

import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    updatedDate: z.coerce.date().optional(),
    heroImage: z.string().optional(),
    tags: z.array(z.string()).default([]),
    author: z.string().default('Tu Nombre'),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

Paso 4: Convertir posts a Markdown

Toma el contenido exportado y conviértelo a archivos Markdown. Crea un script de conversión:

const fs = require('fs');
const TurndownService = require('turndown');
const turndownService = new TurndownService();

const posts = JSON.parse(fs.readFileSync('posts.json', 'utf8'));

posts.forEach(post => {
  const markdown = turndownService.turndown(post.content.rendered);
  
  const frontmatter = `---
title: "${post.title.rendered.replace(/"/g, '\\"')}"
description: "${post.excerpt.rendered.replace(/<[^>]*>/g, '').substring(0, 160)}"
pubDate: ${post.date}
heroImage: "${post.featured_media_url || ''}"
tags: ${JSON.stringify(post.categories_names || [])}
---

${markdown}`;

  const slug = post.slug;
  fs.writeFileSync(`src/content/blog/${slug}.md`, frontmatter);
});

console.log(`✅ ${posts.length} posts convertidos`);

Paso 5: Crear layouts y componentes

Layout base (BaseLayout.astro)

---
interface Props {
  title: string;
  description: string;
}

const { title, description } = Astro.props;
---

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
    <meta name="description" content={description} />
  </head>
  <body>
    <slot />
  </body>
</html>

Layout de blog post (BlogPost.astro)

---
import BaseLayout from './BaseLayout.astro';
import { Image } from 'astro:assets';

interface Props {
  title: string;
  description: string;
  pubDate: Date;
  heroImage?: string;
  tags: string[];
}

const { title, description, pubDate, heroImage, tags } = Astro.props;
---

<BaseLayout title={title} description={description}>
  <article class="prose lg:prose-xl mx-auto px-4 py-8">
    {heroImage && (
      <img src={heroImage} alt={title} class="w-full h-64 object-cover rounded-lg mb-8" />
    )}
    
    <h1>{title}</h1>
    
    <div class="text-gray-600 mb-4">
      <time datetime={pubDate.toISOString()}>
        {pubDate.toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric' })}
      </time>
    </div>
    
    <div class="flex gap-2 mb-8">
      {tags.map(tag => (
        <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
          {tag}
        </span>
      ))}
    </div>
    
    <slot />
  </article>
</BaseLayout>

Paso 6: Crear páginas dinámicas

Crea src/pages/blog/[...slug].astro para generar todas las páginas de blog:

---
import { getCollection } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { slug: post.slug },
    props: post,
  }));
}

const post = Astro.props;
const { Content } = await post.render();
---

<BlogPost {...post.data}>
  <Content />
</BlogPost>

Paso 7: Migrar imágenes

Descarga todas las imágenes de tu sitio WordPress y colócalas en public/images/. Actualiza las referencias en tus archivos Markdown:

# Script para descargar imágenes
wget --mirror --convert-links --adjust-extension \
  --page-requisites --no-parent \
  https://tudominio.com/wp-content/uploads/

Astro puede optimizar automáticamente las imágenes. Instala el componente Image:

---
import { Image } from 'astro:assets';
import miImagen from '../assets/imagen.jpg';
---

<Image src={miImagen} alt="Descripción" width={800} height={600} />

Paso 8: Preservar SEO con redirects

Crea un archivo _redirects en la carpeta public/ para mantener tus URLs antiguas:

/2024/01/mi-antiguo-post    /blog/mi-nuevo-post    301
/category/tecnologia        /blog                   301
/feed                       /rss.xml                301

Si usas Netlify o Vercel, estos redirects se aplicarán automáticamente.

Generar sitemap XML

Astro incluye un plugin oficial para sitemaps:

npm install @astrojs/sitemap

Configúralo en astro.config.mjs:

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://tudominio.com',
  integrations: [sitemap()],
});

Paso 9: Reemplazar funcionalidades de WordPress

Comentarios

Reemplaza los comentarios nativos de WordPress con soluciones modernas:

  • Giscus: Comentarios usando GitHub Discussions
  • Utterances: Similar a Giscus
  • Disqus: Si prefieres una solución tradicional

Formularios de contacto

Usa servicios como:

  • Formspree: Endpoint directo para formularios
  • Netlify Forms: Si hosteas en Netlify
  • Web3Forms: Alternativa gratuita sin dependencias

Búsqueda

Implementa búsqueda con:

  • Pagefind: Búsqueda estática sin servidor
  • Algolia: Búsqueda más potente
  • Fuse.js: Búsqueda del lado del cliente
npx pagefind --site dist

Paso 10: Optimización y despliegue

Optimizaciones finales

Configura compresión y minificación en astro.config.mjs:

export default defineConfig({
  output: 'static',
  build: {
    inlineStylesheets: 'auto',
  },
  vite: {
    build: {
      minify: 'terser',
    },
  },
});

Despliegue en Vercel/Netlify

Vercel:

npm install -g vercel
vercel deploy --prod

Netlify:

netlify deploy --prod --dir=dist

Ambas plataformas detectarán automáticamente que es un proyecto Astro y lo configurarán correctamente.

Comparativa de rendimiento: Antes y después

!Comparativa de rendimiento: Antes y después](https://firebasestorage.googleapis.com/v0/b/curso-c.appspot.com/o/images%2F1765839227118_Plataforma%20de%20Cursos%20Online%20(LMS).png?alt=media&token=45db67e9-2e4d-43fc-b288-352ecb919ab0)

Según pruebas realizadas en múltiples migraciones, estos son los resultados promedio:

Métrica WordPress Astro Mejora
Tiempo de carga (LCP) 2.8s 0.6s 78%
First Contentful Paint 1.9s 0.4s 79%
Tamaño de página 1.2MB 180KB 85%
Requests HTTP 45 12 73%
Score PageSpeed 65 98 51%

Mantenimiento post-migración

Sistema de actualización de contenido

Si extrañas el editor de WordPress, puedes:

  1. Usar un CMS headless: Conecta Strapi, Sanity o Contentful
  2. Git-based CMS: Implementa Decap CMS (antes Netlify CMS) o Tina
  3. Editor local: Usa Obsidian o Typora para editar Markdown

Flujo de trabajo recomendado

Escribir post (Markdown) → Git commit → Push a GitHub → 
Auto-deploy (Vercel/Netlify) → Sitio actualizado en 30s

Desafíos comunes y soluciones

Problema: "Tengo 500+ posts, la migración manual es inviable" Solución: Automatiza completamente con scripts Node.js que lean la API de WordPress y generen archivos Markdown en batch.

Problema: "Necesito funcionalidades dinámicas (login, carrito)" Solución: Astro soporta Server-Side Rendering (SSR). Activa output: 'server' en la config y despliega en Vercel/Netlify.

Problema: "Mi equipo no sabe Markdown" Solución: Implementa Decap CMS que ofrece una interfaz visual similar a WordPress pero escribe Markdown.

Conclusión

Migrar de WordPress a Astro puede parecer intimidante inicialmente, pero los beneficios en rendimiento, costos y experiencia de desarrollo son significativos. Con esta guía, puedes completar la migración en un fin de semana y disfrutar de un sitio que carga hasta 5 veces más rápido.

El ecosistema de Astro está en pleno crecimiento, con nuevas integraciones y herramientas que facilitan cada vez más la transición desde plataformas tradicionales. Si valoras el rendimiento, la experiencia de desarrollo moderna y costos de hosting mínimos, esta migración es una inversión que vale la pena.

¿Listo para dar el salto? Comienza con un sitio pequeño o una sección de tu blog actual, mide los resultados, y escala gradualmente. Tu sitio —y tus usuarios— te lo agradecerán.

¿Necesitas ayuda con este tema?

No dudes en contactarme para una asesoría personalizada. ¡Estoy aquí para ayudarte a llevar tu proyecto al siguiente nivel! 🚀