O que é Pré-visualização Open Graph?

O Open Graph Preview mostra exatamente como a sua URL vai aparecer quando partilhada no Facebook, Twitter, LinkedIn e outras plataformas sociais. Insira os valores das suas meta tags OG e veja uma maquete ao vivo do cartão de partilha antes de publicar.

A pré-visualização lê suas tags og:title, og:description, og:image, og:site_name e og:url e reproduz o layout real que cada rede usa. O Facebook corta títulos perto dos 88 caracteres, o card grande do Twitter exige proporção 2:1 e o LinkedIn corta a descrição em torno de 200 caracteres antes de incluir reticências.

Como usar

1. Insira as suas tags Open Graph: título, descrição, URL da imagem, nome do site e URL.
2. Veja lado a lado as pré-visualizações em tempo real dos formatos de card do Google, Facebook, Twitter, LinkedIn, WhatsApp, Slack, Discord e Pinterest.
3. Ajuste o comprimento do título, a descrição e as dimensões da imagem até a pré-visualização ficar perfeita em todas as plataformas.

Quando usar

• Antes de publicar um post de blog ou página de marketing que será compartilhada nas redes.
• Ao auditar um site existente cujos previews de compartilhamento aparecem quebrados ou sem imagem.
• Ao desenhar um novo modelo de imagem OG para confirmar que o título não cobre o visual.

Resultado

Antes de partilhar o seu novo post de blog no LinkedIn, verifique se a imagem OG não é cortada de forma estranha e se a descrição fica bem dentro do limite de 200 caracteres do cartão do Twitter.

Perguntas frequentes

Qual o tamanho ideal da imagem Open Graph?

1200x630 pixels é o padrão seguro. Facebook e LinkedIn renderizam em 1,91:1 e o card summary_large_image do Twitter segue a mesma proporção. Mantenha o arquivo abaixo de 5 MB e use JPEG ou PNG.

Por que o Facebook não atualiza o preview depois que mudei as meta tags?

O Facebook guarda os dados OG em cache por cerca de 24 horas. Cole a URL no Sharing Debugger da Meta e clique em «Scrape Again» para forçar uma nova leitura. O LinkedIn faz o mesmo via Post Inspector.

Preciso de tags twitter:* se já tenho tags og:*?

O Twitter cai de volta para og:title, og:description e og:image quando não encontra tags twitter:*, então uma página básica já funciona. Adicione twitter:card e twitter:image apenas quando quiser um título ou imagem específica para o Twitter.

Qual a diferença entre summary e summary_large_image no Twitter?

summary mostra uma miniatura quadrada ao lado do texto, boa para notícias e artigos. summary_large_image coloca uma imagem larga acima do texto, mais adequada para conteúdo visual como landing pages ou vídeos.

Posso usar um GIF animado como og:image?

As redes aceitam o GIF mas exibem só o primeiro quadro. Use um PNG ou JPEG estático com a informação principal visível nesse frame, ou converta a animação em um MP4 curto e referencie via og:video.

Ferramentas relacionadas