Intenté seguir esta pregunta: Proporcione una imagen para compartir enlaces de WhatsApp

He creado una página web HTML simple con las metaetiquetas básicas de 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" />        

El linter de Facebook se valida correctamente y en Facebook se ve perfecto, pero cuando intento compartir por WhatsApp la imagen no aparece.

Lo estoy probando en WhatsApp en Android

→ Esta es la URL de la página web de muestra

Creo que necesitas agregar itempropa la og:imagemetaetiqueta, tener el tamaño de la imagen configurado 256x256y tampoco estaría de más agregar las propiedades site_name, typey 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" />

Puede ver estas metaetiquetas en acción, por ejemplo, en Google Maps .
Después de haber cambiado sus metaetiquetas, es posible que deba esperar un tiempo para que se actualicen las posibles cachés.

Puede depurar / verificar las metaetiquetas de Open Graph desde el depurador de Facebook.
Si puede ver todas sus etiquetas allí, entonces los sitios / aplicaciones donde sus etiquetas no se muestran correctamente pueden tener diferentes requisitos para las etiquetas de Open Graph.

EDITAR:
Si va a especificar una imagen mediante un HTTP-Secureenlace, debe usar en og:image:secure_urllugar de og:image.

EDIT2:
También debe especificar og:typeya que es uno de los cuatro parámetros básicos requeridos.
<meta property="og:type" content="website" />debería llevarlo en la dirección correcta.

Tuve el mismo problema y el problema fue el tamaño de la imagen. Whatsapp no ​​admite imágenes con un tamaño superior a 300 KB.

Entonces, la propiedad más importante para mostrar una imagen en Whatsapp es:

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

Y el tamaño de la imagen a mostrar debe ser inferior a 300 KB.

También enfrento ese problema Finalmente, lo resolví

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

Mi propiedad de imagen

1. Dimensión: 300X200
2. Tamaño: <300KB
3. URL: http://yourdomain.com/yourfolder/imagename.png

Asegúrese de que en el nombre de la imagen no haya espacio, si tiene dos palabras, use el signo de subrayado

Después de pasar meses tratando de resolver esto, finalmente resolví el problema. Esta es mi solución:

<!-- 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 lo anterior y péguelo en el área principal del sitio web. CIERRE su aplicación Whatsapp, vuelva a abrir, LUEGO pruebe. No es necesario borrar la caché y NO ES NECESARIO BORRAR DATOS

¡Bendiciones para todos!

Encontré la solución aquí Enlace de vista previa de Whatsapp publicado el 2 de marzo 16

Y deberías ver trabajando

Hay dos tipos de código. Primer meta og: imagen 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 que esto ayude. Gracias.

¡Borre los datos y el caché de su whatsapp (o use otro whatsapp)!

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

Ten cuidado ! Haga una copia de seguridad de sus mensajes antes de esta acción.

Entonces el resultado: antes y después de borrar datos y caché de WhatsApp

No sé sobre la cantidad mínima de metaetiquetas necesarias para trabajar en WhatsApp, encontré esto en algún lugar y funcionó perfectamente para mí. Nota: la resolución de la imagen es 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>

Información adicional útil:

Puede proporcionar varias imágenes og: whatsapp utilizará la última. Esto ayudará con el problema de que, por ejemplo, facebook quiere una proporción de 1.91: 1 y whatsapp 1: 1

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

En respuesta a https://stackoverflow.com/a/35785393/1518500

Prueba la versión actualizada de 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>

o usando el formato json-ld de google

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

 }
 </script>

Para todos que todavía tienen este problema y en cuanto a mí, ninguna de las soluciones publicadas funcionó.

Tuve un problema similar. La imagen se mostraba correctamente en todos los demás cuadros de diálogo para compartir. Solo WhatsApp no ​​pudo mostrar la imagen, a pesar de que el depurador de Facebook tiene la etiqueta og: image correctamente.

