Forneça uma imagem para o compartilhamento de links do WhatsApp

Como podemos incluir uma imagem em nosso site para ser exibida no WhatsApp quando compartilhamos um link como este?

Normas 2020

São necessárias algumas etapas para obter a visualização perfeita para WhatsApp, Twitter, Facebook e ícones de favoritos para PCs e dispositivos móveis. Se você gosta de ler, vá para ogp.me - mas certifique-se de ler as etapas 1 a 6 nesta resposta para obter a melhor visualização do WhatsApp.

Observação: alguns aplicativos ou sites usam cache ou armazenam a visualização do site no banco de dados. Isso significa que, ao testar seu link no WhatsApp ou no Facebook, por exemplo, você provavelmente não verá nenhuma diferença imediatamente. Usar outro link (outra página) fará o truque. Porém, assim que você usar esse link uma vez, esta seção "observe" será iniciada novamente.

Etapa 1: título

Máximo de 65 caracteres

<title>your keyword rich title of the website and/or webpage</title>

Etapa 2: descrição

Máximo de 155 caracteres

<meta name="description" content="description of your website/webpage, make sure you use keywords!">

Etapa 3: og: title

Máximo de 35 caracteres

<meta property="og:title" content="short title of your website/webpage" />

Etapa 4: og: url

Link completo para o endereço da página atual

<meta property="og:url" content="https://www.example.com/webpage/" />

Etapa 5: og: description

Máximo 65 caracteres

<meta property="og:description" content="description of your website/webpage">

Etapa 6: og: image

Imagem (JPG ou PNG) com tamanho menor que 300 KB e dimensões mínimas de 300 x 200 ^*

<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">

^* @RichDeBourke mencionou isso para mim, mas aparentemente o WhatsApp aumentou seu tamanho máximo de imagem (dimensões e tamanho do arquivo). Fiz alguns testes: ele não funciona sempre de forma consistente em todos os dispositivos. Testei imagens de 2.x Mb e até isso parecia funcionar 9/10 vezes. <300 KB é a abordagem mais segura, mas você deve ficar bem ao usar imagens maiores a partir de 18-02-2020. Eu recomendaria manter o tamanho do arquivo abaixo de 2 MB. E definitivamente jogue sua imagem através do TinyPNG ou qualquer outro algoritmo de compactação de imagem, se você ainda não o tiver.

Se você concluiu as etapas acima, agora pode ver sua visualização no WhatsApp! No entanto, esteja ciente da seção "observe" acima.

Etapa 7: og: type

Para que seu objeto seja representado no gráfico, você precisa especificar seu tipo. Aqui está uma lista dos tipos globais disponíveis: http://ogp.me/#types . Você também pode especificar seus próprios tipos.

<meta property="og:type" content="article" />

Etapa 8: og: locale

A localidade do recurso. Você também pode usar og: locale: alternate se tiver outras traduções de idiomas disponíveis.

Se você não especificar og: locale, o padrão será en_US.

<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />

Etapa 9: Twitter

Para o melhor suporte do Twitter, leia isso .

Etapa 10: Facebook

Para o melhor suporte do Facebook, leia isso .

Etapa 11: favicon

Para obter o melhor suporte de favicon para todos os navegadores e dispositivos, leia isso .

Etapa 12 do bônus: vídeo / áudio

Também é possível compartilhar áudio / vídeo. O Facebook e o Twitter, por exemplo, compartilham vídeos muito bem. Leia ogp.me .

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

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

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

E o tamanho da imagem a ser exibida deve ser menor que 300 KB .

Se o problema persistir, leia também a resposta para essa pergunta semelhante

Acho que não há lista branca no whatsapp, pois encontrei uma solução que funcionou para mim. Faça o seguinte. insira 3 meta tags:

<meta property="og:image" content="http://yourimage_with_complete_URL.png"/>  
<meta property="og:title" content="Your Title"/>  
<meta property="og:description" content="Your description."/>  

