Proporcione una imagen para compartir enlaces de WhatsApp

¿Cómo podemos incluir una imagen en nuestro sitio web para mostrar en WhatsApp cuando compartimos un enlace como este?

Estándares 2020

Toma unos pocos pasos para obtener la vista previa perfecta para WhatsApp, Twitter, Facebook e iconos de marcadores para PC y dispositivos móviles. Si le gusta leer, vaya a ogp.me , pero asegúrese de leer los pasos 1 a 6 en esta respuesta para obtener la mejor vista previa de WhatsApp.

Tenga en cuenta que algunas aplicaciones o sitios web usan caché o incluso almacenan la vista previa del sitio web en su base de datos. Esto significa que cuando esté probando su enlace en WhatsApp o Facebook, por ejemplo, lo más probable es que no vea ninguna diferencia de inmediato. Usar otro enlace (otra página) hará el truco. Pero tan pronto como use ese enlace una vez, esta sección "tenga en cuenta" comienza de nuevo.

Paso 1: título

Máximo de 65 caracteres.

<title>your keyword rich title of the website and/or webpage</title>

Paso 2: descripción

Máximo de 155 caracteres.

<meta name="description" content="description of your website/webpage, make sure you use keywords!">

Paso 3: og: título

Máximo 35 caracteres

<meta property="og:title" content="short title of your website/webpage" />

Paso 4: og: url

Enlace completo a la dirección actual de la página web

<meta property="og:url" content="https://www.example.com/webpage/" />

Paso 5: og: descripción

Máximo 65 caracteres

<meta property="og:description" content="description of your website/webpage">

Paso 6: og: imagen

Imagen (JPG o PNG) con un tamaño inferior a 300 KB y dimensiones mínimas de 300 x 200 ^*

<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">

^* @RichDeBourke me mencionó esto, pero aparentemente WhatsApp ha aumentado su tamaño máximo de imagen (dimensiones y tamaño de archivo). Hice algunas pruebas: no funciona constantemente en todos los dispositivos. Probé imágenes de 2.x Mb e incluso eso pareció funcionar 9/10 veces. <300 KB es el enfoque más seguro, pero debería estar bien usando imágenes más grandes a partir del 18-02-2020. Sin embargo, recomendaría mantener el tamaño del archivo por debajo de 2 MB. Y definitivamente arroje su imagen a través de TinyPNG o cualquier otro algoritmo de compresión de imágenes si aún no lo ha hecho.

Si completó los pasos anteriores, ¡ahora puede ver su vista previa en WhatsApp! Sin embargo, tenga en cuenta la sección "Nota" anterior.

Paso 7: og: tipo

Para que su objeto se represente dentro del gráfico, debe especificar su tipo. Aquí hay una lista de los tipos globales disponibles: http://ogp.me/#types . También puede especificar sus propios tipos.

<meta property="og:type" content="article" />

Paso 8: og: locale

La configuración regional del recurso. También puede usar og: locale: alternate si tiene disponibles otras traducciones de idiomas.

Si no especifica og: locale, el valor predeterminado es en_US.

<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />

Paso 9: Twitter

Para obtener el mejor soporte de Twitter, lea esto .

Paso 10: Facebook

Para obtener el mejor soporte de Facebook, lea esto .

Paso 11: favicon

Para obtener el mejor soporte de favicon para todos los navegadores y dispositivos, lea esto .

Paso extra 12: video / audio

También es posible compartir audio / video. Facebook y Twitter, por ejemplo, comparten videos muy bien. Leer ogp.me .

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.

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

Si el problema persiste, lea también la respuesta a esta pregunta similar.

Supongo que no hay una lista blanca en WhatsApp, ya que encontré una solución que funcionó para mí. Haz lo siguiente. inserte 3 metaetiquetas:

<meta property="og:image" content="http://yourimage_with_complete_URL.png"/>  
<meta property="og:title" content="Your Title"/>  
<meta property="og:description" content="Your description."/>  

