SEO para desarrolladores web: lo que todo dev debe saber - Pablo Alcalde

Por qué el SEO es responsabilidad del desarrollador

Existe un malentendido extendido que sitúa el SEO exclusivamente en el ámbito del marketing o el contenido. En realidad, muchas de las decisiones técnicas que toma un desarrollador web tienen un impacto directo y a veces enorme en el posicionamiento de un sitio.

Cómo se renderiza la aplicación, cómo se generan las meta tags, si el sitemap se actualiza automáticamente, qué tan rápido responde el servidor, si las imágenes se cargan con las optimizaciones adecuadas o cómo se implementan los datos estructurados: todo esto es territorio del desarrollador.

El desarrollador que entiende SEO tiene una ventaja competitiva real. Puede construir aplicaciones que estén preparadas para el posicionamiento desde el primer commit, en lugar de tener que solucionar problemas técnicos de SEO costosos meses después del lanzamiento.

Renderizado: el factor que más confunde a los devs

Uno de los temas donde más errores SEO comete la comunidad de desarrollo es el del renderizado. La forma en que una aplicación web renderiza su contenido tiene un impacto crítico en cómo Google puede leerla e indexarla.

CSR (Client-Side Rendering) y su impacto en el SEO

En una SPA (Single Page Application) con renderizado en el cliente (React, Vue, Angular sin SSR), el servidor envía un HTML prácticamente vacío con un archivo JavaScript que, al ejecutarse en el navegador, genera el contenido dinámicamente.

El problema: cuando Googlebot visita la página, recibe ese HTML vacío. Aunque Google puede renderizar JavaScript, lo hace en una segunda ola de indexación que puede tardar días o semanas. El contenido de las SPAs con CSR puro tiene retrasos en la indexación y puede posicionar peor que el contenido estático equivalente.

Síntomas de problemas de indexación por CSR:

En Search Console aparecen URLs como “Descubiertas, actualmente no indexadas”
Al hacer site:tudominio.com aparecen pocas URLs
El operador de caché de Google muestra páginas vacías o con contenido parcial

SSR (Server-Side Rendering): la solución más robusta para SEO

Con SSR, el servidor genera el HTML completo de cada página antes de enviarlo al navegador. Cuando Googlebot visita la URL, recibe directamente el HTML con todo el contenido legible. No hay espera de JavaScript.

Frameworks que facilitan SSR:

Next.js (React): getServerSideProps para SSR por petición, getStaticProps para pre-renderizado estático
Nuxt (Vue): modo universal con SSR automático
Astro: genera HTML estático por defecto con hidratación parcial opcional
SvelteKit: SSR nativo con flexibilidad para elegir el modo de renderizado por ruta

SSG (Static Site Generation): la opción ideal para la mayoría de sitios de contenido

El SSG pre-renderiza todas las páginas en tiempo de build y las sirve como HTML estático. Es la opción con mejor rendimiento y compatibilidad con SEO para blogs, portafolios, documentación y sitios de contenido que no cambia con cada petición.

Ventajas del SSG para SEO:

HTML completo disponible inmediatamente para Googlebot
TTFB ultrarrápido (se sirven archivos estáticos desde CDN)
Sin dependencia de JavaScript para mostrar el contenido
Fácil de implementar sitemaps automáticos

Cuándo no es suficiente el SSG: páginas con contenido muy dinámico que cambia en tiempo real (precios en tiempo real, inventario, feeds sociales personalizados).

ISR (Incremental Static Regeneration)

ISR, popularizado por Next.js, combina lo mejor del SSG y SSR: las páginas se pre-renderizan estáticamente pero pueden regenerarse en background cada cierto tiempo (o bajo demanda) sin necesidad de un rebuild completo. Es ideal para sitios con mucho contenido que se actualiza periódicamente.

Lazy Loading: cuándo usarlo y cuándo no

El lazy loading difiere la carga de imágenes y otros recursos hasta que están a punto de entrar en el viewport del usuario. Es una técnica de optimización de rendimiento, pero mal aplicada puede perjudicar el SEO.

Cuándo usar lazy loading:

<!-- Imágenes below-the-fold: correcto -->
<img src="foto.jpg" alt="descripción" loading="lazy" width="800" height="500">

Cuándo NO usar lazy loading:

El error más común es aplicar lazy loading a la imagen hero o al elemento LCP. Si la imagen principal de la página se carga con lazy loading, el LCP se dispara porque el navegador espera hasta que el usuario está a punto de verla para empezar a descargarla. Para imágenes above-the-fold, el atributo correcto es fetchpriority="high":

<!-- Imagen hero / LCP: NO lazy loading -->
<img src="hero.webp" alt="imagen principal" fetchpriority="high" width="1200" height="600">

