O Que São Tags Open Graph? Um Guia para Visualizações de Links e Compartilhamento Social

Quando você compartilha um link no Facebook, LinkedIn, Slack ou Twitter, um cartão de visualização geralmente aparece — com um título, descrição e imagem. Essas visualizações não são mágica. Elas são controladas por tags Open Graph (OG) no HTML da sua página.

Acertar as tags Open Graph significa que seus links compartilhados parecem profissionais e recebem mais cliques. Errar significa visualizações feias, imagens faltando ou texto genérico de fallback.

O Que É o Protocolo Open Graph?

Open Graph é um protocolo criado pelo Facebook em 2010 que permite que páginas da web definam como aparecem quando compartilhadas em plataformas sociais. Ele usa meta tags na seção HTML <head>:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short summary of the page" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

Quando uma plataforma social detecta uma URL compartilhada, ela busca a página e lê essas tags para construir o cartão de visualização.

Tags Open Graph Essenciais

og:title

O título exibido no cartão de visualização. Mantenha-o abaixo de 60 caracteres para melhor exibição em todas as plataformas.

<meta property="og:title" content="How to Create Branded Short Links" />

Dicas:

Não apenas duplique sua tag <title> — otimize para engajamento social
Coloque as palavras mais importantes no início
Evite clickbait (plataformas podem penalizá-lo)

og:description

Um breve resumo mostrado abaixo do título. Procure por 120-160 caracteres.

<meta property="og:description" content="Create custom branded short links with click tracking and analytics. Set up in 5 minutes." />

og:image

A imagem exibida na visualização. Esta é a tag mais impactante — postagens com imagens recebem significativamente mais engajamento.

<meta property="og:image" content="https://example.com/social-preview.jpg" />

Requisitos de imagem por plataforma:

Plataforma	Tamanho Recomendado	Proporção de Aspecto
Facebook	1200 × 630 px	1.91:1
Twitter	1200 × 628 px	1.91:1
LinkedIn	1200 × 627 px	1.91:1
Slack	500 × 500 px mín	Qualquer

Use 1200 × 630 pixels para cobrir todas as plataformas.

og:url

A URL canônica da página. Isso diz às plataformas qual URL exibir e ajuda a evitar conteúdo duplicado.

<meta property="og:url" content="https://example.com/page" />

og:type

Descreve o tipo de conteúdo. Valores comuns:

website — para homepages e páginas gerais
article — para posts de blog e artigos
product — para páginas de produtos

Tags do Twitter Card

Twitter usa suas próprias meta tags (além do Open Graph) para cartões de visualização:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Se as tags do Twitter Card não estiverem presentes, o Twitter volta para as tags Open Graph. A maioria dos sites define ambas para máximo controle.

Como as Plataformas Sociais Buscam Dados do Open Graph

Quando você compartilha uma URL:

1O crawler da plataforma visita a URL
2Ele lê o HTML <head> para tags OG
3Ele armazena em cache os dados do cartão de visualização
4Compartilhamentos subsequentes da mesma URL usam a versão em cache

Importante: Alterações nas tags OG não são refletidas imediatamente. Plataformas armazenam em cache agressivamente, portanto você pode precisar limpar manualmente o cache (veja depuração abaixo).

Personalizando Visualizações de Links com Linkly

E se você estiver compartilhando uma URL que não controla — ou quer cartões de visualização diferentes para contextos diferentes?

O recurso custom social previews do Linkly permite que você substitua os dados do Open Graph para qualquer link encurtado:

Defina um título, descrição e imagem personalizados
Visualizações diferentes para públicos diferentes
Não é necessário editar o HTML da página de destino
Funciona para qualquer URL, mesmo páginas que você não possui

Isso é especialmente útil quando:

Compartilhando conteúdo de terceiros com sua própria marca
Testando A/B diferentes cartões de visualização para ver qual recebe mais cliques
A página de destino tem tags OG ruins ou ausentes

Depuração de Tags Open Graph

A ferramenta do Facebook permite que você visualize e atualize dados OG em cache:

1Digite sua URL
2Clique em Debug
3Veja o que o Facebook lê da sua página
4Clique em Scrape Again para limpar o cache

Twitter Card Validator

O validador do Twitter mostra como seu cartão aparecerá e destaca quaisquer problemas.

LinkedIn Post Inspector

A ferramenta do LinkedIn visualiza seu cartão de link e atualiza dados em cache.

Dicas Gerais

Verifique a fonte: Visualize o código-fonte da sua página e procure por og: para verificar se as tags estão presentes
Use URLs absolutas: As URLs de imagem devem ser absolutas (começar com https://), não relativas
Teste após alterações: Sempre limpe o cache da plataforma após atualizar tags OG
Verifique a renderização de JavaScript: Algumas plataformas não conseguem executar JavaScript, portanto as tags OG devem estar na resposta HTML inicial

Erros Comuns

1Falta og:image: Postagens sem imagens recebem 2-3x menos cliques
2Imagem muito pequena: Use pelo menos 1200 × 630 pixels
3Proporção de aspecto errada: Imagens são cortadas de forma estranha
4Cache obsoleto: Atualizou suas tags OG mas esqueceu de limpar os caches da plataforma
5Tags duplicadas: Múltiplas tags OG do mesmo tipo causam comportamento imprevisível
6Imagens HTTP: Use HTTPS para URLs de imagem — algumas plataformas bloqueiam imagens HTTP
7URLs relativas: Crawlers de plataforma não conseguem resolver caminhos relativos

Open Graph para Diferentes Tipos de Conteúdo

Posts de Blog

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-02" />
<meta property="article:author" content="Your Name" />

Produtos

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="USD" />

Vídeos

<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://example.com/video.mp4" />

Conclusão

Tags Open Graph são uma pequena adição ao seu HTML que têm um grande impacto em como seu conteúdo aparece na web social. Acertá-las — com o título, descrição e imagem corretos — aumenta diretamente as taxas de clique quando seus links são compartilhados.

Quer visualizações de link personalizadas sem editar HTML? Comece com Linkly e personalize o cartão de visualização social para qualquer link encurtado — defina seu próprio título, descrição e imagem.