Su imagen debe estar en formato .png y dimensión 600x600px y debe llamarse 'logo-yoursite.png' (una vez que funcionó para mí SÓLO COMO ESO)

No olvides insertar el enlace a WhatsApp en tu sitio web:

<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>

¡Haz esto y estarás bien hecho!

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

Título: agregue un título enriquecido de palabra clave a su página web con un máximo de 65 caracteres.

Meta descripción: Describa su página web en 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 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. Vota una vez que lo encuentres satisfactorio.

Me gustaría llamar la atención sobre el hecho de que un simple <meta property="og:image" content="image.png" />, como se sugirió en alguna parte anterior, no funciona para mí (esto de hecho me tuvo en un círculo durante semanas). Lo que funciona es una URL absoluta:
<meta property="og:image" content="https://domainname.com/image.png" />

o comenzando con una barra diagonal (si la imagen está en el directorio raíz):
<meta property="og:image" content="/image.png" />

(Hubiera agregado esto como un comentario, pero aún no tengo permitido hacerlo. Los moderadores pueden mover esto si es más apropiado).

También he intentado hacer esto y he agregado todas las metaetiquetas correctas:

<meta property="og:image" itemprop="image" content="image_url" />
<meta property="og:image:url" itemprop="image" content="image_url" />
<meta property="og:image:type" content="image/png" />

pero aún no podía ver la imagen al compartir mi enlace dentro de WhatsApp.

Descubrí que WhatsApp también hace algún tipo de almacenamiento en caché de la imagen y la información de la URL, no sé por cuánto tiempo.

Para comprobar que he insertado las etiquetas correctas, simplemente probé diferentes URL, por ejemplo: http://dominio.com en lugar de http://www.domain.com .

Esperemos que esto ayude a alguien más.

Después de trabajar en un bugg, descubrí que en IOS, los elementos en HEAD podrían detener la búsqueda de WhatsApp de og: image / og: description / name = description. Así que primero intenta ponerlos encima de todo lo demás.

Esto no funciona

<head>
    <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>

    <meta property="og:description" content="description" />
    <meta property="og:image" content="http://cdn.some.com/random.jpg" />
</head>

Este trabajo:

    <head>
        <meta property="og:description" content="description" />
        <meta property="og:image" content="http://cdn.some.com/random.jpg" />

        <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
    </head>

Recomiendo que siempre eche un vistazo a https://developers.facebook.com/tools/debug/sharing para validar sus propiedades, ya que Facebook a menudo cambia sus políticas, cumplimientos y API.

Si trabaja con bots de Messenger u otras aplicaciones de FB, es posible que necesite la propiedad fb: app_id para que las imágenes de enlace funcionen en Whatsapp. Más en el sitio webmasters de desarrolladores de Facebook. https://developers.facebook.com/docs/sharing/webmasters

Tuve el mismo problema, aquí está para resolver.

Debería aparecer si agrega meta og: image

El problema es que WhatsApp no ​​mostrará la imagen si escribe sin http: // y termina con / Por ejemplo, muestra la imagen y la descripción si escribe http://google.com/ pero no con google.com

Espero que ayude a alguien.

Me gustaría agregar una respuesta a este hilo para mencionar específicamente cuáles de los hilos anteriores me ayudaron a resolver el problema y el orden en el que se pueden seguir para comprender adecuadamente la causa raíz y solucionarlo de una vez por todas:

Pude obtener mi rica vista previa al compartir el enlace en las redes sociales con esta solución.

Seguí varias opciones en este hilo y a continuación son las más cercanas a la respuesta correcta y todas contribuyeron al resultado final:

1. Etiquetas requeridas ( Etiqueta principal para enfocarse - og: imagen)
2. Parámetros de imagen
3. Herramienta que definitivamente ayudará
4. Cómo dar correctamente la ruta de la imagen
5. Causa raíz y solución

Con suerte, esto le ahorrará a alguien el tiempo necesario para desplazarse y encontrar el conjunto correcto de respuestas y el esfuerzo requerido para todas las pruebas y errores.

