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

open graph example

Question

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

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 por WhatsApp, la imagen no se muestra.

Lo estoy probando en WhatsApp en Android

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

Answer 1

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

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

Answer 2

Creo que es necesario agregar itemprop a la meta etiqueta og:image , tener el tamaño de imagen establecido en 256x256 y tampoco sería perjudicial agregar las site_name , type y 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 etiquetas meta en acción, por ejemplo, en Google Maps .
Después de que haya cambiado sus etiquetas meta, es posible que deba esperar un tiempo para que se actualicen las cachés posibles.

Puede depurar / verificar las meta etiquetas 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 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 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 llevarlo en la dirección correcta.

Answer 3

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. Hazlo upvote una vez que lo encuentres satisfactorio.

Answer 4

En respuesta a https://.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>

Answer 5

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 se mostrará en WhatsApp. Intenté cargar una URL de Amazon, la vista previa de la imagen no funciona.

Answer 6

He encontrado la solución aquí Whatsapp enlace de vista previa publicado el 2 de marzo 16

Y deberías ver trabajando antes y después de la captura de pantalla.

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.

Answer 7

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>

Answer 8

Para todos todavía tenemos 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 = YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY

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

Answer 9

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.

Answer 10

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

Answer 11

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.