Faça cache de imagens IPFS para uma CDN rápida para OpenGraph e crawlers SEO

Passo 1: Escolha uma CDN: Cloudflare R2, Cloudinary ou Vercel

Cloudflare R2: tier grátis (10GB storage), API compatível com S3, CDN global rápida. Melhor para alto volume. Cloudinary: tier grátis (25k transformações/mês), transformações de imagem integradas. Melhor se você precisa de redimensionamento on-the-fly. Vercel Image Optimization: incluído com hosting Vercel, conversão automática para WebP. Melhor se você já está no Vercel. Para a maioria dos projetos NFT, escolha Cloudflare R2.

Passo 2: Configure o bucket de CDN e configure acesso

Crie um bucket R2 com acesso público de leitura habilitado. Configure um domínio personalizado (ex., cdn.example.com) apontando para ele. Gere credenciais API para acesso de escrita. Documente as credenciais de forma segura; você vai precisar delas para o 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

Passo 3: Construa um script de upload que traz de IPFS e salva no CDN

Para cada ativo hospedado em IPFS que precisa estar em og:image, traz do gateway IPFS, redimensiona para 1200x630, sobe para CDN. Rode no minteo de coleção, publicação de página ou 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`;
}

Passo 4: Atualize as meta tags og:image para apontar para a URL do CDN

Substitua as URLs de gateway IPFS em og:image, twitter:image e o ImageObject de structured data por URLs de CDN. Mantenha as referências de hash IPFS nos seus contratos e metadata on-chain; essas ficam para permanência.

<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">

Passo 5: Configure headers de cache agressivos

Configure Cache-Control: public, max-age=31536000, immutable para as imagens cacheadas. Como você está usando rotas CDN endereçadas por conteúdo (o slug tipicamente inclui um hash), as imagens nunca precisam ser invalidadas. Os navegadores e CDNs fazem cache para sempre.

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

Passo 6: Teste com validadores de plataformas sociais

Twitter Card Validator (cards-dev.twitter.com/validator), LinkedIn Post Inspector (linkedin.com/post-inspector), Facebook Sharing Debugger (developers.facebook.com/tools/debug). Os três devem trazer og:image com sucesso em 1-2 segundos. Se algum der timeout, seu setup de CDN precisa de investigação.

Passo 7: Monitore a taxa de hit do cache CDN

Cloudflare Analytics ou o dashboard do seu CDN mostra a taxa de hit do cache. Mire em 95%+. As taxas de hit mais baixas indicam ou um TTL baixo demais ou muitas URLs únicas. Otimize estendendo o TTL ou consolidando variantes de imagem.

Pitfall

Esquecer og:image:width e og:image:height

Twitter e LinkedIn usam esses para decisões de layout. Sem eles, as imagens podem ser puladas ou renderizadas incorretamente. Sempre configure os dois para 1200 e 630.

Pitfall

Usar URL de gateway IPFS para og:image directamente

Mesmo se o IPFS acaba sendo rápido para um fetch, não é confiável através de crawlers. Sempre faça cache para CDN antes de referenciar em og:image.

Pitfall

Gateways IPFS públicas en lugar de servicio de pinning

Os gateways públicos (ipfs.io, cf-ipfs.com) estão fortemente rate-limited e não são confiáveis. Use Pinata, Filebase ou seu próprio gateway para o fetch de fonte no seu script de caching.

Pitfall

Formato de imagem e Content-Type desajustados

Servir um JPEG com Content-Type image/png quebra alguns crawlers. Sempre faça a extensão de arquivo e o Content-Type coincidirem. Use sharp para converter para um formato conhecido consistentemente.

Pitfall

Pular o monitoramento de taxa de hit do cache

Se a taxa de hit é baixa, seu CDN está fazendo requisições extra ao origem. Isso é mais lento e custa mais. Monitore e ajuste.

Playbooks relacionados

• Lazy-load wallet SDK
• Construir diretório de ecossistema
• Migrar Article para FinancialProduct

Guias pilares

• Guia SEO Técnico Web3
• Nft Seo Guide
• Guia SEO Crypto

Módulos de auditoria

• Technical Seo
• Auditoria de Schema de Token