Português
Crie tags Open Graph e Twitter Card com pré-visualização social ao vivo.
Última atualização
Recomendado 1200×630, abaixo de 8 MB, URL absoluta (https).
Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy.
<title>Learn to code by doing — Coddy</title> <meta name="description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." /> <link rel="canonical" href="https://coddy.tech" /> <!-- Open Graph (Facebook, LinkedIn, Discord, Slack) --> <meta property="og:title" content="Learn to code by doing — Coddy" /> <meta property="og:description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://coddy.tech" /> <meta property="og:image" content="https://storage.googleapis.com/coddy-15505.appspot.com/public/coddy-logo-trans.png" /> <meta property="og:image:alt" content="Coddy — Learn to code by doing" /> <meta property="og:site_name" content="Coddy" /> <meta property="og:locale" content="en_US" /> <!-- Twitter / X --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Learn to code by doing — Coddy" /> <meta name="twitter:description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." /> <meta name="twitter:image" content="https://storage.googleapis.com/coddy-15505.appspot.com/public/coddy-logo-trans.png" /> <meta name="twitter:image:alt" content="Coddy — Learn to code by doing" /> <meta name="twitter:site" content="@coddy_tech" />
Quando você compartilha um link em qualquer app moderno — um post, uma DM, um canal do Slack — a plataforma busca a URL e extrai um pedaço de metadados para renderizar um *card de compartilhamento*: o título, uma descrição, uma imagem e o nome do site. Esses metadados não vêm da página visível; vêm de um conjunto específico de tags <meta> no <head>. O protocolo Open Graph, criado originalmente pelo Facebook em 2010, define a maioria delas. O X (antigo Twitter) adiciona algumas extras com prefixo twitter:. LinkedIn, Discord, Slack, iMessage, WhatsApp e Pinterest leem as mesmas tags com pequenas variações.
Acertar essas tags é um trabalho único por página, mas o impacto é desproporcional. Uma página sem imagem Open Graph parece quebrada quando compartilhada. Um título comprido demais é cortado no meio de uma palavra. A proporção errada de og:image faz toda plataforma colocar tarjas pretas em volta. Esta ferramenta deixa você ajustar esses valores com pré-visualização ao vivo, então dá para ver problemas de corte e truncamento *antes* da página ir ao ar.
Tudo roda localmente. O estado do formulário, as pré-visualizações e o HTML gerado nunca saem do seu navegador — cole URLs ainda não publicadas e copy não lançado sem se preocupar com vazamento.
property (<meta property="og:title">), enquanto tags SEO padrão e tags Twitter Card usam name (<meta name="description">, <meta name="twitter:card">).title, meta description), Open Graph (og:title, og:description) e Twitter (twitter:title, twitter:description).og:image deve ter 1200×630, ser servida via HTTPS e ter URL absoluta — caminhos relativos falham quando outros servidores buscam a página.Mire entre 50 e 60 caracteres. O Facebook trunca em ~95 caracteres e o X em ~70. Comece pelo valor, não pela marca — "Como deployar com Cloudflare Workers" é melhor que "Coddy Blog · Guia de Deploy".
Mire entre 120 e 155 caracteres. A maioria das plataformas trunca por volta de 200. Use frases completas — a descrição aparece abaixo do título em todo card, e fragmentos cortados parecem inacabados.
Use a URL https:// absoluta da própria página, não um link de rastreamento ou redirecionamento. Crawlers de Open Graph seguem og:url quando deduplicam compartilhamentos — uma URL canônica mantém contagem de shares e pré-visualizações consistentes.
1200×630 é o ponto ideal para cards summary_large_image no X e cards padrão no Facebook e no LinkedIn. PNG ou JPEG, com menos de ~5 MB. Sempre use uma URL absoluta — caminhos relativos falham porque o crawler social busca a URL do próprio servidor dele.
Cole o bloco do painel **Tags <head> geradas** dentro do <head> da sua página. Depois do deploy, valide com o debugger de cada plataforma (Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector) e force um recrawl se você mudar a imagem depois.
As tags abaixo cobrem tudo o que as plataformas sociais leem hoje. Tags marcadas com property= pertencem ao protocolo Open Graph; tags marcadas com name= são as variantes padrão de SEO / Twitter Card. Especificações de referência: Open Graph, X Cards.
| Tag | Usada por | Recomendado | Observações |
|---|---|---|---|
og:title | FB, LinkedIn, Slack, Discord | 50-60 caracteres | Faz fallback para <title> se ausente — defina mesmo assim. |
og:description | FB, LinkedIn, Slack, Discord | 120-155 caracteres | Faz fallback para meta description se ausente. |
og:image | Toda plataforma | 1200×630, < 5 MB, HTTPS, URL absoluta | Tem que ser URL absoluta — caminhos relativos falham. |
og:image:alt | Acessibilidade | Descreva a imagem | Usado por leitores de tela e por algumas plataformas. |
og:url | FB, LinkedIn | URL canônica https:// | Usado para deduplicar compartilhamentos com variantes de query string. |
og:type | FB, LinkedIn | website ou article | article libera article:published_time e article:author. |
og:site_name | FB, Discord | Nome da marca | Aparece como a atribuição pequena acima/abaixo do card. |
twitter:card | X | summary_large_image | summary para miniatura quadrada pequena, summary_large_image para o layout banner. |
twitter:title | X | Mesmo que og:title | O X faz fallback para og:title se ausente — defina os dois por segurança. |
twitter:description | X | Mesmo que og:description | Faz fallback para og:description se ausente. |
twitter:image | X | Mesmo que og:image | Faz fallback para og:image se ausente. |
twitter:site | X | @suamarca | O handle do X de quem publica — habilita parte das analytics. |
Defina **og:type** como article, adicione **Autor** e **Horário de publicação** na seção específica de artigo, e use uma imagem de capa 1200×630. As pré-visualizações se atualizam para mostrar como o card fica em cada plataforma.
og:type=article libera as tags específicas de artigo (article:published_time, article:author) que algumas plataformas (Discord, LinkedIn) usam para mostrar atribuição. O Twitter ignora, mas não reclama.
Mantenha **og:type** como website. Use o nome do produto como título, uma frase de valor como descrição e um hero ou recorte de screenshot como imagem.
Landing pages não precisam de metadata de artigo. O elemento mais clicado num card de landing compartilhada costuma ser a imagem, então invista num visual 1200×630 limpo.
Título: "Conceito — Seção · Docs". Descrição: uma frase explicando o conceito. Imagem: uma capa genérica de docs ou um screenshot da UI relacionada.
Páginas de docs são compartilhadas em canais do Slack e em threads do X. Uma capa de docs consistente faz com que elas sejam reconhecíveis num feed agitado antes mesmo do título ser lido.
og:image tipo /images/cover.png. Crawlers sociais buscam sua página dos *servidores deles* — caminhos relativos apontam para o domínio da própria plataforma social e dão 404. Use sempre uma URL absoluta https://.twitter:card. Sem ele, o X usa um card mínimo, sem imagem, por padrão. Adicione twitter:card=summary_large_image para ter o layout banner que praticamente toda marca quer.og:image:alt. Ela não custa nada, ajuda usuários de leitor de tela e algumas plataformas mostram como texto alternativo no card renderizado.<meta> — título, descrição, imagem, tipo e por aí vai. Toda plataforma social e de chat lê isso hoje, e foi por isso que ele virou o padrão de fato para metadados de cards de compartilhamento.twitter: para as tags og: equivalentes quando as específicas do X faltam, então tecnicamente dá para se virar só com Open Graph. Mas adicionar twitter:card, twitter:site e twitter:creator dá um controle mais fino sobre como o card aparece no X.<title> e a meta description. O Google às vezes pega o og:image para a busca por imagens e para superfícies do Discover, mas isso não é sinal de ranqueamento.