La solución que funcionó para mí: estoy usando firebase. Para el contenido cargado en su almacenamiento, obtiene una URL de descarga única con un token de medios. Algo como:

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

Usé esta URL en la metaetiqueta og: image. Funcionó para Facebook, etc., pero parece que WhatsApp no ​​pudo descargar la imagen de esta URL. En su lugar, debe incluir la imagen en el directorio de su proyecto y usar este enlace para la etiqueta og: image. Ahora también funciona correctamente en WhatsApp.

Antes (no funciona en WhatsApp, pero 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">

Después (ahora funciona en todos los cuadros de diálogo compartidos probados, incluido WhatsApp)

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

Espero que pueda ayudar a algunos de ustedes :)

Documenté la solución detallada perfecta aquí: https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html Hay siete pasos a seguir para obtener la vista previa perfecta.

1. Título: agregue un título rico en palabras clave a su página web con un máximo de 65 caracteres.

2. Meta descripción: Describe tu página web en un máximo de 155 caracteres.

3. og: title: Máximo 35 caracteres.

4. og: url: enlace completo a la dirección de su página web.

5. og: description: Máximo 65 caracteres.

6. og: image: Se recomienda una imagen (JPG o PNG) de tamaño inferior a 300 KB y una dimensión mínima de 300 x 200 píxeles.

7. favicon: Un pequeño icono de dimensiones 32 x 32 píxeles.

En la página anterior, tiene las especificaciones requeridas, el límite de caracteres y las etiquetas de muestra. Vota una vez que lo encuentres satisfactorio.

Espero que esto ayude:

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

Tome nota de la imgURL que debería estar alojada en el mismo dominio, o no aparecerá en WhatsApp. Intenté cargar una URL de Amazon, la vista previa de la imagen no funciona.

En mi caso, agregar la siguiente metaetiqueta resolvió el problema. Estaba usando contenido árabe y tuve que agregar esto para que la imagen apareciera en WhatsApp:

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

Nota: Si usa contenido en inglés, no es necesario que agregue esta metaetiqueta, ya que el inglés es el valor predeterminado.

Solo necesita escribir el mensaje con "http: //" al principio. Por ejemplo: http://www.google.com muestra la imagen en miniatura, pero www.google.com no.

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

