Resumo: O conteúdo partilhado 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.
Quando partilha um link no Facebook, LinkedIn, Twitter ou WhatsApp, a plataforma lê as etiquetas meta 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 partilhada em todas as principais plataformas sociais, antes de publicar. Detetar 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 secção <head> da sua página, controla como as plataformas apresentam o seu conteúdo quando é partilhado.
As principais etiquetas Open Graph incluem:
og:title, O título exibido no cartão de partilha. 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á a ser partilhada.
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 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
Pode questionar-se: como é que a partilha 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 partilha 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 utilizadores 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 utilizador.
Consistência da marca: Cartões de partilha consistentes e com aspeto profissional em todas as plataformas reforçam a identidade da sua marca e geram confiança com a sua audiência.
Amplificação da partilha de links: As pessoas são mais propensas a partilhar conteúdo que tem uma pré-visualização apelativa. Cada partilha 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-o a depurar e otimizar os seus cartões de partilha social:
Passo 1: Introduza 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 partilha de forma ligeiramente diferente, por isso a nossa ferramenta mostra-lhe o aspeto 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, introduza 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 a cache: O Facebook e outras plataformas guardam os seus dados OG na cache de forma agressiva. Após atualizar as suas etiquetas, precisa de usar o Depurador de Partilha 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. Guarda na cache de forma agressiva, use o Depurador de Partilha 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 website. 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. Guarda as pré-visualizações na cache do dispositivo; a limpeza requer que o utilizador esvazie a cache da aplicação.
Boas práticas para o design de imagens OG
A sua imagem OG é o elemento mais importante do seu cartão de partilha social. Siga estas diretrizes de design:
• Use 1200×630 píxeis (proporção de aspeto 1,91:1) para compatibilidade universal.
• Mantenha os elementos de texto e visuais importantes dentro dos 80% centrais da imagem para ter 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 utilizadores navegam nas redes sociais em dispositivos móveis.
• Mantenha o tamanho do ficheiro 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 definições Open Graph estão disponíveis no painel de definições da página no separador 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 secçã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.
.webp){kind=small}
.webp){kind=small}
.svg)
.svg)
