Tentei seguir esta pergunta: Forneça uma imagem para compartilhamento de link do Whatsapp

Eu criei uma página da web HTML simples com as metatags básicas do Facebook:

<!--FACEBOOK-->
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas />
<meta property="og:image" content="http://pollosweb.wesped.es/programa_pollos/play.png" />        

O linter do Facebook valida corretamente e no Facebook mostra perfeito, mas quando tento compartilhar pelo WhatsApp a imagem não aparece.

Estou testando no WhatsApp no ​​Android

→ Este é o URL da página da Web de amostra

Eu acredito que você precisa adicionar itempropà og:imagemetatag, ter o tamanho da imagem definido para 256x256e também não faria mal adicionar as propriedades site_name, typee updated_time:)

<meta property="og:site_name" content="San Roque 2014 Pollos">
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas" />
<meta property="og:image" itemprop="image" content="http://pollosweb.wesped.es/programa_pollos/play.png">
<meta property="og:type" content="website" />
<meta property="og:updated_time" content="1440432930" />

Você pode ver essas metatags em ação, por exemplo, no Google Maps .
Depois de alterar suas metatags, pode ser necessário esperar um pouco para que os caches possíveis sejam atualizados.

Você pode depurar / verificar meta tags Open Graph no Facebook Debugger.
Se você puder ver todas as suas tags lá, então os sites / aplicativos onde suas tags não estão sendo exibidas corretamente podem ter requisitos diferentes para tags Open Graph.

EDIT:
Se você for especificar uma imagem por um HTTP-Securelink, você precisa usar em og:image:secure_urlvez de og:image.

EDIT2:
Você também precisa especificar og:type, pois é um dos quatro parâmetros básicos necessários.
<meta property="og:type" content="website" />deve levá-lo na direção certa.

Eu tive o mesmo problema e o problema era o tamanho da imagem. O Whatsapp não oferece suporte a imagens com tamanho superior a 300 KB.

Portanto, a propriedade mais importante para exibir imagens no Whatsapp é:

<meta property="og:image" content="url_image">

E o tamanho da imagem a ser exibida deve ser inferior a 300 KB

Eu também enfrento esse problema. Finalmente, resolvi

<meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" />

Propriedade da minha imagem

1. Dimensão: 300X200
2. Tamanho: <300 KB
3. URL: http://yourdomain.com/yourfolder/imagename.png

Certifique-se de que no nome da imagem não haja espaço, se você tiver duas palavras, use o sinal de sublinhado

Depois de passar meses tentando descobrir isso, finalmente resolvi o problema. Aqui está minha solução:

<!-- MS, fb & Whatsapp -->

<!-- MS Tile - for Microsoft apps-->
<meta name="msapplication-TileImage" content="http://www.example.com/image01.jpg">    

<!-- fb & Whatsapp -->

<!-- Site Name, Title, and Description to be displayed -->
<meta property="og:site_name" content="The Rock Photo Studio">
<meta property="og:title" content="The Rock Photo Studio in Florida">
<meta property="og:description" content="The best photo studio for your events">

<!-- Image to display -->
<!-- Replace   «example.com/image01.jpg» with your own -->
<meta property="og:image" content="http://www.example.com/image01.jpg">

<!-- No need to change anything here -->
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg">

<!-- Size of image. Any size up to 300. Anything above 300px will not work in WhatsApp -->
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">

<!-- Website to visit when clicked in fb or WhatsApp-->
<meta property="og:url" content="http://www.example.com">

Copie o texto acima, cole na área principal do site. FECHE seu aplicativo Whatsapp, reabra, ENTÃO teste. Não há necessidade de limpar o cache e NÃO É NECESSÁRIO LIMPAR DADOS.

Bênçãos para todos!

Encontrei a solução aqui. Link de visualização do Whatsapp postado em 2 de março

E você deve ver funcionando

Existem dois tipos de código. Primeiro meta og: imagem dentro de <head>

<meta property="og:image" content="url_image">

Esquema de miniatura de schema.org dentro de <body>

<link itemprop="thumbnailUrl" href="url_image"> 
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> 
  <link itemprop="url" href="url_image"> 
</span>

Espero esta ajuda. Obrigado.

