Guia completo de tags Open Graph - og:title, imagem e Twitter Cards (2026)

Quando alguem cola sua URL no Facebook, LinkedIn, Slack, Discord ou iMessage, esses apps nao adivinham pela pagina visivel. Eles procuram tags Open Graph no head HTML: titulo, descricao, imagem, tipo e URL canonica. Se estiverem certas, o card parece um preview desenhado. Se faltarem, aparece uma imagem aleatoria, um titulo cortado ou nenhum card. Este guia percorre o protocolo, as tags que importam, como elas diferem do title HTML e da meta description, e os erros que quebram a previa. Quando quiser markup para colar, use o Gerador de tags Open Graph - roda no navegador e nao faz upload dos campos.

O que sao tags Open Graph

Open Graph e um vocabulario pequeno de meta tags. Cada tag e um par nome/valor no head do documento. O nome usa o prefixo og:. Crawlers dos apps sociais pedem a URL publica, leem essas tags e montam um card: imagem em cima ou ao lado, titulo, descricao e muitas vezes o nome do site. O protocolo nasceu no Facebook. Hoje e o formato padrao de share na maior parte da web.

• Facebook e Instagram leem og:* primeiro nas previas de link.
• LinkedIn, Slack, Discord, Telegram e iMessage reutilizam as mesmas tags.
• X (Twitter) pode cair para Open Graph, mas twitter:* ganha quando as duas existem.
• Buscadores ainda usam o title HTML e a meta description na SERP. OG e para shares, nao para o link azul no Google.

Uma tag parece meta property="og:title" content="Seu titulo para compartilhar". O property e a chave. O content e o valor. Caracteres especiais no valor precisam de escape para o HTML ficar valido. O gerador faz esse escape por voce.

As quatro tags que toda pagina precisa

O objeto basico do Facebook pede quatro properties. Se alguma falta ou esta vazia, muitos crawlers inventam um fallback - ou mostram um card quebrado.

• og:title - a manchete do card. Curta e especifica. Pode ser diferente do title HTML que voce quer no Google.
• og:type - que tipo de objeto e. website e o default para home ou landing. article cabe num post de blog.
• og:image - uma URL https absoluta da imagem. Caminhos relativos (/images/og.png) falham porque o crawler nao tem contexto de pagina.
• og:url - a URL canonica deste objeto. Deve bater com a URL publica compartilhada, com https e o host preferido (www ou apex).

Essas quatro sao o minimo. Um card so com titulo e sem imagem parece inacabado. Um card com imagem e titulo vago desperdica o clique.

Extras recomendados

• og:description - uma ou duas frases sob o titulo. Cerca de 70 a 200 caracteres. Nao precisa ser a mesma string da meta description.
• og:site_name - sua marca. LinkedIn e Slack costumam mostrar abaixo do titulo para a fonte ficar obvia.
• og:locale - idioma e regiao com underscore, por exemplo en_US, es_ES ou pt_BR. Use quando a pagina nao for ingles.

Depois voce pode acrescentar campos ricos do tipo (article:author, product:price:amount). Comece pelo conjunto basico. Um objeto basico completo ganha de um objeto product pela metade.

Valores de og:type que voce vai usar de verdade

O type diz ao crawler como tratar a URL. Tipo errado quase nunca quebra o card, mas muda quais extras fazem sentido e como alguns apps agrupam o objeto.

• website - homes, indices de categoria e landings genericas.
• article - posts, noticias e guias how-to. Combine com URL datada e imagem unica.
• product - uma pagina de produto ou precos. Titulo claro e imagem hero.
• profile - pagina de pessoa ou autor.

Se nao tiver certeza, website e seguro. Nao invente types custom. Crawlers ignoram nomes que nao conhecem.

Regras de og:image

A imagem e a primeira coisa que as pessoas veem. Imagem fraca ou ausente e o motivo mais comum de um share barato.

• Use 1200 x 630 pixels para um card paisagem. Essa proporcao (cerca de 1.91:1) e o que Facebook e LinkedIn esperam.
• Fique acima de 600 x 315 para o crawler nao cair numa miniatura minuscula.
• A URL precisa ser absoluta e https. Hospede o arquivo num CDN publico ou na sua origem. Login wall e bloqueio no robots.txt escondem a imagem.
• Mantenha o arquivo razoavel (bem abaixo de 8 MB). PNG ou JPEG servem. Evite WebP se ainda precisar de caches antigos do Facebook.
• Coloque o assunto no centro. Alguns apps recortam as laterais no celular.

Twitter Cards versus Open Graph

O X pode ler og:title, og:description e og:image. Tambem tem as proprias tags twitter:*. Se as duas existem, twitter:* ganha no X e og:* continua ganhando no resto. Por isso a maioria das paginas emite as duas.

• twitter:card - summary_large_image quando ha imagem larga, ou summary quando nao.
• twitter:title, twitter:description, twitter:image - em geral os mesmos valores das og:* equivalentes.
• Voce nao precisa de handle do Twitter para um card large-image basico.