Regla general: aplica loading="lazy" a todo, luego excluye específicamente las imágenes críticas del viewport inicial.

Preload y Prefetch: optimización proactiva de recursos

Preload

El atributo rel="preload" en una etiqueta <link> indica al navegador que descargue ese recurso con alta prioridad, incluso antes de que sea descubierto en el CSS o el HTML:

<!-- Precarga la fuente principal -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

<!-- Precarga la imagen LCP -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

Usa preload solo para recursos críticos del primer render. El uso excesivo contrarresta sus beneficios al saturar el ancho de banda inicial.

Prefetch

El rel="prefetch" indica al navegador que descargue un recurso con baja prioridad porque probablemente lo necesitará en la siguiente navegación:

<!-- Precarga el siguiente artículo que el usuario puede visitar -->
<link rel="prefetch" href="/blog/siguiente-articulo">

Frameworks modernos como Next.js y Astro implementan prefetch automáticamente en los enlaces visibles en el viewport.

Structured Data con JSON-LD

Los datos estructurados son fundamentales para los rich snippets y para que Google entienda el tipo de contenido de cada página. Como desarrollador, lo más eficiente es implementarlos de forma dinámica a partir de los datos del contenido.

Implementación en Astro

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

const articleSchema = {
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": title,
  "description": description,
  "author": {
    "@type": "Person",
    "name": author
  },
  "datePublished": pubDate.toISOString(),
  "dateModified": pubDate.toISOString()
};
---

<script type="application/ld+json" set:html={JSON.stringify(articleSchema)} />

Implementación en Nuxt

<script setup>
useSchemaOrg([
  defineArticle({
    headline: title,
    description: description,
    datePublished: pubDate,
    author: [{ name: 'Pablo Alcalde García' }]
  })
])
</script>

Nuxt Schema.org (a través de nuxt-schema-org) simplifica enormemente la implementación y garantiza que los datos estén correctamente vinculados entre sí.

Generación de Sitemaps

El sitemap debe generarse automáticamente a partir del contenido real del sitio para evitar que quede desactualizado.

Sitemap en Astro

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

export default defineConfig({
  site: 'https://tudominio.com',
  integrations: [
    sitemap({
      changefreq: 'weekly',
      priority: 0.7,
      lastmod: new Date(),
    })
  ]
});

La integración oficial @astrojs/sitemap genera automáticamente el sitemap en cada build.

Sitemap en Next.js

// next-sitemap.config.js
module.exports = {
  siteUrl: 'https://tudominio.com',
  generateRobotsTxt: true,
  exclude: ['/admin', '/privado'],
  changefreq: 'weekly',
  priority: 0.7,
}

robots.txt: configuración básica

El archivo robots.txt debe estar accesible en la raíz del dominio y configurado para no bloquear recursos necesarios para el renderizado.

En Astro, puedes crear el archivo en /public/robots.txt. En Next.js, a partir de la versión 13.3 puedes definirlo en /app/robots.ts:

// app/robots.ts (Next.js 13+)
import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/admin/', '/api/'],
    },
    sitemap: 'https://tudominio.com/sitemap.xml',
  }
}

Meta Tags dinámicos

Las meta tags de cada página deben generarse dinámicamente a partir del contenido. Nunca dejes todas las páginas con las mismas meta tags genéricas.

Meta tags en Astro

---
// src/layouts/Layout.astro
const { title, description, image } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---

<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <link rel="canonical" href={canonicalURL} />
  
  <!-- Open Graph -->
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
  <meta property="og:url" content={canonicalURL} />
  
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={title} />
  <meta name="twitter:description" content={description} />
</head>

Por qué Astro y Nuxt son especialmente buenos para SEO

Astro es el framework con mejor SEO por defecto en el ecosistema JavaScript en 2025. Por defecto genera HTML estático puro sin JavaScript en el cliente (zero JS by default). El rendimiento es excepcional y la arquitectura de islas permite añadir interactividad solo donde es necesario. La integración con colecciones de contenido, el sitemap automático y el componente <Image> con optimización automática hacen que el setup SEO sea muy sencillo.

Nuxt (Vue) destaca por su soporte SSR/SSG/ISR totalmente configurable por ruta, su módulo @nuxtjs/seo que centraliza toda la configuración SEO y su ecosistema maduro. nuxt-schema-org, nuxt-og-image y nuxt-robots son módulos de primera calidad que eliminan la mayor parte del trabajo manual.

Como desarrollador, elegir el framework correcto para el tipo de proyecto puede marcar una diferencia enorme en el esfuerzo de optimización SEO. Para sitios de contenido, Astro es hoy la mejor opción. Para aplicaciones más dinámicas con necesidades SSR, Next.js o Nuxt son elecciones sólidas con excelente soporte SEO.