Cachea imágenes IPFS a una CDN rápida para OpenGraph y crawlers SEO

Paso 1: Elige una CDN: Cloudflare R2, Cloudinary o Vercel

Cloudflare R2: tier gratis (10GB storage), API compatible con S3, CDN global rápida. Mejor para alto volumen. Cloudinary: tier gratis (25k transformaciones/mes), transformaciones de imagen integradas. Mejor si necesitas redimensionado on-the-fly. Vercel Image Optimization: incluido con hosting Vercel, conversión automática a WebP. Mejor si ya estás en Vercel. Para la mayoría de proyectos NFT, elige Cloudflare R2.

Paso 2: Configura el bucket del CDN y el acceso

Crea un bucket R2 con acceso público de lectura habilitado. Configura un dominio personalizado (ej., cdn.example.com) apuntando a él. Genera credenciales API para acceso de escritura. Documenta las credenciales de forma segura; las necesitarás para el pipeline de upload.

# Cloudflare R2 setup via wrangler CLI
wrangler r2 bucket create my-og-cache
# Then in dashboard: enable public access, add custom domain

Paso 3: Construye un script de carga que traiga de IPFS y guarde en el CDN

Para cada activo hosteado en IPFS que necesita estar en og:image, trae de la gateway IPFS, redimensiona a 1200x630, sube a CDN. Corre en el minteo de colección, publicación de página o como backfill por lotes para páginas existentes.

const sharp = require('sharp');
const { S3Client, PutObjectCommand } = require('@aws-sdk/client-s3');

async function cacheIpfsToOg(ipfsHash, slug) {
  // Fetch from IPFS via reliable pinning service
  const response = await fetch(`https://gateway.pinata.cloud/ipfs/${ipfsHash}`);
  const buffer = await response.arrayBuffer();

  // Resize to 1200x630
  const resized = await sharp(Buffer.from(buffer))
    .resize(1200, 630, { fit: 'cover' })
    .png()
    .toBuffer();

  // Upload to R2
  const s3 = new S3Client({
    region: 'auto',
    endpoint: 'https://accountid.r2.cloudflarestorage.com',
    credentials: { accessKeyId: process.env.R2_ACCESS, secretAccessKey: process.env.R2_SECRET }
  });

  await s3.send(new PutObjectCommand({
    Bucket: 'my-og-cache',
    Key: `og/${slug}.png`,
    Body: resized,
    ContentType: 'image/png',
    CacheControl: 'public, max-age=31536000',
  }));

  return `https://cdn.example.com/og/${slug}.png`;
}

Paso 4: Actualiza las meta tags og:image para apuntar a la URL del CDN

Reemplaza las URLs de gateway IPFS en og:image, twitter:image y el ImageObject de structured data con URLs de CDN. Mantén las referencias de hash IPFS en tus contratos y metadata on-chain; esas se quedan para permanencia.

<meta property="og:image" content="https://cdn.example.com/og/nft-collection-1.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="twitter:image" content="https://cdn.example.com/og/nft-collection-1.png">

Paso 5: Configura headers de caché agresivos

Configura Cache-Control: public, max-age=31536000, immutable para las imágenes cacheadas. Como estás usando rutas CDN direccionadas por contenido (el slug típicamente incluye un hash), las imágenes nunca necesitan ser invalidadas. Los navegadores y CDNs cachean para siempre.

Cache-Control: public, max-age=31536000, immutable

Paso 6: Prueba con validadores de plataformas sociales

Twitter Card Validator (cards-dev.twitter.com/validator), LinkedIn Post Inspector (linkedin.com/post-inspector), Facebook Sharing Debugger (developers.facebook.com/tools/debug). Los tres deberían traer og:image exitosamente en 1-2 segundos. Si alguno timeoutea, tu setup de CDN necesita investigación.

Paso 7: Monitorea la tasa de aciertos de la caché del CDN

Cloudflare Analytics o el dashboard de tu CDN muestra la tasa de hit del cache. Apunta a 95%+. Las tasas de hit más bajas indican o un TTL demasiado bajo o demasiadas URLs únicas. Optimiza extendiendo el TTL o consolidando variantes de imagen.

Error común

Olvidar og:image:width y og:image:height

Twitter y LinkedIn usan estos para decisiones de layout. Sin ellos, las imágenes pueden saltarse o renderizarse incorrectamente. Siempre configura ambos a 1200 y 630.

Error común

Usar URL de gateway IPFS para og:image directamente

Incluso si IPFS resulta ser rápido para un fetch, no es confiable a través de crawlers. Siempre cachea a CDN antes de referenciar en og:image.

Error común

Gateways IPFS públicas en lugar de servicio de pinning

Las gateways públicas (ipfs.io, cf-ipfs.com) están fuertemente rate-limited y no son confiables. Usa Pinata, Filebase o tu propia gateway para el fetch de fuente en tu script de caching.

Error común

Formato de imagen y Content-Type desajustados

Servir un JPEG con Content-Type image/png rompe algunos crawlers. Siempre coincide la extensión de archivo y Content-Type. Usa sharp para convertir a un formato conocido consistentemente.

Error común

Omitir el monitoreo de la tasa de aciertos de la caché

Si la tasa de hit es baja, tu CDN está haciendo peticiones extra al origen. Eso es más lento y cuesta más. Monitorea y ajusta.

Playbooks relacionados

• Lazy-load wallet SDK
• Construir directorio de ecosistema
• Migrar Article a FinancialProduct

Guías pilares

• Guía SEO Técnico Web3
• Nft Seo Guide
• Guía SEO Crypto

Módulos de auditoría

• Technical Seo
• Auditoría de Schema de Token