Sua imagem deve estar no formato .png e na dimensão 600x600px e deve ser denominada 'logo-yoursite.png' (uma vez que funcionou para mim, APENAS COMO ISSO)

Não se esqueça de inserir o link para whatsapp no ​​seu site:

<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>

Faça isso e você estará bem feito!

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

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

Meta Descrição: descreva sua página da web com no máximo 155 caracteres.

og: title: Máximo de 35 caracteres.

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

og: description: Máximo de 65 caracteres.

og: image: Recomenda-se imagem (JPG ou PNG) de tamanho inferior a 300 KB e dimensão mínima de 300 x 200 pixels.

favicon: um pequeno ícone de dimensões 32 x 32 pixels.

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

Eu gostaria de chamar a atenção para o fato de que um simples <meta property="og:image" content="image.png" />, como sugerido em algum lugar acima, não funciona para mim (isso de fato me deixou em loop por semanas agora). O que funciona é um URL absoluto:
<meta property="og:image" content="https://domainname.com/image.png" />

ou começando com uma barra (se a imagem estiver no diretório raiz):
<meta property="og:image" content="/image.png" />

(Eu adicionaria isso como um comentário, mas ainda não tenho permissão. Os moderadores ficam à vontade para mudar isso, se mais apropriado.)

Também tenho tentado fazer isso e adicionei todas as metatags corretas:

<meta property="og:image" itemprop="image" content="image_url" />
<meta property="og:image:url" itemprop="image" content="image_url" />
<meta property="og:image:type" content="image/png" />

mas ainda não consegui ver a imagem ao compartilhar meu link no WhatsApp.

Descobri que o WhatsApp também faz algum tipo de cache da imagem e das informações da URL, não sei por quanto tempo.

Para verificar se inseri as tags corretas, tentei um URL diferente, por exemplo: http://domain.com em vez de http://www.domain.com .

espero que isso ajude a outra pessoa.

Depois de trabalhar em um buggy, descobriu que no IOS, os elementos no HEAD podem parar a pesquisa do WhatsApp no ​​og: image / og: description / name = description. Portanto, tente primeiro colocá-los em cima de todo o resto.

Isso não funciona

<head>
    <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>

    <meta property="og:description" content="description" />
    <meta property="og:image" content="http://cdn.some.com/random.jpg" />
</head>

Este trabalho:

    <head>
        <meta property="og:description" content="description" />
        <meta property="og:image" content="http://cdn.some.com/random.jpg" />

        <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
    </head>

Eu recomendo sempre dar uma olhada em https://developers.facebook.com/tools/debug/sharing para validar suas propriedades, pois o Facebook frequentemente altera suas políticas, conformidade e API.

Se você trabalha com bots do Messenger ou outros aplicativos do FB, pode ser necessário a propriedade fb: app_id para que as imagens do link funcionem no Whatsapp. Mais no site dos desenvolvedores do Facebook. https://developers.facebook.com/docs/sharing/webmasters

Eu tive o mesmo problema, aqui está para resolver.

Deve aparecer se você adicionar meta og: image

O problema é que o whatsapp não mostraria imagem se você digitar sem http: // e terminará com / Por exemplo, ele mostrará imagem e descrição se você digitar http://google.com/ mas não com google.com

Espero que ajude alguém.

Gostaria de adicionar uma resposta a este tópico para mencionar especificamente quais dos tópicos acima me ajudaram a resolver o problema e a ordem na qual eles podem ser seguidos para entender corretamente a causa raiz e corrigi-la de uma vez por todas:

Consegui obter minha visualização avançada enquanto compartilhava o link nas mídias sociais com esta solução.

Eu segui várias opções neste tópico e abaixo são as mais próximas da resposta certa e todas elas contribuíram para o resultado final:

1. Tags necessárias (tag principal para focar - og: imagem)
2. Parâmetros da imagem
3. Ferramenta que definitivamente ajudará
4. Como fornecer corretamente o caminho da imagem
5. Causa raiz e solução