Sólo estos 3 etiquetas parecen ser necesarios ( 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 / jugando

La forma más fácil de experimentar para mí fue con CodeSandbox siguiendo estos pasos:

• Cree una aplicación Vanilla con https://codesandbox.io/s/
• Modifique sus metaetiquetas en consecuencia en el index.html archivo
• Guarda el archivo (ctrl+s ) que bifurcaría la aplicación y generaría su propia URL única
• Pegue esa url en WhatsApp para ver la vista previa (ni siquiera necesita enviar un mensaje)
• Realizar cambios en las metaetiquetas
• Modificar la URL: agregue un solo carácter al final de la URL. Esto descarta la "vista previa en caché anterior".

Cotizaciones requeridas

Solo asegúrese de SIEMPRE tener citas y citas de cierre porque WhatsApp es sensible a eso. Su ejemplo anterior no tiene una cotización de cierre para su og:description.

Para cualquiera que todavía esté experimentando esto, descubrí que las imágenes servidas en Amazon S3 no funcionan para la aplicación móvil WhatsApp (tanto para Android como para iOS, pero la aplicación de escritorio para Mac estaba bien). Es muy posible que nuestra configuración de AWS cause esto, pero también noté el patrón en otros sitios (p. Ej., Este con un og:imagegolpe de dominio como https://s3.amazonaws.com).

No hubo problemas en ninguna otra plataforma que probé, solo en las aplicaciones móviles de WhatsApp. Tan pronto como apunté <meta property="og:image" content="https://some-non-aws-location" />a otra URL pública como un archivo de Google Drive (compartido públicamente, por supuesto), funcionó bien.

También intenté confirmar la imagen en nuestro repositorio, que está alojado e implementado en AWS con un dominio personalizado, y tampoco funcionó. Así que AWS todavía parece ser el culpable. ¡Espero que esto ayude a alguien!

Si después de todos estos consejos, la miniatura aún no se muestra, intente esto:

Mi problema fue que las comillas dobles de los atributos og se eliminaron cuando se compilaron para producción (npm run build). El módulo Minify estaba haciendo eso.

Entonces, la solución fue cancelar esta eliminación, estableciendo el atributo removeAttributeQuotes en falso:

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

En mi entorno de desarrollo, lo configuré en el archivo "webpack.prod.conf.js". Configúrelo en su archivo equivalente.

Simplemente reconstruya y ahora está funcionando.

Seguí todas las instrucciones en las respuestas aquí, y todavía no pude hacer que funcionara. Parece que WhatsApp también requiere la extensión para mostrar la imagen.

Entonces, para una etiqueta que apunta a un jpeg:

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

Cambie la API para permitir la extensión y use:

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

y luego parece funcionar ...

Tuve el mismo problema, finalmente lo hice funcionar después de intentarlo. Aquí están las 8 etiquetas html que utilicé en mi página web para que funcione la vista previa:

En <head>etiqueta:

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

En <body>etiqueta:

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

Estas 8 etiquetas (6 en la cabeza, 2 en el cuerpo) funcionaron perfectamente.

Consejos:

1.Utilice la URL de ubicación exacta de la imagen en lugar del formato de directorio, es decir, no use images / OG_thumb.jpg

2.Extensión de archivo sensible al caso: si el nombre de la extensión de la imagen en su proveedor de alojamiento es ".JPG", no utilice ".jpg" o ".jpeg". Observé que, según el proveedor de alojamiento y el error de combinación del navegador, puede que no ocurren, por lo que para estar seguro, es más fácil coincidir con el caso de la extensión del archivo.

3.Después de realizar los pasos anteriores, si la vista previa en miniatura aún no aparece en el mensaje de WhatsApp, entonces:

a. Forzar la detención de la aplicación móvil (lo intenté en Android) y volver a intentarlo

b.Utilice la herramienta en línea para obtener una vista previa de la etiqueta OG, por ejemplo, usé: https://searchenginereports.net/open-graph-checker

C. En el navegador móvil, pegue el enlace directo al pulgar OG y actualice el navegador 4-5 veces. por ejemplo, https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

Noviembre de 2020: como experimenté, estas metaetiquetas son necesarias y afectan a lo que ves en el enlace compartido en Whatsapp y 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>

y adentro <body> :

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

Más explicación:

1- Suponga que tiene un <meta content='example.com/page1' property='og:url'/>cuerpo interno al que se refiere <a href="https://wa.me/?text=example.com/page2" >Hello whatsApp</a>, el og:imagey la og:descriptionpágina example.com/page2se mostrarán en WhatsApp como se refirió en su enlace en el cuerpo (tal vez obvio).

2-Cuando add/changeabres etiquetas gráficas como og:description, y nuevamente haces clic en tu <a></a>etiqueta en tu página / cuerpo, lo que ves en WhatsApp no ​​cambia a menos que cambies el href="I am a new URL"de tu <a></a>etiqueta o borres el caché de WhatsApp.

3-Probé Png/jpgimágenes, todas de menos de 300 kb de tamaño y todas más grandes de 300 * 300 en píxeles, y el contenido de la imagen era una https o una httpURL, el código anterior es compatible con ambas (No es necesario og:image:secure_url).

4-Cada vez que agrega / cambia ogcontenido, para tener una miniatura en WhatsApp, los cambios no afectan al primer intento !! y exitoso en el segundo intento. Muy extraño !

Esta solución funciona para mí:

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

probado en codesandbox.io

aquí está el enlace: https://l8ogr.csb.app/

una pequeña cosa tonta hizo esa magia, al eliminar " http" o " https" de la URL de la imagen

si la URL de su imagen es ex: https://test.com/img.jpega//test.com/img.jpeg

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