Visualização do Open Graph

Pré-visualize a aparência do seu link nas redes sociais.

Pré-visualização

example.com
Título da página
A descrição da página aparecerá aqui…
example.com

Analisar tags OG existentes

Cole código HTML contendo meta tags OG para extraí-las e pré-visualizá-las.

Sobre o Open Graph

As meta tags Open Graph (OG) controlam a aparência da sua página quando ela é compartilhada no Facebook, LinkedIn, Slack, Discord e outras plataformas. Tags OG corretamente configuradas com um bom título, boa descrição e boa imagem podem aumentar consideravelmente a taxa de cliques dos compartilhamentos sociais. O tamanho de imagem OG recomendado é 1200 × 630 pixels.

O que é realmente o Open Graph

O protocolo Open Graph foi criado pelo Facebook em 2010 como uma forma de transformar qualquer página web num «objecto rico» num grafo social, um conjunto estruturado de metadados que outras aplicações (originalmente o Facebook, agora também LinkedIn, Slack, Discord, Microsoft Teams, iMessage, WhatsApp, e dezenas de outras) podem ler para renderizar um cartão de pré-visualização quando alguém cola a sua URL. A spec oficial vive em ogp.me e o protocolo tornou-se de facto a lingua franca da partilha de links na web.

Sem tags OG, as plataformas sociais raspam a sua página e adivinham: escolhem um cabeçalho, agarram a primeira imagem que encontram e chamam-lhe um cartão. O resultado raramente é o que quer. Com as tags OG controla o título, a descrição e a imagem, o que é a diferença entre um link polido e um com aspecto partido.

As quatro tags obrigatórias (segundo ogp.me)

A spec oficial do Open Graph define quatro propriedades obrigatórias. Para qualificar como objecto Open Graph, uma página tem de declarar as quatro:

TagO que faz
og:titleO título do seu objecto, tal como deve aparecer dentro do grafo.
og:typeO tipo do seu objecto, normalmente website para páginas gerais, article para artigos de blog, video.movie para fichas de filme, etc.
og:imageUma URL para a imagem que deve representar o objecto no cartão de pré-visualização.
og:urlA URL canónica do objecto, o seu endereço permanente no seu site.

As tags opcionais recomendadas incluem og:description (um resumo de uma ou duas frases), og:site_name (o nome do seu site como rótulo), og:locale (idioma e região), e as dicas de dimensão de imagem og:image:width / og:image:height / og:image:alt. Incluir as dicas de dimensão permite aos clientes sociais pré-alocarem o espaço adequado e evita o deslocamento de layout enquanto a imagem carrega.

Cartões Twitter / X: mesma ideia, tags ligeiramente diferentes

O X (antigo Twitter) tem o seu próprio espaço de nomes de metadados, twitter:card, twitter:title, twitter:description, twitter:image, twitter:site, twitter:creator, mas, importante, o X recorre às tags OG quando as específicas do Twitter estão ausentes. Por isso uma página que envie apenas as tags OG continua a obter um cartão no X. Onde as duas diferem é no tipo de cartão:

Nota: a pré-visualização autónoma do Twitter Card Validator em cards-dev.twitter.com/validator foi removida pelo X em 2 de Agosto de 2022. A forma actual de verificar um cartão é começar um novo tweet no Tweet Composer, colar a URL e deixar a pré-visualização renderizar, não precisa de publicar realmente o tweet. Algumas ferramentas de terceiros (esta incluída) aproximam o cartão renderizado para que possa iterar antes de publicar.

Dimensões de imagem que realmente funcionam

Não há um único tamanho perfeito, mas uma imagem 1200×630 (rácio 1,91:1) é a aposta única mais fiável, funciona em todo o lado sem cortes maiores. Recomendações por plataforma:

PlataformaTamanho recomendadoNotas
Facebook1200×630 (1,91:1)Mínimo 200×200; abaixo de 600×315 mostra-se como uma miniatura pequena.
LinkedInMínimo 1200×627Rácio 1,91:1, JPG/PNG/GIF, máx 5 MB.
X (summary_large_image)1200×675 (16:9)Ou 1200×600 (2:1), ambas renderizam em largura total.
Slack / DiscordLê as tags OG directamente1200×630 funciona bem; sujeitos centrados para sobreviverem ao corte por rácio.
PinterestVertical (p. ex. 1000×1500)O rácio 2:3 funciona melhor no feed do Pinterest.

Mantenha texto importante e rostos perto do centro da imagem, cada plataforma corta de forma diferente e um logo no canto pode desaparecer atrás dos overlays de UI da plataforma.

Por que o seu cartão às vezes não aparece

Se adicionou tags OG mas a pré-visualização continua partida ou vazia, os suspeitos do costume:

O problema do cache

Assim que uma plataforma social raspa a sua página, os metadados ficam em cache durante um período, o folclore comunitário coloca-o em torno de 7 dias para o Facebook e o LinkedIn, embora nenhuma plataforma documente o TTL exacto. Actualizar as suas tags OG não refresca o cache automaticamente. Para forçar um re-scrape, use as ferramentas oficiais: Facebook Sharing Debugger, LinkedIn Post Inspector. O X apanha os novos metadados na próxima vez que a URL for partilhada. O Slack e o Discord refrescam as suas pré-visualizações com base nas tags OG no momento do fetch, por isso actualizam mais rápido que o Facebook.

