og:image Não Aparecendo no WhatsApp no Android: Solução
Resposta Rápida
Para exibir corretamente a miniatura do link no WhatsApp, certifique-se de que a meta tag og:image está configurada corretamente:
- A meta tag deve estar localizada na seção
<head>da página. - O link para a imagem em
og:imagedeve ser uma URL absoluta. - O tamanho da imagem deve ser de pelo menos 300x200 pixels, com um tamanho de arquivo não superior a 300 KB.
Exemplo:
<meta property="og:image" content="https://exemplo.com/imagem.jpg" />Para verificar as alterações realizadas, utilize o Depurador de URL do Facebook e certifique-se de que a imagem é acessível ao servidor.
Configurações do Open Graph e Compartilhamento de Links no WhatsApp
O WhatsApp depende das tags Open Graph (OG) para criar prévias de links. No entanto, a exibição correta da miniatura requer a adesão às seguintes condições:
-
Tamanho da Imagem: Para um carregamento rápido, o WhatsApp recomenda o uso de imagens com tamanho de 300x200 pixels e com peso de até 300 KB.
-
Fornecimento de Dimensões da Imagem: As tags
og:image:widtheog:image:heighteliminam problemas com o corte incorreto da imagem.<meta property="og:image:width" content="300" /> <meta property="og:image:height" content="200" /> -
Uso de URLs Seguras: Ao usar o protocolo HTTPS, a tag
og:image:secure_urlé relevante.<meta property="og:image:secure_url" content="https://exemplo.com/imagem.jpg" /> -
Definição de Dados Adicionais: As tags
og:site_name,og:typeeog:updated_timemelhoram a visualização e a funcionalidade do site.<meta property="og:site_name" content="Site de Exemplo" /> <meta property="og:type" content="website" /> <meta property="og:updated_time" content="2023-04-01T20:00:00+0000" /> -
Verificação de Alterações: Todas as alterações devem ser verificadas por meio do Depurador do Facebook. Pode ser necessário atualizar o WhatsApp para atualizar os metadados.
Integração com Schema.org para SEO Aprimorado
Integrar com Schema.org pode agregar maior valor ao seu og:image:
-
Coloque as meta tags OG na seção
<head>.<meta property="og:image" content="https://exemplo.com/imagem.jpg" /> -
No
<body>, use um elemento com o esquema Thumbnail eitemprop="thumbnailUrl".<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> <link itemprop="url" href="https://exemplo.com/imagem.jpg"> </span>
A marcação de dados estruturados permite uma transmissão mais precisa de informações sobre o conteúdo do site para motores de busca e plataformas de mensagens.
Visualização
Você pode pensar no og:image como o item central que decora a mesa para uma refeição:
Mesa sem decorações:
[ Prato 🍽️ | Talheres 🍴 | Guardanapo 🍽️ | (Espaço Vazio) ]
Mesa com um item decorativo:
[ Prato 🍽️ | Talheres 🍴 | Guardanapo 🍽️ | **Vaso com Flores** 🏺]A meta tag og:image é semelhante ao vaso com flores na sua mesa da web:
<meta property="og:image" content="URL_do_Vaso_Florido.jpg" />Assim como o vaso chama atenção para a mesa, og:image garante que a prévia do link no WhatsApp exiba a imagem que você selecionou.
Para Usuários Avançados: og:image para Maior Compatibilidade em Redes Sociais
Configure og:image para que a imagem exiba perfeitamente no WhatsApp e em outras redes sociais:
-
Adaptação a Várias Plataformas: Escolha os tamanhos de
og:imagecom base nas características dos diferentes dispositivos e plataformas.<meta property="og:image" content="https://exemplo.com/gato-feliz-300x200.jpg" /> <meta property="og:image:alt" content="Gato Feliz" /> -
Detalhamento: Adicione meta tags para MS Tile para garantir total funcionalidade.
<meta name="msapplication-TileImage" content="https://exemplo.com/gato-feliz-tile.jpg" /> -
Resolução de Discrepâncias: Considere a exibição diferente de imagens no WhatsApp no Android e em outras plataformas, verificando a marcação em diversos dispositivos.
Recursos Úteis
- Protocolo Open Graph — um guia detalhado sobre como usar a tag
<meta>e og:image. - Depurador de Compartilhamento - Meta para Desenvolvedores — ferramenta do Facebook para verificar Open Graph.
- Introdução ao Trabalho com Dados Estruturados — noções básicas do funcionamento de bots de busca com tags
<meta>e dados estruturados. <meta>: Elemento de Metadados — uma visão geral detalhada sobre as tags meta HTML no MDN Web Docs.- Validador de Marcação W3C — validação de HTML e correção do Open Graph.
- Tags Meta Essenciais para Mídias Sociais — guia do CSS-Tricks sobre como otimizar og:image.
- Tipos de Mídia — definições padrão para Content-Type necessário para og:image.