Habilitação de Metadados Sociais

Corrija o compartilhamento social para que cada URL importante se expanda como um cartão rico em todas as plataformas.

Quando Usar

• Use quando links compartilhados mostrarem pré-visualizações ausentes, desatualizadas, cortadas ou incorretas em plataformas sociais e de chat.
• Use ao auditar a cobertura de Open Graph, cartão Twitter/X, URL de imagem, texto alternativo ou metadataBase em um aplicativo web.
• Use antes do lançamento quando cada página pública precisar de pré-visualizações ricas e previsíveis em LinkedIn, X, Facebook, WhatsApp, Slack, Discord e Telegram.

Por Que as Pré-visualizações Quebram

O Bloco de Metadados Padrão Ouro

Cada página compartilhável precisa de TODAS estas informações em HTML estático:

// Next.js App Router — lib/socialMetadata.js
export function buildSocialMetadata({
  title,
  description,
  path,          // '/blog/my-post'
  image,         // '/images/og/my-post.jpg' or full URL
  imageAlt,
  imageWidth = 1200,
  imageHeight = 630,
}) {
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'https://www.yourdomain.com';
  
  // Always produce an absolute URL
  const imageUrl = image?.startsWith('http') ? image : `${baseUrl}${image}`;
  const pageUrl  = `${baseUrl}${path}`;
  
  // Detect MIME type from extension
  const ext = imageUrl.split('.').pop().toLowerCase();
  const mimeMap = { jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png', webp: 'image/webp' };
  const imageType = mimeMap[ext] || 'image/jpeg';

  return {
    title,
    description,
    alternates: { canonical: pageUrl },
    openGraph: {
      title,
      description,
      url: pageUrl,
      type: 'website',  // use 'article' for blog posts
      images: [{
        url: imageUrl,
        secureUrl: imageUrl,   // explicit HTTPS version
        width: imageWidth,
        height: imageHeight,
        alt: imageAlt || title,
        type: imageType,
      }],
    },
    twitter: {
      card: 'summary_large_image',  // NOT 'summary' — that shows a tiny image
      title,
      description,
      images: [imageUrl],
    },
  };
}

Aplicando o Auxiliar

Página estática

// app/about/page.js
import { buildSocialMetadata } from '@/lib/socialMetadata';

export const metadata = buildSocialMetadata({
  title: 'About Us | My Site',
  description: 'Learn about our team and mission.',
  path: '/about',
  image: '/images/og/about.jpg',
  imageAlt: 'The My Site team',
});

Página dinâmica (postagem de blog, página de ferramenta)

// app/blog/[slug]/page.js
import { buildSocialMetadata } from '@/lib/socialMetadata';

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return buildSocialMetadata({
    title: `${post.title} | My Blog`,
    description: post.excerpt,
    path: `/blog/${params.slug}`,
    image: post.ogImage || '/images/og/default.jpg',
    imageAlt: post.title,
  });
}

Página inicial (app/layout.js ou app/page.js)

export const metadata = {
  metadataBase: new URL('https://www.yourdomain.com'), // REQUIRED for absolute URLs
  ...buildSocialMetadata({
    title: 'My Site — Tagline Here',
    description: 'Site-wide description.',
    path: '/',
    image: '/images/og/home.jpg',
  }),
};

⚠️ Defina metadataBase ao usar URLs de metadados relativos. Se seu auxiliar já gera URLs canônicas/OG absolutas, as pré-visualizações ainda podem funcionar sem ele.

Checklist de Imagens OG

Boas imagens OG:

• 1200 × 630px (proporção 2:1 — funciona em todas as plataformas)
• Menos de 8MB (limite do Facebook)
• Servidas via HTTPS
• Nome do arquivo sem espaços (use hifens)
• Formato: JPEG ou PNG (WebP funciona na maioria, mas não em todos os rastreadores)
• Acessível via GET sem autenticação

# Verify your OG image is reachable and correct size
curl -sI https://www.yourdomain.com/images/og/home.jpg | grep -i "content-type\|content-length\|status"

Notas Específicas da Plataforma

Facebook / Meta

• Armazena em cache agressivamente — use o Depurador de Compartilhamento para forçar o recrawl.
• Imagem mínima: 200×200px (mas use 1200×630 para qualidade)
• Necessita: og:title, og:description, og:image, og:url

…