Se voce so publica Open Graph, o X muitas vezes ainda mostra um card. Se so publica tags do Twitter, Facebook e LinkedIn nao. Open Graph e a base compartilhada. Tags do Twitter sao a camada extra para o X.

OG versus title HTML versus meta description

Tres strings, tres funcoes. Misturar e o caminho para um snippet SERP bom e um card fraco no Slack - ou o contrario.

• Title HTML - o titulo do resultado de busca e a aba do navegador. Aqui ficam queries transacionais ou informativas.
• Meta description - o snippet SERP abaixo desse titulo. O Google pode reescrever.
• og:title e og:description - o card social. Escreva para quem ja tem o link, nao para uma keyword.

Uma pagina de ferramenta pode manter um title HTML transacional (Gerador de tags Open Graph gratis) e um og:title mais claro (Gere tags Open Graph para este artigo). Um post pode fazer o inverso. Confira o snippet SERP com o Verificador de meta description e previa da SERP. Confira o card de share com tags OG.

Exemplo pratico

Um post sobre Open Graph pode usar estes valores. Depois de cola-los no head da URL publica, um crawler deve ver um objeto completo.

• og:title - Tags Open Graph explicadas
• og:description - O que og:title, og:image, og:url e og:type fazem, mais Twitter Cards e tamanho de imagem.
• og:type - article
• og:url - https://www.toolsminify.com/blog/open-graph-tags-complete-guide
• og:image - um PNG ou JPEG 1200 x 630 em https
• og:site_name - ToolsMinify
• og:locale - pt_BR
• twitter:card - summary_large_image, com o mesmo titulo, descricao e imagem

Aspas e e-comercial num titulo precisam virar " e & dentro do atributo content. Se voce escrever as tags na mao e a pagina nao parsear, esse escape e o primeiro lugar a olhar.

Erros comuns

• og:image ou og:url relativas. As duas precisam ser absolutas.
• og:url que nao bate com o link compartilhado (http vs https, apex vs www, prefixo de locale faltando).
• Imagem abaixo de 200 x 200, ou recorte 1:1 que o LinkedIn depois emoldura.
• Tags no body em vez do head. Crawlers olham o head.
• Bloquear a imagem ou a pagina no robots.txt. Crawlers sociais tambem precisam busca-las.
• Cache velho do Facebook. Depois de mudar tags, rescrape a URL no Sharing Debugger. Outros apps tem cache proprio.
• og:title duplicadas em conflito. A primeira costuma ganhar, e voce nao vai gostar de qual.
• Colocar segredos ou copy de rascunho inedito em og:description. As tags sao publicas no momento em que a URL existe.

Perguntas frequentes

Tags Open Graph sao fator de ranking no Google?

Nao de forma direta. O Google usa o title HTML, a meta description e o conteudo para busca. Tags OG ajudam as pessoas a compartilhar a pagina com um card limpo. Shares melhores podem trazer links e visitas. Isso e efeito indireto, nao um interruptor de ranking.

Quais tags Open Graph sao obrigatorias?

Comece com og:title, og:type, og:image e og:url. Adicione og:description, og:site_name e og:locale quando tiver. Tags vazias sao piores do que omitir.

Qual tamanho og:image deve ter?

1200 x 630 pixels e o tamanho paisagem usual. Fique acima de 600 x 315. Use URL https absoluta. Centralize o assunto para o recorte mobile nao cortar o texto da imagem.

Preciso de Twitter Cards se ja tenho Open Graph?

O X pode ler tags OG, mas twitter:card mais titulo, descricao e imagem dao controle explicito nessa rede. Facebook e LinkedIn ignoram twitter:* e ainda precisam de og:*. Emita as duas quando puder.

Por que o Facebook ainda mostra a imagem antiga?

O Facebook cacheia o primeiro scrape. Mude a URL da imagem (ou espere) e passe a URL no Sharing Debugger do Facebook para pedir um scrape novo. LinkedIn e Slack tem caches parecidos. Mudar so os bytes do arquivo na mesma URL quase nunca resolve.

Onde eu colo o HTML?

Dentro do head do documento HTML publico, ou na API de metadata do seu framework para renderizar no head. As tags precisam estar visiveis na URL exata que voce definiu como og:url. Para o passo a passo do gerador, veja Como usar o Gerador de tags Open Graph.

Monte as tags no navegador

Preencha titulo, descricao, URL e imagem e copie o HTML ao vivo. Nada e enviado:

• Gerador de tags Open Graph - monte og:* e Twitter Cards opcionais, com previa social.
• Como usar o Gerador de tags Open Graph - guia passo a passo da mesma ferramenta.
• Verificador de meta description e previa da SERP - confira o snippet de busca, nao o card de share.
• Gerador de slug - slugs de URL limpos para a pagina que voce vai compartilhar.
• Todas as ferramentas SEO - o indice completo da categoria.