Mostrando miniatura del enlace en WhatsApp || og: la metaetiqueta de imagen no funciona


94

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

ingrese la descripción de la imagen aquí

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


Extraño ... la imagen de og: debería ser suficiente. Intenté compartir un enlace de youtube y puedo ver correctamente la miniatura en mi chat. Traté de ver si Youtube estaba usando más metaetiquetas sin descubrir nada especial ... ¿estamos enfrentando un problema de caché?
cs.edoardo

disculpe, pero ¿está seguro de que esto es posible? ¿Lo has visto en otro lugar antes? ¿tienes algún enlace que tenga un pulgar en whatsapp?
ProllyGeek

es posible aumentar la altura y el ancho de la imagen ???? en Whatsapp
Chandresh


¿Puedo hacer referencia a una imagen sin ninguna llamada HTTP, como en content="./images/logo.png"?
TMOTTM

Respuestas:


101

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.


Eso podría deberse a que la imagen no está disponible en la primera de las dos metaetiquetas con itemprop="image". Mensaje de error:Cannot GET /logos/logo_512.png
Desconocido

4
Además, si va a usar enlaces http seguros a la imagen, debe usar en property="og:image:secure_url"lugar deproperty="og:image"
Desconocido

Gracias por tu tiempo. Hice los cambios. Pero aún así no hubo suerte. :(
Akhil Sekharan

El enlace de youtube va a un video donde muestran cómo crear un icono plano en Illustrator.
Desconocido

Perdón por la ambigüedad. Cuando enviamos este enlace a través de WhatsApp, aparece una miniatura del video cerca del mensaje como se muestra en esta pregunta
Akhil Sekharan

29

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.




10

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!


Para mí, el responsable fue en absoluto. Siempre que el tamaño de los archivos sea inferior a 300 Kb, todo estará bien. No necesito medir propiedades. La etiqueta og: image es suficiente.
Bernhard Kraus

ninguno funcionó en mi caso dev.dubairent.com/property/…
Jitendra Pancholi

9

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

Y deberías ver trabajando

Antes y después de la captura de pantalla

ingrese la descripción de la imagen aquí

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.


1
Depurador de FB: 100% correcto. Vista previa enriquecida: 100% aceptable (Watsapp incluido). Cuando intento compartir por WhatsApp, la imagen no aparece. La url en mi caso es robotiqu.es ... ¿sin respuesta un año después?
Juanjo

1
@wong_udik Cómo pasar este contenido HTML a través de Android Intent
Raja Jawahar


3

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

borrar datos y caché de whatsapp

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


1
esto y hacer que el tamaño del archivo sea inferior a 300 kb funcionó para mí
Aryeh Beitz

1
Solo borrar la caché es suficiente. No es necesario borrar los datos.
Sanket Berde

En su lugar, puede almacenar en caché el enlace:https://link.com/?_=92375293579
nathan

2

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>


1

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>

1
¿Puede agregar alguna exageración a su respuesta? Mostrar el código puede resultar confuso para algunas personas.
André Kool

1

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


¿Puedes dar más detalles? ¿Cuál es realmente la diferencia? ¿Reescribiste la URL de la imagen o qué hiciste?
John Max

Probablemente, el dominio debe coincidir con el enlace que se comparte.
MarsAndBack

1

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.


Explique lo que hace su enlace ... Los enlaces pueden desaparecer.
Kurt Van den Branden

¿Su fuente es solo de pruebas o alguno de esos requisitos está documentado en alguna parte?
Keab42

1

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.


1
¿Cómo enviará estos datos a través de Intent
Raja Jawahar

Esta pregunta es completamente fuera de tema
meredrica

1

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.



0

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


0

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.



1
@JitendraPancholi, su sitio web (dubairent.com) no es el mismo. Se requieren caracteres de comillas dobles alrededor de los valores de los atributos. Aquí es el de su sitio web: <meta property=og:title content="Immaculate 4 Bed Townhouse Victory">. Debe ser: <meta property="og:title" content="Immaculate 4 Bed Townhouse Victory">. Si usa Webpack con el complemento HTML, considere configurarlo minify.removeAttributeQuotesenfalse
Francois

Lo corregí ahora, pero WhatsApp todavía no muestra la imagen en la vista previa, aunque el título y la descripción también se muestran como antes.
Jitendra Pancholi

@JitendraPancholi, puede utilizar las instrucciones anteriores para "La forma más fácil de experimentar para mí fue con CodeSandbox siguiendo estos pasos". Simplemente copie su <head>sección en la aplicación básica. Para obtener el HTML sin formato de su sitio web, utilice la opción "Ver fuente de la página" (en Chrome lo es CTRL + U).
Francois

0

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!


0

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.


0

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


0

ingrese la descripción de la imagen aquí 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


0

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 !


-1

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"/>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.