Resumo: Conteúdo compartilhado nas redes sociais com tags Open Graph corretamente configuradas recebe até 2,5× mais engajamento do que publicações sem elas, de acordo com um relatório do Social Media Examiner de 2024.

Quando você compartilha um link no Facebook, LinkedIn, Twitter ou WhatsApp, a plataforma lê as meta tags Open Graph (OG) da sua página para gerar uma pré-visualização rica — um card com título, descrição e imagem. Se essas tags estiverem ausentes ou mal configuradas, a pré-visualização pode parecer quebrada, exibir a imagem errada ou mostrar uma descrição genérica que não gera cliques.

Nossa ferramenta OG Preview gratuita no sorank.com permite visualizar exatamente como sua página aparecerá quando compartilhada em cada plataforma social principal — antes de publicar. Detecte erros, otimize seus visuais e maximize o engajamento em tempo real.

O que são tags Open Graph?

Open Graph é um protocolo criado originalmente pelo Facebook em 2010 que permite que páginas web se tornem objetos ricos em um grafo social. Ao colocar tags <meta> específicas na seção <head> da sua página, você controla como as plataformas exibem seu conteúdo quando ele é compartilhado.

As tags Open Graph principais incluem:

og:title — O título exibido no card de compartilhamento. Mantenha-o abaixo de 60 caracteres para melhores resultados.

og:description — Uma descrição de apoio que aparece abaixo do título. Mire em 150–200 caracteres.

og:image — A imagem de pré-visualização. É o elemento visualmente mais impactante. Tamanho recomendado: 1200×630 pixels.

og:url — A URL canônica da página compartilhada.

og:type — Define o tipo de conteúdo (website, article, product, video, etc.).

og:site_name — O nome do seu site ou marca.

O Twitter usa sua própria variação chamada Twitter Cards, com tags como twitter:card, twitter:title, twitter:description e twitter:image. No entanto, o Twitter recorre às tags Open Graph se suas próprias tags não estiverem presentes.

Por que a pré-visualização OG importa para sua estratégia de SEO

Você pode se perguntar: qual a relação entre compartilhamento social e SEO? Embora os sinais sociais não sejam um fator de classificação direto do Google, os benefícios indiretos são significativos:

Mais tráfego das plataformas sociais: Um card de compartilhamento atraente e bem formatado aumenta dramaticamente as taxas de cliques das redes sociais. Mais visitantes dos canais sociais significa mais backlinks potenciais, menções de marca e sinais de engajamento.

Taxa de rejeição reduzida: Quando os usuários vêem uma pré-visualização precisa antes de clicar, sabem o que esperar. Esse alinhamento entre pré-visualização e conteúdo reduz as taxas de rejeição e melhora o tempo de permanência — ambos sinais positivos de experiência do usuário.

Consistência da marca: Cards de compartilhamento consistentes e profissionais em todas as plataformas reforçam a identidade da sua marca e constroem confiança com seu público.

Amplificação do compartilhamento de links: As pessoas são mais propensas a compartilhar conteúdo que tem uma pré-visualização atraente. Cada compartilhamento cria outra oportunidade para descoberta orgânica e potenciais backlinks.

Como usar a ferramenta OG Preview do Sorank

Nossa ferramenta OG Preview ajuda você a depurar e otimizar seus cards de compartilhamento social:

Passo 1: Insira a URL da página que deseja pré-visualizar. A ferramenta busca a página e lê todas as meta tags Open Graph e Twitter Card.

Passo 2: Visualize as pré-visualizações geradas para Facebook, Twitter/X, LinkedIn e WhatsApp. Cada plataforma renderiza os cards de compartilhamento de forma ligeiramente diferente, então nossa ferramenta mostra a aparência exata em cada uma.

Passo 3: Identifique problemas. A ferramenta destaca problemas comuns como tags ausentes, imagens muito pequenas, títulos truncados ou descrições que excedem os limites de caracteres recomendados.

Passo 4: Corrija e reteste. Após corrigir suas meta tags, reinsira a URL para verificar que todas as pré-visualizações agora estão perfeitas.

Erros comuns de tags OG e como corrigi-los

Até desenvolvedores experientes cometem erros com Open Graph. Aqui estão os problemas mais frequentes:

