android - tag - Mostrando la miniatura para el enlace en WhatsApp || og: la etiqueta meta de la imagen no funciona
open graph example (11)
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
¡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
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.
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.
Título: Agregue un título enriquecido de palabras clave a su página web con un máximo de 65 caracteres.
Meta Descripción: describe tu página web con un máximo de 155 caracteres.
og: título: máximo 35 caracteres.
og: url: Enlace completo a la dirección de su página web.
og: descripción: máximo 65 caracteres.
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.
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.
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>
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.
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.
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>
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 :)
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.
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
- Dimensión: 300X200
- Tamaño: <300KB
- 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
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.