Open Graph: como controlar a prévia do seu link nas redes
O Open Graph define o título, a descrição e a imagem que aparecem quando você compartilha seu site. Quais tags usar, o que a Meta diz e como atualizar a prévia.
Você manda a um cliente o link da sua página de serviços e, no chat, aparece uma caixa cinza, com o título “Início” e nenhuma imagem. Ninguém clica nisso. A página era boa, mas a primeira impressão veio de uma prévia descuidada.
O que é o Open Graph e para que serve?
O Open Graph é um protocolo de meta tags que diz às plataformas qual título, descrição e imagem mostrar quando alguém compartilha seu link. Elas ficam no head de cada página e, segundo o protocolo oficial, transformam uma página web em um objeto com identidade própria dentro das redes.
Sem elas, a plataforma adivinha. A Meta diz isso na sua documentação para webmasters: sem as tags, o rastreador usa regras internas para escolher título, descrição e imagem. Você perde o controle sobre o que seus clientes veem.
Quais tags preciso no mínimo?
Você precisa de quatro: og:title, og:type, og:image e og:url. São as que o protocolo marca como obrigatórias em cada página. Vale também acrescentar as recomendadas.
| Tag | O que faz |
|---|---|
| og:title | O título da página como aparecerá ao ser compartilhada |
| og:type | O tipo de conteúdo, por exemplo website ou article |
| og:image | O endereço da imagem que representa a página |
| og:url | A URL canônica, seu identificador permanente |
| og:description | Uma ou duas frases que resumem a página (recomendada) |
| og:image:alt | Descreve o que a imagem mostra (recomendada se houver og:image) |
O protocolo também define og:image:width, og:image:height e og:image:type. A Meta pede que você declare a largura e a altura da imagem para que ela carregue bem já na primeira vez em que é compartilhada.
Qual imagem devo usar?
Use uma imagem própria para cada página, nítida e declarada com sua largura e sua altura. Nas suas boas práticas de conteúdo compartilhado, a Meta indica que, para ficar boa em telas de alta resolução, as imagens devem ter pelo menos 1080 pixels de largura. Esse mesmo guia explica que declarar as dimensões permite que o rastreador mostre a imagem imediatamente, em vez de baixá-la e processá-la depois.
Quanto ao formato de arquivo, a documentação da Meta lista como tipos aceitos para og:image:type: image/jpeg, image/gif e image/png.
Um detalhe que ajuda pessoas com deficiência visual: o protocolo indica que, se você define uma imagem, deve definir também seu texto alternativo com og:image:alt.
Por que meu link continua mostrando a imagem antiga?
Porque a plataforma guarda a imagem em cache de acordo com a URL e não a altera enquanto a URL for a mesma. A Meta explica assim: as imagens ficam em cache de acordo com a URL e não são atualizadas a menos que a URL mude. Se você substituir o arquivo portada.webp por outro com o mesmo nome, a prévia continuará mostrando a antiga.
Erro comum: sobrescrever a imagem com o mesmo nome de arquivo e esperar que as redes a atualizem sozinhas. Envie a nova imagem com outro nome e atualize o valor de og:image.
O mesmo acontece com páginas que mudam de título ou de foto depois de campanhas. Se você vai lançar uma promoção, deixe as tags prontas antes de começar a compartilhar. No guia sobre títulos e meta descrições que o Google realmente mostra você vê o equivalente para o buscador.
Como reviso e atualizo a prévia?
Cole a URL no Sharing Debugger da Meta: ele mostra as tags que lê e os erros ou avisos que encontra. Segundo a documentação, essa ferramenta também força uma nova leitura da sua página, então serve para atualizar a prévia depois de corrigir.
Uma rotina curta para revisar suas páginas:
- Abra as cinco páginas que você mais compartilha: início, serviços, contato e seus guias mais vistos.
- Confira que cada uma tenha as quatro tags básicas e a og:description.
- Confirme que a imagem existe e que você declara sua largura e sua altura.
- Passe cada URL pelo Sharing Debugger e corrija os avisos.
- Verifique se seu servidor suporta compressão gzip ou deflate: a Meta exige isso para que o rastreador consiga ler seu site.
Se você compartilha muito por mensagens, também ajuda ter links limpos e com mensagem pronta: veja como criar um link e QR do WhatsApp com mensagem preenchida. E se o seu site está em vários idiomas, cada versão precisa das suas próprias tags; o guia de hreflang para sites em vários idiomas ajuda a organizar isso. Para medir quantas visitas chegam por esses links, veja como usar UTM no GA4.
Em resumo
Voltando ao link com a caixa cinza: a solução não é redesenhar sua página, é declarar quatro tags, acrescentar uma descrição e uma imagem própria com suas medidas. Quando você trocar a imagem, troque também a URL dela e confira o resultado no Sharing Debugger. Se você quer que seu site já saia com tudo isso resolvido, conheça nosso serviço de desenvolvimento web.
Perguntas frequentes
Quais tags Open Graph são obrigatórias?
Segundo o protocolo em ogp.me, quatro: og:title, og:type, og:image e og:url. A og:description é opcional, mas recomendada.
Por que meu link mostra uma imagem antiga?
A Meta explica que as imagens ficam em cache de acordo com a URL e só são atualizadas quando a URL muda. Envie a nova imagem com outro nome de arquivo.
Como vejo o que o Facebook lê da minha página?
Com o Sharing Debugger da Meta: você cola a URL e ele mostra as tags que lê, os erros e os avisos, e ainda força uma nova leitura.
Que tamanho a imagem deve ter?
A Meta recomenda imagens com pelo menos 1080 pixels de largura para ficarem boas em telas de alta resolução, e declarar og:image:width e og:image:height.
O Open Graph melhora minha posição no Google?
A função dele é controlar como seu link aparece quando alguém o compartilha, não dar posições no Google. Para a busca, cuide do título e da meta descrição.
Não fique só na teoria: aplique no seu negócio
Implementamos Desenvolvimento web de ponta a ponta, com a sua operação real. A primeira conversa não tem custo.