Valores comuns de og:type

A tag og:type diz à plataforma social que tipo de objecto representa a página. A maioria das páginas é website (o predefinido) ou article; valores específicos por vertical permitem às plataformas renderizar cartões mais ricos. Da spec:

Limites de comprimento na prática

Nenhuma plataforma impõe um tecto rígido para o comprimento do título ou da descrição, mas todas truncam a partir de um ponto:

JSON-LD vs Open Graph (são coisas diferentes)

Confusão comum: os dados estruturados JSON-LD (com vocabulários schema.org) e as meta tags Open Graph fazem trabalhos diferentes. OG / Twitter Cards controlam as pré-visualizações de partilha social, o que aparece quando alguém cola a sua URL no Slack ou no Facebook. JSON-LD com schema.org ajuda o Google a parsear a sua página para resultados de busca enriquecidos, cartões de receita, info de produto, snippets FAQ na busca do Google. Ambos são recomendados e não se substituem.

Erros comuns

  1. Usar uma URL og:image relativa. A spec exige uma URL absoluta. Caminhos relativos são silenciosamente descartados.
  2. Usar um logo de site genérico para cada página. A imagem OG é a heroína do seu cartão, cada página merece uma imagem única, idealmente ligada ao conteúdo da página.
  3. Esquecer og:image:width e og:image:height. Alguns clientes pré-alocam espaço e perdem a imagem sem estas dicas.
  4. Falta do tipo twitter:card summary_large_image. Sem ele, o X recorre por defeito ao cartão summary mais pequeno com miniatura quadrada, normalmente menos cativante.
  5. Pôr texto chave nos cantos da imagem. Diferentes plataformas cortam de forma diferente. Sujeitos e texto importante devem estar nos 80% centrais.
  6. Actualizar as tags mas não refrescar o cache. Visite o Sharing Debugger / Post Inspector oficial após cada alteração.
  7. Submeter uma URL de imagem em HTTP. A maior parte das plataformas rejeita imagens não-HTTPS; o cartão aparecerá sem imagem.
  8. Usar apenas og:title e og:description. Sem og:image o cartão renderiza-se como um stub esparso só de texto na maioria das plataformas.

Perguntas frequentes

Por que a minha pré-visualização parece diferente em plataformas diferentes?

Cada plataforma renderiza os mesmos metadados OG à sua maneira, rácios de corte de imagem diferentes, tamanhos de título diferentes, descrições truncadas em pontos diferentes. Esta ferramenta aproxima o cartão de cada plataforma; o render real em produção pode diferir ligeiramente. Teste sempre as plataformas mais importantes (Facebook Sharing Debugger, LinkedIn Post Inspector e Tweet Composer no X) antes de confiar num cartão.

As minhas tags OG estão correctas mas o Facebook ainda mostra a pré-visualização antiga. Por quê?

O Facebook cacheia agressivamente os metadados OG, depois de raspar uma URL, o resultado fica retido durante o que é vulgarmente reportado como vários dias. Para forçar um novo scrape, cole a URL no Facebook Sharing Debugger e clique «Scrape Again». O mesmo truque funciona para o LinkedIn via Post Inspector.

Preciso de tags OG e de Twitter Card?

Não em sentido estrito, o X recorre às tags OG quando as específicas do Twitter estão ausentes. Onde as específicas do Twitter ajudam é na escolha do tipo de cartão (twitter:card = summary_large_image) e na atribuição do post (twitter:site, twitter:creator). Para máximo controlo no X, inclua ambos os conjuntos; para mínimo esforço, envie tags OG limpas e aceite o tipo de cartão predefinido.

Os meus dados são enviados para algum sítio?

Não. A pré-visualização é renderizada inteiramente no seu navegador com base no que escreve no formulário. Não há fetch ao servidor, não há scraping da sua URL real, não há registo das suas tags em rascunho. A URL de imagem que cola carrega de facto na pré-visualização a partir da fonte real (porque as imagens são buscadas pelo navegador para serem renderizadas), mas os valores das tags OG em si nunca saem da página.

Qual o conjunto mais simples de tags OG que posso enviar?

Quatro tags obrigatórias mais og:description:

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

Adicione og:site_name, og:image:width, og:image:height e og:image:alt para completar. Adicione twitter:card = summary_large_image se quiser que o X use o cartão em largura total.

Como é que o Slack / Discord geram pré-visualizações?

Tanto o Slack como o Discord lêem as tags OG directamente quando uma URL é colada numa mensagem. O Slack usa uma cadeia de precedência oEmbed (oEmbed → OG → meta tags); o Discord lê OG e algumas tags proprietárias incluindo uma meta tag theme-color que controla a faixa colorida no lado esquerdo do embed. Ambos refrescam rapidamente em comparação com o Facebook, normalmente na próxima colagem da mesma URL após uma actualização de tags.

Ferramentas relacionadas

Gerador de meta tags

Gere meta tags otimizadas SEO, Open Graph e Twitter Card para seu site.

Gerador robots.txt

Construa um arquivo robots.txt com regras user-agent, caminhos allow/disallow, sitemaps e atrasos de crawl.

Gerador de slug URL

Transforme qualquer texto em um slug limpo e adequado para URLs. Lida com acentos, caracteres especiais e mais.