Preciso eu ter tanto os rótulos OG quanto os rótulos do Twitter?

Tecnicamente não — a maioria das plataformas recorre às tags og: se as tags twitter: estiverem ausentes. Mas o Twitter/X não exibirá o formato de imagem grande sem a tag twitter:card definida como summary_large_image, portanto, adicione-a mesmo assim.

Qual tamanho de imagem devo usar para og:image?

1200×630px é a recomendação padrão. O Slack exige pelo menos 600px de largura para exibir qualquer imagem. Menor que 200×200px e a maioria das plataformas o pula completamente.

Meus rótulos estão corretos, mas a prévia ainda está quebrada. O que fazer agora?

As plataformas armazenam os dados OG de forma agressiva. Use o Facebook Debugger (developers.facebook.com/tools/debug) ou o LinkedIn Post Inspector para forçar uma raspagem atualizada. Para o Slack, adicione um parâmetro de consulta para quebrar a URL armazenada.

Posso definir tags OG diferentes por página em um aplicativo de página única?

Sim, mas exige renderização no lado do servidor ou um serviço de pré-renderização. As alterações feitas pelo JavaScript no lado do cliente nas tags meta não são detectadas por maioria dos robôs de busca — eles recuperam o HTML bruto antes que o JavaScript execute.

Anúncios incomodam? Ir Sem anúncios Hoje 

Tags Open Graph Parece que seus links estão ruins no Slack

Atualizado em 15 de maio de 2026

Você passou semanas desenvolvendo o aplicativo. A pré-visualização do link no Slack mostra "Sem título" e um ícone quebrado. Isso é um problema de Open Graph. Aqui está como resolver em 10 minutos.

Tags de Open Graph: Parece que seus links estão ruins no Slack 1

ANUNCIADO Remover?

Você passou três semanas desenvolvendo o aplicativo. A visualização do link no Slack mostra "Sem título" e uma miniatura do seu logotipo do rodapé. Isso é um problema de Open Graph e leva cerca de 10 minutos para resolver.

O que são tags Open Graph?

Open Graph (og:) é um protocolo introduzido pelo Facebook em 2010 que é usado atualmente por todas as principais plataformas para gerar visualizações de links. Quando o Slack, o Twitter, o LinkedIn ou o iMessage expande seu URL, eles acessam a página, procuram <meta> tags com o prefixo og: e usam essas tags para construir a carta.

Sem tags → eles adivinham. Eles geralmente erram.

As tags que realmente importam

Tag	Obrigatório?	O que faz
`og:title`	Sim	O título exibido na carta de visualização
`og:description`	Sim	O texto de subtítulo / resumo (mantenha abaixo de 200 caracteres)
`og:image`	Sim	A imagem de visualização. Deve ser uma URL absoluta.
`og:url`	Sim	A URL canônica da página
`og:type`	Recomendado	Use o `website` para a maioria das páginas, `article` para posts
`twitter:card`	Recomendado	Controla o tamanho da carta do Twitter/X. Use `summary_large_image`.
`twitter:title`	Opcional	Fica como padrão em maioria dos clientes `og:title` Na maioria das vezes, o que mais confunde as pessoas é
`twitter:description`	Opcional	Fica como padrão em maioria dos clientes `og:description`
`twitter:image`	Opcional	Fica como padrão em maioria dos clientes `og:image`

Deve ser uma URL absoluta (sem caminhos relativos), idealmente 1200×630px e abaixo de 8MB. O Slack, em particular, ignorará silenciosamente imagens que não atendem aos seus requisitos de tamanho. Tente ter pelo menos 600px de largura, caso contrário, a imagem simplesmente não aparecerá. og:image. Um conjunto completo de tags OG

Coloque isso no

da sua página. Substitua os valores de placeholder: <head> Para um post ou artigo, altere

<!-- Primary Open Graph tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A clear, specific description under 200 characters. No fluff." />
<meta property="og:image" content="https://yourdomain.com/images/og-image.png" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:type" content="website" />

<!-- Twitter/X card (falls back to og: tags if omitted) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A clear, specific description under 200 characters." />
<meta name="twitter:image" content="https://yourdomain.com/images/og-image.png" />

e adicione o autor e a data de publicação: og:type para article Como verificar suas tags sem deploys

<meta property="og:type" content="article" />
<meta property="article:author" content="https://yourdomain.com/about" />
<meta property="article:published_time" content="2026-04-25T00:00:00Z" />

A forma mais rápida: cole seu URL no

IO Tools Open Graph Checker . Ele acessa a página, analisa as tags e mostra exatamente o que o Slack (ou qualquer outra plataforma) verá — incluindo uma prévia do como a carta será exibida. Sem necessidade de login, sem necessidade de instalar extensões.Se você quiser verificar um URL local ou um ambiente de staging que não seja publicamente acessível, o verificador não conseguirá alcançá-lo. Nesse caso, veja a fonte da página e verifique manualmente se as tags estão presentes no

. Após o deploy, execute o verificador novamente para confirmar que a versão ativa corresponde. <head>Validadores específicos por plataforma (quando você precisa forçar uma atualização de cache):

Facebook/Meta:

developers.facebook.com/tools/debug — também limpa o cache do Facebook sobre suas tags OG LinkedIn:
linkedin.com/post-inspector — útil quando a visualização está desatualizada após uma atualização Twitter/X:
cards-dev.twitter.com/validator — mais lento para atualizar, mas bom para confirmar o formato da carta O Slack armazena com agressividade. Se você corrigir suas tags e a visualização antiga continuar aparecendo, você pode forçar uma nova busca adicionando uma string de consulta (por exemplo,

) à URL antes de compartilhar — não ideal para links em produção, mas aceitável para testes. ?v=2Gerando as tags

Se você quiser gerar um conjunto completo de tags interativamente em vez de codificar manualmente, o

IO Tools HTML Meta Tag Generator abrange tags OG, cartas do Twitter e tags padrão em uma só vez. Copie a saída para seu Erros comuns a evitar <head>.

URLs de imagens relativos.

Não funciona. Cada plataforma acessa as tags OG de um servidor externo que não tem contexto sobre sua URL base. Sempre use o caminho absoluto. /images/og.png Usar a mesma imagem para tudo. https:// Um avatar de 300×300 como imagem OG aparecerá tecnicamente — como uma miniatura pequena e feia. Crie uma imagem adequada de 1200×630 para cada página importante.
Não definir Sem isso, algumas plataformas usam a URL que foram acessadas, outras criam uma URL canônica própria. Defina explicitamente.
Esquecer de invalidar os caches. og:url. As plataformas armazenam as tags OG por 24 a 72 horas. Se você atualizar as tags em uma página ativa, use os validadores acima para forçar uma nova busca.
Misturar atributos.
As tags OG usam property e name . As tags do Twitter usam . Misturar as duas faz com que alguns analisadores ignorem a tag inteiramente. property=As tags Open Graph são aquelas coisas que levam cinco minutos para serem adicionadas e parecem desagradáveis quando ausentes. Corrija uma vez, verifique com o name=e continue.