Esperamos que isso poupe a alguém o tempo necessário para rolar e encontrar o conjunto certo de respostas e o esforço necessário para todas as tentativas e erros.

Tentei várias sugestões nesse tópico e em minhas pesquisas externas, mas era um problema totalmente diferente para mim. Minha instrução específica para usar uma imagem indicada pela tag og: image estava sendo substituída pelas tags de gráfico aberto fornecidas pelo plugin Jetpack. você pode encontrar minha resposta detalhada aqui . No entanto, pensei em acrescentar as etapas resumidamente neste tópico mais seguido. Espero que isso ajude alguém.

O depurador de compartilhamento do Facebook me ajudou a identificar a causa raiz e, a partir daí, segui estas etapas:

1. Depure seu site usando o depurador acima. Basta digitar o URL e clicar em debug. Isso deve fornecer uma lista de avisos e quando você rolar para as seções de tags de gráfico abertas, poderá ver os valores que estão sendo buscados para o seu site. O foco é a etiqueta og: image .
2. Role para baixo até o link "Veja exatamente o que o nosso raspador vê no seu URL" e procure a tag og: image para encontrar o vilão em sua história.
3. Agora, simplesmente, opte pelos meios para remover uma substituição que está ocorrendo. No meu caso, achei a seguinte função útil. Ele altera a imagem padrão usada sempre que o Jetpack não pode determinar uma imagem a ser usada.

Altera a imagem padrão usada sempre que o Jetpack não pode determinar uma imagem a ser usada

function custom_jetpack_default_image() {
    return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

Devo acrescentar que os parâmetros de imagem como mínimo 300px x 200px e tamanho <300 KB são recomendados. E siga estas instruções se essas instruções gerais não funcionarem para você, porque, provavelmente, seu problema é semelhante ao meu. Além disso, às vezes a solução mais simples pode ser apenas remover o plug-in (desde que você verifique que pode fazer isso sem ele).

No final, você poderá ver algo como -

Espero que isto ajude.

NS

Você precisa das seguintes tags para obter uma visualização da imagem do WhatsApp:

<meta property="og:title" content="Website name" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://url.com/" />
<meta property="og:description" content="Website description" />
<meta property="og:image" content="image.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />

Como a documentação do Facebook diz, se você especificar o tamanho da imagem og:, ela será buscada rapidamente, em vez de de forma assíncrona.

PNG é recomendado para o formato de imagem. Recomenda-se pelo menos 600x600 pixels.

Se você quiser ter uma imagem ao lado de um URL do seu site que alguém compartilhou no WhatsApp, coloque uma metatag na página para a qual o URL está vinculado, desta forma:

<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>

Teve o mesmo problema, adicionou og: image e não funcionou enquanto o URL terminava com o sinal de barra (/). Depois de remover a barra do URL - a imagem é carregada .. Bug interessante ...

As ações a seguir ajudaram no meu caso.

Colocando a imagem no mesmo host .

<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />

Passando a imagem necessária para o WhatsApp especificamente, detectando seu agente de usuário liderando a substring, exemplo

WhatsApp/2.18.380 A

Esperando alguns segundos antes de realmente pressionar o botão Enviar, o WhatsApp terá tempo para recuperar a imagem e a descrição dos metadados og.

Mesmo depois dessas tentativas. As imagens do meu site foram buscadas algumas vezes e às vezes não. Após a validação com https://developers.facebook.com/tools/debug/sharing

percebi que minha estrutura django (python) está renderizando o caminho da imagem relativamente. Eu tive que fazer alterações no caminho da imagem com o URL completo. (incluindo http: //). então começou a trabalhar

Informações úteis adicionais:

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

<meta property="og:image" content="https://www.link.com/facebook.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />


<meta property="og:image" content="https://www.link.com/whatsapp.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />

https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/

https://css-tricks.com/essential-meta-tags-social-media/