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


186

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

insira a descrição da imagem aqui


se for várias páginas para pessoas diferentes, você também pode tentar o sharesocial.in
Tirthraj Rao

1
Você pode testar o domínio de suas páginas em iframely.com/embed
Piotr Kowalski

Teste como o Facebook o processa: developers.facebook.com/tools/debug
Noam

Respostas:


367

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 .


11
Observe que ele pode não funcionar se o site for executado em https com certificado autoassinado. Verified on Facebook and whatsapp
Indraraj

2
@Indraraj obrigado por compartilhar, isso também pode ser encontrada na documentação do Facebook para desenvolvedores
Derk Jan Speelman

2
<meta charset = "utf-8"> <meta http-equiv = "Compatível com X-UA" content = "IE = edge"> <meta name = "viewport" content = "width = largura do dispositivo, escala inicial = 1, escala máxima = 1, escalável pelo usuário = não "> <título> </ título> <meta name =" description "content =" "> <meta property =" og: title "content =" "/> <meta propriedade = "og: url" content = "" /> <meta propriedade = "og: description" content = ""> <meta propriedade = "og: image" content = "mappointer.png"> <meta propriedade = "og: image: width" content = "" /> <meta property = "og: image: height" content = "" /> coloquei toda a tag acima.
BALU KB 6/17

2
@DerkJanSpeelman agora está funcionando bem. obrigado. esqueci de manter a dimensão da imagem em 300 * 200.
BALU KB

1
@DerkJanSpeelman Não entendo, este site: jornada.unam.mx/ultimas/2018/06/19/… tem mais de 35 caracteres e a visualização da imagem está funcionando. onde posso encontrar a especificação correta?
elios264

19

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


3
+1 para as informações de limite de tamanho, mas não estão corretas. O aplicativo Whatsapp busca os primeiros 300.000 bytes (cabeçalho Http: "Range: bytes = 0-299999")
Adriano Tornatore

7
Como as pessoas sabem sobre o limite de tamanho de 300.000 bytes ou 300kB (k pequeno)? Eu procurei por uma fonte na internet, mas não consegui encontrar esse limite de tamanho no site do WhatsApp ou no site Open Graph Protocol ogp.me .
24417

url_image precisa ser https veiculado
tito.icreativos 16/05/19

12

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!


imagem não está sendo exibida para mim, você tem outra solução?
Keyur Shah

1
Também é possível com imagens maiores! Na resposta de @Cedriga diz que as imagens não podem ter mais de 300kb, ele está certo.
Derk Jan Speelman

1
Definitivamente não é o nome. E posso confirmar que o JPG funciona.
workwise

1
Acredito que o link para o whatsapp não é o que estamos perdendo e sim, como o @workwise disse, o PNG e o JPG certamente funcionam.
aashima 10/06

9

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.


Resposta perfeita para o que eu estou procurando Isto é muito imp: og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.
Amol

Esses parâmetros são cruciais e acho que o foco deve estar na tag og: image. O limite de tamanho de 300 KB e o mínimo de 300 px x 200 px são recomendados. Lembre-se de que as dimensões estão em pixels.
aashima 10/06

7

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.)


Eu acho melhor se alguém der o caminho qualificado do que recorrer a caminhos relativos. A sugestão na sua resposta funcionou para mim.
aashima 10/06

Eu acho que você precisa usar imagem .jpg, imagem .png simplesmente não funciona com o whatsapp.
Andrew Ver

4

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.


Trabalhando bem para mim .. Obrigado!
Abhishek Kumbhani 26/11

4

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>

Meus 2 centavos e espero que isso ajude alguém. Para o meu caso, ele está twitter:imagevazio, impedindo o recebimento do WhatsApp og:image. Tentar excluir outras <meta>tags pode ajudar a depurar as funções de compartilhamento social.
Sunny Pun

Eu acho que o whatsapp está lendo de cima para baixo e pare depois que algo inesperado for encontrado (div, twitter vazio: imagem). A idéia aqui era dizer às pessoas para colocarem a meta og:imageno topo e garantir que ela fosse lida #
Kim Sant

3
Por que você colocaria um <div> na seção <head>?
Tomas Gonzalez

Eu trabalhei para uma empresa que raspa e "reformula" seu conteúdo na Web com UX, SEO etc. Se você raspa a cabeça do cliente e adiciona apenas os metadados og: abaixo, ele não funciona. Eu gostava de fazer engenharia reversa mental de como o whatsapp processa HTML, não mais fazendo depuração yala yala yala!
Kim Sant

4

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


Muitas pessoas usam o Yoast SEO no Wordpress. Ele adiciona og: image nas postagens apenas se você adicionar a imagem do facebook na guia SEO do Yoast em cada postagem.
Braconnot_P

2

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.


2

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.


2

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 - insira a descrição da imagem aqui

Espero que isto ajude.

NS


1

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.


No meu caso, tenho 1200 * 628 pixels de imagem, o que significa que tenho que fornecer como <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="628" />estou certo? Precisamos fornecer a largura e a altura da imagem (que a imagem possui) em tags ou o que quer que os pilxels da imagem fariam? Se mencionarmos largura e altura em meta tags Ele será exibido nessas dimensões? Por favor, esclareça @moreirapontocom
siluveru kiran kumar

0

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"/>

3
Oi! Eu tentei isso e funciona como prefeito com o depurador de URL do Facebook, no entanto, a mensagem do whatsapp ainda não mostra meu thumnail. Aqui está outra pessoa que tem o mesmo problema: stackoverflow.com/questions/25100917/…
Lepi

@AkhilSekharan a resposta correta pode ser encontrada aqui: stackoverflow.com/a/32154775/501206
stevenw00

Obrigado Steve. Já tentei dessa maneira e cheguei à conclusão de que o WhatsApp tem uma lista de permissões interna de domínios que pode mostrar a miniatura. Por exemplo youtube
Akhil Sekharan

2
Cheguei à mesma conclusão ... Depurador FB: 100% ok. Pré-visualização avançada: 100% ok (Watsapp incluído). Quando tento compartilhar pelo WhatsApp, a imagem não aparece. O URL no meu caso é robotiqu.es ... nenhuma resposta um ano depois?
Juanjo

imagem não exibindo para mim, qualquer um pode ter solução @Juanjo
Keyur Shah

0

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 ...


0

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.


Se eu digitar URL e esperar algum tempo, a visualização será exibida depois. Se eu pressionar o botão enviar, ele será exibido. Se eu digitar URL e clicar no botão enviar sem demora (antes de buscar as informações das metatags) , o a visualização não está sendo exibida.
siluveru Kiran Kumar

0

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


0

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/

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.