Tag og:image ausente: Este é o erro número um. Sem imagem, as plataformas mostram um card vazio ou puxam uma imagem aleatória da sua página. Sempre especifique uma imagem de alta qualidade de 1200×630 pixels.

Imagem muito pequena ou proporção errada: O Facebook exige imagens de pelo menos 200×200 pixels, mas recomenda 1200×630 para o formato de card grande. Imagens muito pequenas ou sem proporção 1,91:1 serão cortadas de forma estranha ou exibidas como miniatura pequena.

URLs relativos em vez de absolutos: Todos os valores de tags OG devem usar URLs absolutos (começando com https://). Caminhos relativos como /images/og.jpg não funcionarão nas plataformas sociais.

Tags duplicadas ou conflitantes: Ter múltiplas tags og:title ou og:image na mesma página confunde os crawlers. Certifique-se de que cada tag OG apareça exatamente uma vez.

Não limpar o cache: O Facebook e outras plataformas armazenam seus dados OG em cache de forma agressiva. Após atualizar suas tags, use o Sharing Debugger do Facebook para forçar um novo rastreamento e limpar a versão em cache.

Tags específicas do Twitter ausentes: Embora o Twitter recorra às tags OG, especificar twitter:card (com valor summary_large_image) garante que seu conteúdo obtenha o formato de imagem grande em vez do card de resumo pequeno.

Requisitos OG específicos por plataforma

Cada plataforma social tem seus próprios requisitos e particularidades:

Facebook: Tamanho mínimo de imagem 200×200px, recomendado 1200×630px. Suporta valores og:type como article, product e video. Armazena em cache agressivamente — use o Sharing Debugger para atualizar. Comprimento máximo do título: 60 caracteres. Comprimento máximo da descrição: 200 caracteres.

Twitter/X: Requer a meta tag twitter:card. Suporta os tipos summary (imagem pequena) e summary_large_image (imagem grande). Imagem mínima: 144×144px para summary, 300×157px para imagem grande. Recorre a tags OG quando as do Twitter estão ausentes.

LinkedIn: Usa diretamente as tags OG. Tamanho de imagem recomendado: 1200×627px. Suporta os tipos article e website. Tem sua própria ferramenta Post Inspector para depuração.

WhatsApp: Lê as tags OG para pré-visualizações de links. Requer que og:image seja servido via HTTPS. Armazena pré-visualizações no cache do dispositivo — a limpeza requer que o usuário limpe o cache do app.

Melhores práticas para o design da imagem OG

Sua imagem OG é o elemento mais importante do seu card de compartilhamento social. Siga estas diretrizes de design:

• Use 1200×630 pixels (proporção 1,91:1) para compatibilidade universal.
• Mantenha texto e elementos visuais importantes nos 80% centrais da imagem para considerar o corte específico de cada plataforma.
• Inclua o logotipo ou cores da sua marca para reconhecimento instantâneo.
• Use texto em negrito e legível com alto contraste — muitos usuários navegam nas redes sociais em dispositivos móveis.
• Mantenha o tamanho do arquivo abaixo de 5 MB (idealmente abaixo de 1 MB) para carregamento rápido.
• Use JPEG para fotografias e PNG para gráficos com sobreposições de texto.
• Crie imagens OG únicas para suas páginas mais importantes em vez de usar uma imagem genérica para todo o site.
• Teste sua imagem em fundo escuro, pois plataformas como Twitter/X suportam modo escuro.

Integrar tags OG com seu CMS

A maioria dos CMS e frameworks modernos suportam tags Open Graph nativamente ou através de plugins:

WordPress: Plugins como Yoast SEO ou Rank Math geram automaticamente tags OG baseadas no seu conteúdo. Você também pode personalizar a imagem e título social por página.

Webflow: As configurações Open Graph estão disponíveis no painel de configurações da página na aba Open Graph. Você pode definir título, descrição e imagem para cada página.

Next.js / React: Use o componente <Head> ou a API de metadata para adicionar tags OG programaticamente. Bibliotecas como next-seo simplificam este processo.

HTML estático: Adicione meta tags OG diretamente na seção <head> de cada página. Use nossa ferramenta Gerador de Meta Tags no sorank.com para criar o código automaticamente.

Independentemente da sua plataforma, use sempre nossa ferramenta OG Preview para verificar que suas tags são renderizadas corretamente em todas as plataformas sociais antes de publicar.