Resumo
O conteúdo compartilhado nas redes sociais com etiquetas Open Graph corretamente configuradas recebe até 2,5 vezes mais engagement do que as publicações sem elas, segundo um relatório de 2024 do Social Media Examiner.
Quer ir mais longe? Pergunte ao
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 enriquecida: um cartão com título, descrição e imagem. Se essas etiquetas estiverem ausentes ou mal configuradas, a pré-visualização pode parecer danificada, mostrar a imagem errada ou apresentar uma descrição genérica que não atrai cliques.
A nossa ferramenta gratuita de pré-visualização OG em sorank.com permite-lhe visualizar exatamente como a sua página aparecerá ao ser compartilhada em todas as principais plataformas sociais, antes de publicar. Detectar erros, otimizar os seus visuais e maximizar o engagement em tempo real.
O que são etiquetas Open Graph?
Open Graph é um protocolo criado originalmente pelo Facebook em 2010 que permite que as páginas web se tornem objetos enriquecidos num grafo social. Ao colocar etiquetas <meta> específicas na seção <head> da sua página, controla como as plataformas apresentam o seu conteúdo quando é compartilhado.
As principais etiquetas Open Graph incluem:
og:title, O título exibido no cartão de compartilhamento. Mantenha-o abaixo de 60 caracteres para melhores resultados.
og:description, Uma descrição complementar que aparece abaixo do título. Aponte para 150-200 caracteres.
og:image, A imagem de pré-visualização. Este é o elemento visualmente mais impactante. Tamanho recomendado: 1200×630 píxeis.
og:url, O URL canônico da página que está sendo compartilhada.
og:type, Define o tipo de conteúdo (site, article, product, video, etc.).
og:site_name, O nome do seu site ou marca.
O Twitter utiliza a sua própria variante chamada Twitter Cards, com etiquetas como twitter:card, twitter:title, twitter:description e twitter:image. No entanto, o Twitter recorrerá às etiquetas Open Graph se as suas próprias etiquetas não estiverem presentes.
Por que a pré-visualização OG é importante para a sua estratégia SEO
Você pode se perguntar: como o compartilhamento social se relaciona com o 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 cartão 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 engagement.
Taxa de rejeição reduzida: Quando os usuários veem uma pré-visualização precisa antes de clicar, sabem o que esperar. Esta coerência entre a pré-visualização e o 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: Cartões de compartilhamento consistentes e com aspecto profissional em todas as plataformas reforçam a identidade da sua marca e geram confiança com a sua audiência.
Amplificação do compartilhamento de links: As pessoas são mais propensas a compartilhar conteúdo que tem uma pré-visualização apelativa. Cada compartilhamento cria outra oportunidade para descoberta orgânica e potenciais backlinks.
Como utilizar a ferramenta de pré-visualização OG da Sorank
A nossa ferramenta de pré-visualização OG ajuda você a depurar e otimizar os seus cartões de compartilhamento social:
Passo 1: Insira o URL da página que quer pré-visualizar. A ferramenta obtém a página e lê todas as etiquetas meta Open Graph e Twitter Card.
Passo 2: Veja as pré-visualizações geradas para Facebook, Twitter/X, LinkedIn e WhatsApp. Cada plataforma renderiza os cartões de compartilhamento de forma ligeiramente diferente, por isso a nossa ferramenta lhe mostra o aspecto exato em cada uma delas.
Passo 3: Identifique problemas. A ferramenta destaca problemas comuns como etiquetas em falta, imagens demasiado pequenas, títulos truncados ou descrições que excedem os limites de caracteres recomendados.
Passo 4: Corrija e re-teste. Após corrigir as suas etiquetas meta, insira novamente o URL para verificar que todas as pré-visualizações ficaram perfeitas.
Erros comuns de etiquetas OG e como corrigi-los
Mesmo os programadores experientes cometem erros com Open Graph. Aqui estão os problemas mais frequentes que encontramos:
Etiqueta og:image em falta: Este é o erro número um. Sem imagem, as plataformas mostram um cartão em branco ou extraem uma imagem aleatória da sua página. Especifique sempre uma imagem de alta qualidade de 1200×630 píxeis.
Imagem demasiado pequena ou proporção errada: O Facebook requer que as imagens tenham pelo menos 200×200 píxeis, mas recomenda 1200×630 para o formato de cartão grande. Imagens demasiado pequenas ou sem uma proporção de 1,91:1 serão cortadas de forma desajeitada ou exibidas como uma miniatura pequena em vez de um cartão grande.
Usar URLs relativas em vez de URLs absolutas: Todos os valores das etiquetas OG devem usar URLs absolutas (que começam com https://). Caminhos relativos como /images/og.jpg não funcionarão nas plataformas sociais.
Etiquetas duplicadas ou em conflito: Ter múltiplas etiquetas og:title ou og:image na mesma página confunde os crawlers. Certifique-se de que cada etiqueta OG aparece exatamente uma vez.
Não limpar o cache: O Facebook e outras plataformas armazenam os seus dados OG em cache de forma agressiva. Após atualizar as suas tags, você precisa usar o Depurador de Compartilhamento do Facebook para forçar um novo scraping e apagar a versão em cache.
Etiquetas específicas do Twitter em falta: Embora o Twitter recorra às etiquetas OG, especificar twitter:card (com o valor summary_large_image) garante que o seu conteúdo obtenha o formato de imagem grande em vez do pequeno cartão de resumo.
Requisitos OG específicos de cada plataforma
Cada plataforma social tem os 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 de forma agressiva, use o Depurador de Compartilhamento para atualizar. Comprimento máximo do título: 60 caracteres. Comprimento máximo da descrição: 200 caracteres.
Twitter/X: Requer a etiqueta meta twitter:card. Suporta os tipos de cartão summary (imagem pequena) e summary_large_image (imagem grande). Imagem mínima: 144×144px para summary, 300×157px para imagem grande. Recorre às etiquetas OG quando as etiquetas do Twitter estão ausentes.
LinkedIn: Usa as etiquetas OG diretamente. Tamanho de imagem recomendado: 1200×627px. Suporta os tipos article e site. Tem a sua própria ferramenta Post Inspector para depuração.
WhatsApp: Lê as etiquetas OG para pré-visualizações de links. Requer que og:image seja servido via HTTPS. Armazena as pré-visualizações no cache do dispositivo; a limpeza requer que o usuário esvazie o cache do aplicativo.
Boas práticas para o design de imagens OG
A sua imagem OG é o elemento mais importante do seu cartão de compartilhamento social. Siga estas diretrizes de design:
• Use 1200×630 píxeis (proporção de aspecto 1,91:1) para compatibilidade universal.
• Mantenha os elementos de texto e visuais importantes dentro dos 80% centrais da imagem para levar em conta o recorte específico de cada plataforma.
• Inclua o logótipo ou as cores da sua marca para reconhecimento imediato.
• Use texto a negrito e legível com alto contraste, pois 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 as suas páginas mais importantes em vez de usar uma imagem genérica para todo o site.
• Teste a sua imagem num fundo escuro, pois plataformas como Twitter/X suportam o modo escuro.
Integração de etiquetas OG com o seu CMS
A maioria das modernas plataformas CMS e frameworks suportam etiquetas Open Graph nativamente ou através de plugins:
WordPress: Plugins como Yoast SEO ou Rank Math geram automaticamente etiquetas OG com base no seu conteúdo. Também pode personalizar a imagem social e o título 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. Pode definir o título, a descrição e a imagem para cada página.
Next.js / React: Use o componente <Head> ou a API de metadados para adicionar etiquetas OG programaticamente. Bibliotecas como next-seo simplificam este processo.
HTML estático: Adicione etiquetas meta OG diretamente na seção <head> de cada página. Use a nossa ferramenta Gerador de etiquetas meta em sorank.com para criar o código automaticamente.
Independentemente da sua plataforma, use sempre a nossa ferramenta de pré-visualização OG para verificar que as suas etiquetas são renderizadas corretamente em todas as plataformas sociais antes de publicar.
