Como podemos incluir uma imagem em nosso site para ser exibida no WhatsApp quando compartilhamos um link como este?
Como podemos incluir uma imagem em nosso site para ser exibida no WhatsApp quando compartilhamos um link como este?
Respostas:
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.
og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.
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>
twitter:image
vazio, impedindo o recebimento do WhatsApp og:image
. Tentar excluir outras <meta>
tags pode ajudar a depurar as funções de compartilhamento social.
og:image
no topo e garantir que ela fosse lida #
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:
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:
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.
<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
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"/>
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/