Meta tags Open Graph para redes sociais: guia completo
Quando alguém compartilha um link do seu site no WhatsApp, LinkedIn, Facebook ou X (Twitter), as meta tags Open Graph e Twitter Cards determinam o título, a descrição e a imagem que aparecem no preview. Um link com preview atrativo e informativo recebe muito mais cliques do que um link sem metadados configurados. O Gerador de Meta Tags da WikiPlus cria automaticamente todas as tags Open Graph e Twitter Cards necessárias, garantindo que seu conteúdo seja apresentado da melhor forma possível em todas as plataformas sociais.
O protocolo Open Graph: como funciona
O protocolo Open Graph foi criado pelo Facebook em 2010 e é hoje o padrão universal para metadados de compartilhamento social. Funciona através de meta tags com atributo property (em vez do name padrão) no <head> do HTML. As quatro tags básicas obrigatórias são: og:title (título do conteúdo), og:type (tipo: website, article, product, etc.), og:image (URL da imagem de preview), og:url (URL canônica da página). Tags recomendadas adicionais: og:description (resumo do conteúdo), og:site_name (nome do site), og:locale (idioma: pt_BR para português do Brasil). Quando um usuário compartilha a URL em qualquer plataforma que suporta Open Graph, o crawler da plataforma lê essas tags e cria automaticamente o card de preview. O Gerador de Meta Tags da WikiPlus cria todas essas tags com a sintaxe correta.
Twitter Cards: configuração para X/Twitter
Apesar de X (antigo Twitter) também suportar Open Graph, as Twitter Cards oferecem tipos específicos com mais controle sobre a aparência no feed. Os tipos principais são: summary (card pequeno com imagem quadrada), summary_large_image (card grande com imagem horizontal — o mais usado), app (para links de apps), player (para conteúdo de mídia). As tags essenciais: twitter:card (tipo do card), twitter:title (título), twitter:description (descrição), twitter:image (URL da imagem). Se og:title, og:description e og:image já estiverem definidos, o Twitter os usa como fallback quando as tags específicas de Twitter não estão presentes. Para projetos onde o Twitter é canal importante de distribuição, defina ambas as tags explicitamente para garantir controle total sobre a apresentação. O Gerador de Meta Tags da WikiPlus inclui as Twitter Cards no output gerado.
Imagens Open Graph: especificações e boas práticas
A imagem Open Graph é o elemento mais impactante no preview de compartilhamento — ela determina se o link se destaca no feed ou passa despercebido. Especificações técnicas: dimensão recomendada 1200×630 pixels (proporção 1.91:1). Tamanho mínimo: 600×315 pixels. Tamanho máximo de arquivo: menos de 8MB, mas idealmente menos de 200KB para carregamento rápido do preview. Formato: JPG para fotos, PNG para gráficos com texto. Evite imagens muito pequenas — plataformas sociais não as ampliam além de um certo ponto. Boas práticas de design: inclua o título da página ou marca visualmente na imagem. Use contraste alto para ser legível em tamanho reduzido. Evite texto muito pequeno que ficará ilegível no preview. Para sites com muitas páginas, considere criar um template de imagem OG e gerar versões específicas para cada página importante — o impacto no CTR justifica o esforço.
Testando e depurando meta tags de compartilhamento
Após implementar meta tags Open Graph, é essencial testar como aparecem nas diferentes plataformas. Ferramentas de debugging: Facebook Sharing Debugger (developers.facebook.com/tools/debug) mostra exatamente como o Facebook lerá as tags e permite forçar recache quando as tags mudam. LinkedIn Post Inspector verifica a aparência no LinkedIn. Twitter Card Validator (na versão antiga, agora via X Developer Platform). OpenGraph.xyz e a ferramenta de Pré-visualização Open Graph da WikiPlus permitem verificar o preview sem login nas plataformas. Problemas comuns: imagem não carregando (verifique que a URL é absoluta, começa com https e está acessível publicamente); texto cortado (verifique comprimento de título e description); cache desatualizado (use o debugger do Facebook para forçar recache). Essas ferramentas de teste devem ser usadas após cada mudança nas meta tags para garantir que o resultado final está correto.
Perguntas frequentes
- Qual é a diferença entre og:title e a tag <title> do HTML?
- A tag <title> é usada pelos navegadores (título da aba) e pelo Google nos SERPs. og:title é usado especificamente para previews em redes sociais. É uma boa prática mantê-los iguais ou muito similares, mas og:title pode ser mais descritivo sem a restrição de 60 caracteres do SEO title.
- WhatsApp usa Open Graph para gerar previews de links?
- Sim. WhatsApp lê meta tags Open Graph para gerar o preview de links compartilhados nas conversas. Por isso, configurar og:title, og:description e og:image corretamente é importante para a apresentação de links compartilhados via WhatsApp, que no Brasil é um canal de distribuição de conteúdo extremamente relevante.
- Quanto tempo o Facebook leva para atualizar o preview após mudança nas meta tags?
- O Facebook faz cache dos previews por até 30 dias. Para forçar a atualização imediata após mudança nas meta tags, use o Facebook Sharing Debugger (developers.facebook.com/tools/debug), cole a URL e clique em 'Raspar novamente' (Scrape Again). Isso força o Facebook a reler as meta tags imediatamente.