Não sei sobre o número mínimo de metatags necessárias para trabalhar no whatsapp, encontrei isso em algum lugar e funcionou para mim perfeitamente. Nota: a resolução da imagem é 256 x 256.

   <head>
    <meta property="og:site_name" content="sitename" />
    <meta property="og:title" content="title">
    <meta property="og:description" content="description">
    <meta property="og:image" itemprop="image" content="http://www.yoursite.com/yourimage.jpg">
    <link itemprop="thumbnailUrl" href="http://www.yoursite.com/yourimage.jpg"> 
    <meta property="og:image:type" content="image/jpeg">
    <meta property="og:updated_time" content="updatedtime">
    <meta property="og:locale" content="en_GB" />
    </head>

    <body>
    <span itemprop="image" itemscope itemtype="image/jpeg"> 
      <link itemprop="url" href="http://www.yoursite.com/yourimage.jpg"> 
    </span>

    </body>

Limpe seus dados e cache do Whatsapp (ou use outro Whatsapp)!

Android Phone : Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.

Seja cuidadoso ! Faça backup de suas mensagens antes desta ação.

Então o resultado: antes e depois de limpar os dados e cache do WhatsApp

Informações adicionais úteis:

Você pode fornecer várias imagens og:, o whatsapp usará a última. Isso ajudará com o problema de que, por exemplo, o Facebook deseja a proporção de 1,91: 1 e o Whatsapp 1: 1

https://stackoverflow.com/a/61078968/8486854

Em resposta a https://stackoverflow.com/a/35785393/1518500

Experimente a versão atualizada para schema.org

<span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"> 
 <link itemprop="url" href="imgurlHere">
 <meta itemprop="width" content="1200">
 <meta itemprop="height" content="800">
</span>

ou usando o formato json-ld do google

<script type="application/ld+json">
 {
"@context": "http://schema.org/",
"@type": "ImageObject",
 "url": "ImgURLhere",
    "height": 800,
    "width": 1200

 }
 </script>

Para todos ainda tendo esse problema e para mim nenhuma das soluções postadas deu certo.

Eu tive o mesmo problema. A imagem estava sendo exibida corretamente em todas as outras caixas de diálogo de compartilhamento. Apenas o WhatsApp não conseguiu exibir a imagem, embora o depurador do Facebook tenha a tag og: image corretamente.

A solução que funcionou para mim: estou usando o firebase. Para conteúdo carregado em seu armazenamento, você obtém um URL de download exclusivo com um token de mídia. Algo como:

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/ ? alt = media & token = YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY

Usei este URL na meta tag og: image. Funcionou com o Facebook etc., mas parece que o WhatsApp não conseguiu baixar a imagem deste URL. Em vez disso, você precisa incluir a imagem no diretório do projeto e usar este link para a tag og: image. Agora também funciona bem no WhatsApp.

Antes (não funcionava no WhatsApp, mas sim no Facebook etc.)

<meta property="og:image" itemprop="image" content="https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/your_image?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY">

Depois (agora trabalhando em todos os diálogos compartilhados testados, incluindo WhatsApp)

<meta property="og:image" itemprop="image" content="https://domain_name/path_to_image">

Espero que possa ajudar alguns de vocês :)

Documentei a solução detalhada perfeita aqui - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html Existem sete etapas a serem seguidas para obter a visualização perfeita.

1. Título: Adicione um título rico em palavras-chave à sua página da web com no máximo 65 caracteres.

2. Meta descrição: Descreva sua página da web em no máximo 155 caracteres.

3. og: título: máximo de 35 caracteres.

4. og: url: Link completo para o endereço da sua página da web.

5. og: descrição: Máximo de 65 caracteres.

6. og: imagem: Imagem (JPG ou PNG) de tamanho inferior a 300 KB e dimensão mínima de 300 x 200 pixels é recomendada.

7. favicon: Um pequeno ícone com as dimensões de 32 x 32 pixels.

Na página acima, você tem as especificações necessárias, o limite de caracteres e as tags de amostra. Faça um voto positivo quando achar que é satisfatório.

Espero que ajude:

<meta property="og:title" content="Title goes here">
<meta property="og:site_name" content="Site name">
<meta property="og:image" content="imageURLShouldBeFromSameDomainName">
<meta property="og:image:width" content="640">
<meta property="og:image:height" content="300">

