kutombawewe.net

Mostrando la miniatura para el enlace en WhatsApp || og: la etiqueta meta de la imagen no funciona

Intenté seguir esta pregunta: Proporcionar una imagen para compartir enlaces de whatsapp

 enter image description here 

He creado una página web HTML simple con los metatags básicos 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 indicador de Facebook se valida correctamente y en Facebook se muestra perfecto, pero cuando intento compartir con WhatsApp la imagen no se muestra.

Lo estoy probando en WhatsApp en Android

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

55
JesuLopez

Creo que necesitas agregar itemprop a la metaetiqueta og:image, tener el tamaño de la imagen establecido en 256x256 y tampoco sería perjudicial agregar las propiedades site_name, type y updated_time tampoco :)

<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 etiquetas meta en acción en, por ejemplo, Google Maps .
Una vez que haya cambiado sus etiquetas meta, es posible que deba esperar un tiempo hasta que se actualicen las cachés.

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

EDITAR:
Si va a especificar una imagen mediante un enlace HTTP-Secure, debe usar og:image:secure_url en lugar de og:image.

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

61
Unknown

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

Así que la propiedad más importante para mostrar la 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

11
Cedriga

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

Y deberías ver el trabajo Antes y después de la captura de pantalla

 enter image description here 

Hay dos tipos de código. Primer meta og: imagen dentro de <head>

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

Esquema de miniaturas 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.

9
wong_udik

También me enfrento a 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

8
Syed Zeeshan Ali

¡Borre sus datos y caché de WhatsApp (o use otro WhatsApp)!

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

Ten cuidado ! Copia de seguridad de sus mensajes antes de esta acción.

 clear whatsapp data and cache 

Luego, el resultado: antes y después de borrar los datos y la caché WhatsApp  before and after sharing 

3
Azodium

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

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

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>
1
Joell Lapitan

No conozco 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 de 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>
1
falero80s

Espero que esta ayuda:

<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 debe estar alojada desde el mismo dominio, o no aparecerá en WhatsApp. Intenté cargar una URL de Amazon, la vista previa de la imagen no funciona.

1
Joell Lapitan

Para todos los que aún tienen este problema y para mí, ninguna de las soluciones publicadas funcionó.

He tenido el problema similar. La imagen se mostraba correctamente en todos los demás cuadros de diálogo de compartir. Solo WhatsApp no ​​pudo mostrar la imagen, aunque el depurador de Facebook tenga 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 = YYYYYYYYYYYYYYYYY-YYYYYYYYYYYYYYY

Utilicé esta URL en la etiqueta meta 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 funciona correctamente en WhatsApp también.

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 diálogos 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 :)

1
Philipp Mittmann

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 enriquecido de palabras clave a su página web con un máximo de 65 caracteres.

  2. Meta Descripción: describe tu página web con un máximo de 155 caracteres.

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

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

  5. og: descripción: máximo 65 caracteres.

  6. og: imagen: se recomienda una imagen (JPG o PNG) de un 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. Haga un voto positivo una vez que lo encuentre satisfactorio.

1
GZone

Después de pasar meses tratando de resolver esto, finalmente resolví el problema. Aquí está 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, pegue en el área principal del sitio web. CIERRE tu aplicación de Whatsapp, vuelve a abrir, prueba THEN. No es necesario borrar la memoria caché, y NO NECESITA BORRAR LOS DATOS.

¡Bendiciones a todos!

0
David E

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

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

Nota: si está utilizando contenido en inglés, no es necesario agregar esta etiqueta meta ya que el valor predeterminado es inglés.

0
Rami Zebian

Abrir datos del gráfico:

<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"/>
0
Amranur Rahman

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

0
user6649894