Intenté varias sugerencias bajo este hilo y de mis búsquedas externas, pero fue un problema completamente diferente para mí. Mi instrucción específica para usar una imagen indicada por la etiqueta og: image estaba siendo anulada por las etiquetas de gráfico abierto proporcionadas por el complemento Jetpack. Puedes encontrar mi respuesta detallada aquí . Sin embargo, pensé que valía la pena agregar los pasos breves en este hilo más seguido. Espero que esto ayude a alguien.

El Facebook Sharing Debugger me ayudó a identificar la causa raíz y, a partir de ahí, seguí estos pasos:

1. Depure su sitio web utilizando el depurador anterior. Simplemente escriba la URL y presione depurar. Esto debería darle una lista de advertencias y una vez que se desplace hacia las secciones de etiquetas de gráficos abiertas, podrá ver los valores que se están obteniendo para su sitio web. En lo que debe centrarse es en la etiqueta og: image .
2. Desplácese hacia abajo hasta el enlace "Vea exactamente lo que nuestro raspador ve para su URL" y busque la etiqueta og: image para encontrar al villano en su historia.
3. Ahora simplemente, opte por los medios para eliminar una anulación que está ocurriendo. En mi caso, encontré útil la siguiente función. Cambia la imagen predeterminada utilizada cada vez que Jetpack no puede determinar una imagen para usar.

Cambia la imagen predeterminada utilizada cada vez que Jetpack no puede determinar una imagen para usar

function custom_jetpack_default_image() {
    return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

Debo agregar que se recomiendan los parámetros de imagen, como mínimo 300px x 200px y tamaño <300 KB. Y siga estas instrucciones si tales instrucciones generales no funcionan para usted, porque es muy probable que su problema sea similar al mío. Además, a veces la solución más simple puede ser simplemente eliminar el complemento (siempre que verifique que puede hacerlo sin él).

Al final deberías poder ver algo como:

Espero que esto ayude.

NS

Necesita las siguientes etiquetas para obtener una vista previa de la imagen de WhatsApp:

<meta property="og:title" content="Website name" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://url.com/" />
<meta property="og:description" content="Website description" />
<meta property="og:image" content="image.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />

Como dice Facebook docs , si especifica el tamaño de la imagen og: se obtendrá rápidamente en lugar de asincrónicamente.

PNG se recomienda para el formato de imagen. Se recomienda al menos 600x600 píxeles.

Si desea tener una imagen junto a una URL de su sitio web que alguien compartió en WhatsApp, debe colocar una metaetiqueta en la página donde se vincula la URL, de esta manera:

<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>

Tuve el mismo problema, agregó og: image y no funcionó mientras la url terminaba con un signo de barra diagonal (/). Después de eliminar la barra diagonal de la URL, la imagen se carga. Error interesante ...

Las siguientes acciones ayudaron en mi caso.

Poner imagen bajo el mismo host .

<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />

Pasar la imagen necesaria a WhatsApp específicamente mediante la detección de su agente de usuario liderando la subcadena, ejemplo

WhatsApp/2.18.380 A

Esperando unos segundos antes de presionar el botón de enviar, para que WhatsApp tenga tiempo de recuperar la imagen y la descripción de los metadatos.

Incluso después de estos intentos. Las imágenes de mi sitio web se obtuvieron algunas veces y otras no. Después de validar con https://developers.facebook.com/tools/debug/sharing

me di cuenta de que mi marco django (python) está representando la ruta de la imagen relativamente. Tuve que hacer cambios en la ruta de la imagen con URL completa. (incluido http: //). entonces empezó a funcionar

Información útil adicional:

Puede proporcionar varios og: imágenes, Whatsapp utilizará el último. Esto ayudará con el problema de que, por ejemplo, Facebook quiere una relación de 1.91: 1 y whatsapp 1: 1

<meta property="og:image" content="https://www.link.com/facebook.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />


<meta property="og:image" content="https://www.link.com/whatsapp.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />

https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/

https://css-tricks.com/essential-meta-tags-social-media/