Gerador Open Graph & Twitter Card
Constrói o bloco padrão de metadados de cartão de preview que toda plataforma social e app de chat procura quando alguém compartilha sua URL. Título, descrição, imagem, tipo e a variante específica de Twitter Card são todos configuráveis. Uma pequena preview mostra aproximadamente como o link aparecerá num feed social. Copie o resultado direto pro `<head>` da sua página.
<title>Site Title — Page Title</title> <meta name="description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." /> <link rel="canonical" href="https://example.com/page" /> <!-- Open Graph --> <meta property="og:title" content="Site Title — Page Title" /> <meta property="og:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." /> <meta property="og:url" content="https://example.com/page" /> <meta property="og:image" content="https://example.com/og-image.png" /> <meta property="og:image:alt" content="Cover image describing the page" /> <meta property="og:site_name" content="Example Site" /> <meta property="og:type" content="website" /> <meta property="og:locale" content="en_US" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Site Title — Page Title" /> <meta name="twitter:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." /> <meta name="twitter:image" content="https://example.com/og-image.png" /> <meta name="twitter:image:alt" content="Cover image describing the page" /> <meta name="twitter:site" content="@example" /> <meta name="twitter:creator" content="@author" />
Preview
Example Site
Site Title — Page Title
A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card.
Valide o resultado com Sharing Debugger do Facebook ou Card Validator do Twitter após deploy.
Como usar
- Preencha título, descrição, URL canônica e URL da imagem de capa 1200×630.
- Escolha o `og:type` do Open Graph (article, website, …) e um estilo Twitter Card (summary, summary_large_image, …).
- Copie o bloco gerado pro `<head>` da sua página — funciona em HTML, Astro, Next.js, etc.
Perguntas frequentes
- Qual tamanho de imagem usar?
- 1200 × 630 pixels (1.91:1) é o padrão seguro — satisfaz Facebook, LinkedIn, Slack e o card `summary_large_image` do Twitter. O `summary` simples do Twitter usa 1:1, mas a maioria dos sites usa uma imagem só pra ambos.
- Diferença entre `summary` e `summary_large_image`?
- `summary` mostra miniatura quadrada pequena ao lado do título e descrição. `summary_large_image` mostra imagem banner de largura total acima do título. Use a grande pra posts com conteúdo pesado; a pequena quando a imagem é incidental.
- O link canônico importa?
- Sim. Crawlers usam pra de-duplicar variantes de URL (`?utm_source=…`, barras finais) e rotear engagement social (curtidas, comentários) pra uma única URL canônica.
Ferramentas relacionadas
Verificador de Limite de Caracteres SNS / SEO
Digite uma vez e veja como seu texto encaixa em 28+ limites de plataforma — Twitter, Instagram, títulos SEO, anúncios, lojas de apps.
Conversor de JSON para struct Go
Transforme um objeto JSON em um struct Go tipado com tags json, na hora e no seu navegador.
Decodificador de Snowflake ID (Discord, Twitter)
Decodifique um Snowflake ID do Discord, Twitter/X ou Instagram em sua marca de tempo de criação, worker/processo ou datacenter, e sequência — com modo de época personalizada — tudo no seu navegador.
Gerador de Animação CSS
Construa uma animação CSS visualmente — escolha preset, ajuste duração/easing/iteração, veja preview e copie os keyframes.
Gerador de Hash (SHA)
Gere hashes SHA-1, SHA-256, SHA-384 e SHA-512 a partir de texto.
Gerador de UUID
Gere UUIDs v4 aleatórios em lote, com cópia.