O que é Open Graph?
O protocolo Open Graph (OG) foi criado pelo Facebook para padronizar como metadados de páginas da web são interpretados ao serem compartilhados. Antes dele, as redes sociais tentavam "adivinhar" qual imagem ou texto usar, frequentemente escolhendo errado.
Com as tags OG, você define explicitamente:
- Qual imagem deve aparecer (thumbnail).
- Qual título deve ser exibido (pode ser diferente da tag
<title>). - Qual descrição deve acompanhar o link.
Dimensões de Imagem Recomendadas
| Rede Social | Dimensão Ideal | Proporção | Nota |
|---|---|---|---|
| Facebook / LinkedIn | 1200 x 630 px | 1.91:1 | Padrão mais aceito globalmente. |
| Twitter (Large Card) | 1200 x 628 px | ~1.91:1 | Muito similar ao padrão Facebook. |
| Twitter (Summary) | 144 x 144 px | 1:1 | Quadrado, imagem pequena ao lado do texto. |
| 300 x 300 px | 1:1 | Recomendado quadrado e < 300KB. |
Validadores Oficiais (Debuggers)
Depois de adicionar as tags ao seu site, use estas ferramentas oficiais para limpar o cache das redes sociais e verificar se tudo está correto:
Perguntas Frequentes (FAQ)
As essenciais são
og:title, og:type, og:image e og:url. Sem elas, o compartilhamento pode ficar quebrado ou sem imagem. As tags do Twitter (twitter:card, etc.) são opcionais se você já tiver as do Open Graph, pois o Twitter costuma usar as tags OG como fallback, mas é boa prática incluí-las para controle total.
O WhatsApp é mais restritivo. A imagem deve ter menos de 300KB e dimensões mínimas (recomendado 300x300px ou maior). Se a imagem for muito pesada ou muito grande em pixels, o WhatsApp pode ignorá-la.
As redes sociais fazem cache (salvam uma cópia) das suas tags. Se você mudou a imagem mas continua aparecendo a antiga, use os "Validadores Oficiais" listados acima. Ao inserir sua URL neles, você força a rede social a visitar seu site novamente e atualizar as informações.