Para que serve
Quando alguém cola o endereço do seu site no WhatsApp, no Facebook ou no LinkedIn, o app lê o HTML da página e monta um cartão com imagem, título e descrição. Esse cartão vem das tags Open Graph, criadas originalmente pelo Facebook e usadas hoje por muitos serviços.
As tags básicas
Elas ficam dentro da área head da página:
- og:title: o título do cartão
- og:description: um resumo curto
- og:image: o endereço completo da imagem
- og:url: o endereço oficial da página
- og:type: o tipo, como website ou article
Cada uma é uma linha meta, com o atributo property para o nome e content para o valor. Alguns serviços, como o X, usam também tags próprias de cartão, mas costumam aproveitar as de Open Graph quando as outras faltam.
Imagem: o que cuidar
- Use o endereço absoluto, começando por https
- Uma proporção horizontal, perto de 1,91 por 1, é a mais usada. Confira a recomendação atual de cada plataforma, pois ela muda.
- Evite texto pequeno na imagem, porque a prévia aparece reduzida no celular
- Mantenha o arquivo leve para que carregue rápido
Como testar
- Publique a página com as tags.
- Cole o link em uma conversa com você mesmo no WhatsApp para ver o resultado.
- Use os depuradores de link oferecidos pelas redes para limpar o cache e revisar o que foi lido.
- Se a imagem não aparece, confira se o endereço abre direto no navegador e se não exige login.
Erros comuns
- Título longo demais, cortado no cartão
- Imagem em endereço que redireciona ou bloqueia robôs
- Mesmas tags em todas as páginas, o que repete a prévia em tudo
- Alterar a imagem e esperar atualização imediata
Se você usa um construtor de sites ou um CMS, procure o campo de compartilhamento social nas configurações da página antes de editar o código. Para entender o papel do HTML no conjunto, veja Front-end e back-end: o que cada um faz.
