Gerador de Meta Tags – Open Graph, Twitter Cards e metadata do Next.js
Preencha title, description e imagem e copie o <head> pronto com Open Graph e Twitter Cards, ou o metadata do Next.js, com prévia do link no WhatsApp.
Quer conferir as tags de uma página que já está no ar? Analise uma página publicada.
Sem og:image o link compartilhado aparece sem imagem — ou com uma qualquer da página.
Prévia do compartilhamento
Conversor de Bytes – KB, MB, GB e KiB sem confusão
Converta entre bytes, KB, MB, GB e as unidades binárias KiB, MiB e GiB, e entenda por que o HD de 1 TB aparece com 931 GB.
exemplo.com.br
https://exemplo.com.br/conversor-de-bytes
Aproximação do layout de cada rede. Elas guardam o cartão em cache: depois de mudar as tags, use o Post Inspector do LinkedIn ou o depurador de compartilhamento da Meta para atualizar.
<meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Conversor de Bytes – KB, MB, GB e KiB sem confusão</title> <meta name="description" content="Converta entre bytes, KB, MB, GB e as unidades binárias KiB, MiB e GiB, e entenda por que o HD de 1 TB aparece com 931 GB." /> <meta name="robots" content="index, follow" /> <meta name="theme-color" content="#7c3aed" /> <link rel="canonical" href="https://exemplo.com.br/conversor-de-bytes" /> <!-- Open Graph --> <meta property="og:type" content="website" /> <meta property="og:site_name" content="Exemplo" /> <meta property="og:locale" content="pt_BR" /> <meta property="og:title" content="Conversor de Bytes – KB, MB, GB e KiB sem confusão" /> <meta property="og:description" content="Converta entre bytes, KB, MB, GB e as unidades binárias KiB, MiB e GiB, e entenda por que o HD de 1 TB aparece com 931 GB." /> <meta property="og:url" content="https://exemplo.com.br/conversor-de-bytes" /> <!-- Twitter / X --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Conversor de Bytes – KB, MB, GB e KiB sem confusão" /> <meta name="twitter:description" content="Converta entre bytes, KB, MB, GB e as unidades binárias KiB, MiB e GiB, e entenda por que o HD de 1 TB aparece com 931 GB." />
Como usar esta ferramenta
- Escreva o title e a description acompanhando os contadores de caracteres
- Informe a URL canônica e a imagem OG com endereço completo (https://)
- Ajuste tipo, locale, @ do X, theme-color e robots conforme a página
- Confira a prévia no WhatsApp, LinkedIn e X e copie o HTML ou o metadata do Next.js
Sobre esta ferramenta
O que é
Meta tags são as instruções no <head> que dizem ao Google e às redes como apresentar a página. O title e a description aparecem no resultado de busca; as tags og: (Open Graph) definem o cartão que surge quando o link é colado no WhatsApp, LinkedIn ou Facebook; as twitter: fazem o mesmo no X. Sem elas, cada plataforma escolhe um texto e uma imagem por conta própria.
Quando usar
- Preparar o <head> de uma página nova antes de publicar
- Descobrir por que o link compartilhado no WhatsApp aparece sem imagem
- Escrever o metadata de um layout ou page do Next.js App Router
- Padronizar as tags de Open Graph e Twitter de um site inteiro
Segurança
Processamento 100% no navegador. Nenhum dado é enviado ao servidor — seus dados sensíveis permanecem no seu dispositivo.
Perguntas frequentes
- Por que o link aparece sem imagem no WhatsApp?
- Quase sempre porque a og:image usa caminho relativo (/og.png) — as redes não resolvem o endereço a partir da página, precisam da URL completa com https://. Outras causas: imagem pesada (o WhatsApp costuma ignorar as que passam de ~300 KB), servidor bloqueando robôs e cache. O WhatsApp guarda o cartão por dias, então teste com um parâmetro novo na URL (?v=2).
- Qual o tamanho ideal da imagem OG?
- 1200×630 pixels, proporção 1.91:1 — é o formato que WhatsApp, LinkedIn, Facebook e o cartão grande do X exibem sem cortar. Mantenha texto importante longe das bordas, porque o X arredonda os cantos e o WhatsApp pode mostrar a imagem menor em conversas.
- Preciso das tags twitter: se já tenho as og:?
- O X usa og:title, og:description e og:image quando as twitter: correspondentes faltam, mas twitter:card não tem equivalente: sem ela o link não vira cartão grande. O gerador repete título, descrição e imagem porque outros leitores do padrão, como Slack e Discord, não fazem o mesmo fallback.
- Por que o theme-color não aparece no metadata do Next.js?
- Desde o Next.js 14, themeColor, colorScheme e viewport saíram do metadata e ficaram num export separado, export const viewport: Viewport. Colocá-los no metadata gera aviso de descontinuação no build — por isso o código gerado traz os dois exports.