Observe o imgURL que deve ser hospedado no mesmo domínio, ou ele não aparecerá no whatsapp. Tentei carregar um url da Amazon, a visualização da imagem não está funcionando.

No meu caso, adicionar a meta tag abaixo resolveu o problema. Eu estava usando conteúdo em árabe e tive que adicionar para fazer a imagem aparecer no WhatsApp:

<meta property='og:locale' content='ar_AR' />

Nota: Se você estiver usando conteúdo em inglês, não há necessidade de adicionar esta metatag, pois o valor padrão é inglês.

Se depois de todas essas dicas, a miniatura ainda não estiver aparecendo, tente o seguinte:

Meu problema era que as aspas duplas dos atributos og estavam sendo removidas durante a construção para produção (npm run build). O módulo Minify estava fazendo isso.

Portanto, a solução foi cancelar essa remoção, definindo o atributo removeAttributeQuotes como false:

minify: {
    ...
    removeAttributeQuotes: false,
    ...
}

Em meu ambiente de desenvolvimento, eu o configurei no arquivo "webpack.prod.conf.js". Defina-o em seu arquivo equivalente.

Basta reconstruir e agora está funcionando.

Você só precisa digitar a mensagem com "http: //" no início. Por exemplo: http://www.google.com mostra a imagem em miniatura, mas www.google.com não.

Dados do Open Graph:

<meta property="og:title" content="Title of your website | website.com"/>
<meta property="og:type" content="Most popular business directory of Bangladesh"/>
<meta property="og:url" content="http://www.website.com/"/>
<meta property="og:image" content="http://www.moumaachi.com/images/dhaka-city.jpg"/>
<meta property="og:site_name" content="@website"/>
<meta property="fb:admins" content="Author"/>
<meta property="og:description" content="website.com is your online business directory of Country"/>

Apenas estes 3 Tag parecem ser necessárias ( og:title, twitter:description, rel="icon"):

<meta property="og:title" content="San Roque 2014 Pollos" />

<meta name="twitter:description" property="og:description" itemprop="description" content="Programa de fiestas" />

<link rel="icon" type="image/png" href="https://images.weserv.nl/?url=http://pollosweb.wesped.es/programa_pollos/play.png&w=192&height=192" sizes="192x192" />

Experimentando / jogando

A maneira mais fácil de experimentar para mim foi com CodeSandbox seguindo estas etapas:

• Crie um aplicativo Vanilla com https://codesandbox.io/s/
• Modifique suas metatags de acordo no index.htmlarquivo
• Salve o arquivo ( ctrl+s) que bifurcaria o aplicativo e geraria seu próprio url exclusivo
• Cole esse url no WhatsApp para ver a visualização (você nem precisa enviar uma mensagem)
• Faça alterações nas metatags
• Modifique o url - adicione um único caractere no final do url. Isso descarta a "visualização em cache anterior"

Cotações obrigatórias

Apenas certifique-se de SEMPRE colocar aspas e aspas de fechamento porque o WhatsApp é sensível a isso. Seu exemplo acima não tem uma cotação de fechamento para o seu og:description.

