Proporcione una imagen para compartir enlaces de WhatsApp

Respuestas:

368

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 .

Derk Jan Speelman
fuente
11
Tenga en cuenta que puede no funcionar si su sitio se ejecuta en https con certificado autofirmado. Verificado en Facebook y
WhatsApp
2
@ Indraraj gracias por compartir, esto también se puede encontrar en los documentos de Facebook para desarrolladores
Derk Jan Speelman
2
<meta charset = "utf-8"> <meta http-equiv = "X-UA-Compatible" content = "IE = edge"> <meta name = "viewport" content = "ancho = ancho del dispositivo, escala inicial = 1, escala máxima = 1, escalable por el usuario = no "> <title> </title> <meta name =" description "content =" "> <meta property =" og: title "content =" "/> <metapropiedad = "og: url" content = "" /> <metapropiedad = "og: descripción" content = ""> <metapropiedad = "og: image" content = "mappointer.png"> <metapropiedad = "og: image: width" content = "" /> <meta property = "og: image: height" content = "" /> puse toda la etiqueta anterior.
BALU KB
2
@DerkJanSpeelman ahora está funcionando bien. gracias. Olvidé mantener la dimensión de la imagen como 300 * 200.
BALU KB
1
@DerkJanSpeelman No entiendo, este sitio: jornada.unam.mx/ultimas/2018/06/19/… tiene más de 35 caracteres y la vista previa de la imagen está funcionando. ¿Dónde puedo encontrar la especificación correcta?
elios264
19

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.

Cedriga
fuente
3
+1 para la información de límite de tamaño pero no es correcta. La aplicación Whatsapp obtiene los primeros 300.000 bytes (encabezado Http: "Rango: bytes = 0-299999")
Adriano Tornatore
77
¿Cómo sabe la gente sobre el límite de tamaño de 300,000 bytes o 300kB (k pequeño)? Busqué una fuente en Internet, pero no pude encontrar este límite de tamaño en el sitio web de WhatsApp o en el sitio web del Protocolo Open Graph ogp.me .
ʕ ᵔᴥᵔ ʔ
url_image necesita ser https servido
tito.icreativos
12

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!

Alejandro Brasil
fuente
la imagen no se muestra para mí, ¿tienes otra solución?
Keyur Shah
1
¡También es posible con imágenes más grandes! En la respuesta de @Cedriga dice que las imágenes no pueden ser mayores de 300 kb, tiene razón.
Derk Jan Speelman
1
Definitivamente no es el nombre. Y puedo confirmar que JPG funciona.
Workwise
1
Creo que el enlace a WhatsApp no ​​es lo que nos estamos perdiendo, y sí, como dijo @workwise, tanto PNG como JPG funcionan.
aashima
9

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.

GZone
fuente
Respuesta perfecta para lo que estoy buscando Esto es muy malo: og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.
Amol
Estos parámetros son cruciales y creo que el foco debería estar en la etiqueta og: image. Se recomienda el límite de tamaño de 300 KB y el mínimo de 300 px x 200 px. Recuerda que las dimensiones están en píxeles.
aashima
7

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

Anna Kleiner
fuente
Creo que es mejor si uno da el camino calificado que recurrir a caminos relativos. La sugerencia en su respuesta funcionó para mí.
aashima
Creo que necesitas usar la imagen .jpg, la imagen .png simplemente no funcionará con WhatsApp.
Andrew Ver
4

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.

jony89
fuente
Trabajando bien para mí ... ¡Gracias!
Abhishek Kumbhani
4

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>
Kim Sant
fuente
Mis 2 centavos y espero que esto ayude a alguien. Para mi caso, está twitter:imagevacío, deshabilitando el acceso de WhatsApp og:image. Intentar eliminar otras <meta>etiquetas podría ayudar a depurar las funciones de intercambio social.
Sunny Pun
Supongo que WhatsApp está leyendo hasta el fondo y se detiene después de que se encuentra algo inesperado (div, twitter vacío: imagen). La idea aquí era decirle a la gente que pusiera meta og:imageen la parte superior y asegurar que se lea
Kim Sant
3
¿Por qué colocarías un <div> en la sección <head>?
Tomás González el
Trabajé para una empresa que raspa y "reestructura" su contenido web con buenos UX, SEO, etc. Si raspa la cabeza del cliente y agrega solo los metadatos og: debajo no funciona. Disfruté hacer ingeniería mental inversa de cómo Whatsapp procesa HTML, ¡ya no hago ninguna depuración yala yala yala!
Kim Sant
4

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

Braconnot_P
fuente
Muchas personas usan Yoast SEO en Wordpress. Agrega og: imagen en publicaciones solo si agrega la imagen de Facebook en la pestaña Yoast SEO en cada publicación.
Braconnot_P
2

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.

jurgel
fuente
2

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.

aashima
fuente
2

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

Espero que esto ayude.

NS

Narrador nocturno
fuente
1

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.

moreirapontocom
fuente
En mi caso, tengo 1200 * 628 píxeles de imagen, lo que significa que tengo que proporcionar, <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="628" />¿estoy en lo cierto? ¿Necesitamos dar ancho y alto de la imagen (que la imagen tiene) en las etiquetas o, de lo contrario, lo que sea que los pilxels de la imagen harían Si mencionamos el ancho y el alto en las metaetiquetas Se mostrará en esas dimensiones? Por favor aclare @moreirapontocom
siluveru kiran kumar
0

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"/>
maxdaniel98
fuente
3
¡Hola! He intentado esto y funciona perfectamente con el depurador de URL de Facebook, sin embargo, el mensaje de WhatsApp todavía no muestra mi miniatura. Aquí hay alguien más, que tiene el mismo problema: stackoverflow.com/questions/25100917/…
Lepi
@AkhilSekharan la respuesta correcta se puede encontrar aquí: stackoverflow.com/a/32154775/501206
stevenw00
Gracias Steve. Ya lo intenté de esa manera y llegué a la conclusión de que WhatsApp tiene una lista blanca interna de dominios que puede mostrar la miniatura. Por ejemplo youtube
Akhil Sekharan
2
Llegué a la misma conclusión ... FB depurador: 100% bien. Vista previa enriquecida: 100% correcto (Watsapp incluido). Cuando trato de compartir por WhatsApp, la imagen no se muestra. La url en mi caso es robotiqu.es ... ¿no hubo respuesta un año después?
Juanjo
la imagen no se muestra para mí, ¿alguien puede tener una solución @Juanjo
Keyur Shah
0

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

Yedidia
fuente
0

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.

baur
fuente
Si escribo URL y espero algún tiempo, se obtendrá la vista previa después de eso. Si presiono el botón Enviar, se muestra, Si escribo URL y presiono el botón Enviar sin demora (antes de recuperar la información de las metaetiquetas), entonces el La vista previa no se muestra.
siluveru kiran kumar
0

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

Siddaram H
fuente
0

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/

SinunHenkka
fuente