A imagem que o seu link mostra, feita da própria página.
Quando alguém compartilha o seu site, a prévia é a primeira coisa que as pessoas veem. A skill lê cada página do jeito que os apps leem, monta uma imagem de 1200×630 com o título, a logo, as fontes e as cores dela, confere cada tag e mostra o link em seis apps antes de alguém compartilhar. Todas as imagens de compartilhamento deste site foram feitas por ela.
npx skills add c0le0ni/skills --skill coleoni-og
De um link sem imagem a um que dá vontade de clicar.
Uma padaria fictícia, a mesma da /coleoni-briefing: um site bonito, compartilhado como link pelado. A skill achou o que faltava e fez a imagem a partir da home.
$ /coleoni-og juniperbakery.com Conferência de hoje · juniperbakery.com ok <title> 43 caracteres ok meta description 143 caracteres missing og:title missing og:description missing og:image sem imagem fix og:url / canonical fix og:type fix twitter:card card pequeno no X
A página decide como é compartilhada.
Nada na imagem é inventado. O título, a logo, as fontes e as cores vêm da página, então a prévia parece o site pra onde ela leva.
-
Lê como um robô
Sem cookies, em inglês dos EUA, em UTC: do jeito que WhatsApp, X e LinkedIn buscam uma página. Redirecionamentos e troca de idioma aparecem como aparecem pra eles.
-
Usa o que já existe
O
h1, a descrição, a logo do cabeçalho, a cor da marca nos botões e a fonte dos títulos. -
Desenha nas fontes dela
A imagem é montada por cima da própria página, então as fontes do site valem. Nada de caçar arquivo de fonte.
-
Confere cada tag
Tamanho do título e da descrição, toda tag
og:, otwitter:card, e o tamanho, a proporção e o peso da imagem atual. -
Mostra em cada app
WhatsApp, X, LinkedIn, iMessage, Slack e Discord numa folha só, com o link de hoje ao lado do novo.
-
Instala as tags
Onde cada framework espera, depois de mostrar o que muda. Nunca duas
og:imagena mesma página.
Três jeitos de mostrar uma página.
Os três em 1200×630, em JPG de uns 100 KB. O agente escolhe um por página; você pode pedir outro.
| Layout | Quando |
|---|---|
screen | Logo, título e descrição à esquerda, a página numa janela de navegador à direita. Serve pra maioria dos sites e apps. Ver |
title | Só a logo e tipografia grande. Pra artigos, documentação e páginas com a primeira tela fraca. Ver |
hero | A primeira tela da página, do jeito que ela é. Só quando o hero já funciona como cartaz. Ver |
O que sai.
Uma imagem por página, e tudo o que precisa pra colocar no ar e confirmar que funcionou.
| Arquivo | O que é |
|---|---|
<página>.jpg | Uma imagem de 1200×630 por página: home.jpg, precos.jpg, blog-meu-post.jpg |
preview.png | O link em seis apps, hoje e com as tags novas, mais a conferência e todas as imagens |
report.md | Cada tag de cada página: ok, a corrigir ou faltando, e por quê |
tags.html | As tags pro <head> de cada página, com largura, altura e alt |
og.json | O mesmo, pra scripts |
Um comando, em qualquer agente.
O único pacote é o playwright-core, que o agente instala no primeiro uso. Ele usa o Chrome ou o Edge que você já tem.
npx skills add c0le0ni/skills --skill coleoni-og
/coleoni-og https://seusite.com.br
-g-a claude-code-a codexnpx skills add c0le0ni/skillsAponte pra uma página, um build ou o site inteiro.
Ela gera numa pasta à parte e mostra a prévia. As tags só mudam quando você mandar.
Conferir uma página e fazer a imagem dela.
/coleoni-og https://seusite.com.br
Todas as páginas do sitemap, e já instalar.
/coleoni-og o site inteiro pelo sitemap, instala
Um build local antes de ir pro ar.
/coleoni-og ./dist, domínio seusite.com.br, layout title no blog
O motor, pelo terminal.
O scripts/og.mjs também roda sozinho: node og.mjs https://seusite.com.br --out og.
| Opção | Para quê |
|---|---|
--layout | screen (padrão), title ou hero |
--sitemap <url> | Pega as páginas de um sitemap; --limit 12 por padrão |
--title, --subtitle | Texto na imagem, quando o da página não funciona sozinho |
--domain site.com | Domínio na imagem e nas prévias, pra builds locais |
--base https://site.com/og/ | Onde as imagens vão ficar, pras tags |
--logo, --bg, --accent | Quando a logo ou as cores da página são lidas errado |
--hide "sel,sel" | Esconde banner de cookies e balão de chat antes da captura |
Todo link que você manda, valendo o clique.
npx skills add c0le0ni/skills --skill coleoni-og