Para quem ainda está passando por isso, descobri que as imagens veiculadas no Amazon S3 não funcionam para o aplicativo móvel WhatsApp (Android e iOS, mas o aplicativo para desktop Mac funcionou bem). É muito possível que nossas configurações de AWS causem isso, mas percebi o padrão em outros sites também (por exemplo, este com og:imageum domínio que atinge um https://s3.amazonaws.com).

Não houve problemas em nenhuma outra plataforma que tentei, apenas aplicativos móveis WhatsApp. Assim que apontei meu<meta property="og:image" content="https://some-non-aws-location" /> para outro URL público, como um arquivo do Google Drive (compartilhado publicamente, é claro), funcionou bem.

Também tentei comprometer a imagem em nosso repo, que é hospedado e implantado na AWS com um domínio personalizado, e também não funcionou. Portanto, a AWS ainda parece ser a culpada. Espero que isso ajude alguém!

Eu segui todas as instruções nas respostas aqui, e ainda não consegui fazer funcionar. Parece que o WhatsApp também requer a extensão para exibir a imagem.

Portanto, para uma tag apontando para um jpeg:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid"/>

Altere a API para permitir a extensão e usar:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid.jpeg"/>

e então parece funcionar ...

Tive o mesmo problema, finalmente consegui funcionar depois de algumas tentativas. Aqui estão as 8 tags html que usei na minha página da web para fazer a visualização funcionar:

Na <head>tag:

<meta property="og:title" content="ABC Blabla 2020 Friday" />
<meta property="og:url" content="https://bla123.neocities.org/mp/friday.html" />
<meta property="og:description" content="Photo Album">
<meta property="og:image" itemprop="image" content="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG"/>
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_GB" />

Na <body>tag:

<link itemprop="thumbnailUrl" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">

<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">
</span>

Essas 8 tags (6 na cabeça, 2 no corpo) funcionaram perfeitamente.

Dicas:

1. Use o URL do local exato da imagem em vez do formato do diretório, ou seja, não use images / OG_thumb.jpg

2. Extensão de arquivo sensível ao caso: se o nome da extensão da imagem em seu provedor de hospedagem for ".JPG", não use ".jpg" ou ".jpeg '. Observei que, com base no provedor de hospedagem e o erro de combinação do navegador pode ou não ocorrer, então para ser seguro é mais fácil apenas combinar o caso da extensão do arquivo.

3. Depois de realizar as etapas acima, se a visualização em miniatura ainda não estiver aparecendo na mensagem do WhatsApp:

uma. Force a parada do aplicativo móvel (tentei no Android) e tente novamente

b. Use a ferramenta online para visualizar a tag OG, por exemplo, eu usei: https://searchenginereports.net/open-graph-checker

c. No navegador móvel, cole o link direto para o polegar OG e atualize o navegador 4-5 vezes. por exemplo, https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

Novembro de 2020: Como experimentei, essas metatags são obrigatórias e afetam o que você vê no link compartilhado no Whatsapp e WhatsApp-thumbnail:

<head>
 <meta content='myTitle' property='og:title'/>
  <meta content="myDescription" property="og:Description"/>
  <meta property="og:type" content= "website" />
  <meta property="og:image" itemprop="image primaryImageOfPage" content="https://i.ibb.co/1GRpwND/600px-Approve-icon-svg.png" />
</head>

e dentro <body> :

<a href="https://wa.me/?text=https://myaddress.blogspot.com/2020/11/try-16.html" target="_blank" rel="nofollow">Hello whatsApp</a>

Mais explicação:

1- Suponha que você tenha <meta content='example.com/page1' property='og:url'/>e dentro do corpo ao qual se refere <a href="https://wa.me/?text=example.com/page2" >Hello whatsApp</a>, o og:imagee og:descriptionda página example.com/page2será renderizado no WhatsApp conforme você se referiu no seu link no corpo (talvez óbvio).

2-Quando você add/changeabre alguma tag de gráfico como og:description, e novamente você clica na sua <a></a>tag na sua página / corpo, o que você vê no WhatsApp não muda a menos que você altere a href="I am a new URL"sua <a></a>tag ou limpe o cache do WhatsApp !!

3-Tentei Png/jpgimagens, todas com menos de 300 kb de tamanho e todas maiores que 300 * 300 em pixels, e o conteúdo da imagem era um https ou um httpurl, o código acima suporta os dois (não é necessário og:image:secure_url).

4-Cada vez que você adiciona / altera ogconteúdos, para ter uma miniatura no WhatsApp, as alterações não afetam na primeira tentativa !! e teve sucesso na segunda tentativa. Muito estranho !

Esta solução funciona para mim:

    <meta property="og:title" content="Testing Title" />
    <meta
      property="og:description"
      content="This is best way to view your Time Table & Join Meetings"
    />
    <meta
      property="og:image"
      itemprop="image"
      content="//upload.wikimedia.org/wikipedia/commons/d/d4/JPEG_example_image_decompressed.jpg"
    />
    <meta property="og:url" content="https://google.com/" />
    <meta property="og:type" content="website" />
    <meta property="og:image:type" content="image/jpeg" />

testado em codesandbox.io

aqui está o link: https://l8ogr.csb.app/

uma coisinha boba fez essa mágica, removendo " http" ou "https " do URL da imagem

se o URL da sua imagem for ex: https://test.com/img.jpegpara//test.com/img.jpeg

<meta property="og:image" itemprop="image" content="//test.com/img.jpg"/>