html - generar - link de whatsapp en perfil de instagram
Estándares 2018
Se necesitan algunos pasos para obtener la vista previa perfecta de los iconos de WhatsApp, Twitter, Facebook y 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.
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 de tu página web
<meta property="og:url" content="https://www.example.com/webpage/" />
Paso 5: og: descripción
Máximo de 65 caracteres
<meta property="og:description" content="description of your website/webpage">
Paso 6: 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
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">
Paso 7: og: tipo
Para que su objeto sea representado dentro del gráfico, necesita 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 otras traducciones de idiomas disponibles.
Si no especifica og: locale, por defecto 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, lee this .
Paso 10: Facebook
Para obtener el mejor soporte de Facebook lee this .
Paso 11: favicon
Para obtener el mejor soporte de favicon para todos los navegadores y dispositivos, léelo.
Bonus paso 12: video / audio
También es posible compartir audio / video. Facebook y Twitter, por ejemplo, comparten videos muy bien. Lea ogp.me
Después de trabajar en una bugg, descubrió que en IOS, los elementos de HEAD podrían detener la búsqueda de WhatsApp de la og: image / og: description / name = description. Intenta primero 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>
Documenté la solución detallada perfecta aquí: https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html Hay siete pasos por hacer para obtener la vista previa perfecta.
Título: Agregue un título rico en palabras 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: title: Máximo 35 caracteres.
og: url: Enlace completo a la dirección de su página web.
og: description: un máximo de 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. Haga upvote una vez que lo encuentre satisfactorio.
He intentado hacer esto yo también 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 aun así no pude 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, intenté con una URL diferente, por ejemplo: http://dominio.com en lugar de http://www.domain.com .
con suerte, esto ayuda a otra persona.
Si desea tener una imagen junto a una url de su sitio web que alguien compartió en WhatsApp, debe poner una metaetiqueta en la página a la que se vincula la URL, como esta:
<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>
Supongo que no hay una lista blanca en WhatsApp, ya que encontré una solución que funcionó para mí. Haz lo siguiente. insertar 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í SOLO COMO ESO)
No olvide insertar el enlace a whatsapp en su 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!
Tenía el mismo problema, se agregó og: image y no funcionó mientras que la url terminaba con un signo de barra (/). Después de eliminar la barra de la URL, la imagen se carga ... Error interesante ...
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.
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 para mostrar debe ser inferior a 300 KB .
Si el problema persiste, lea también la respuesta para esta pregunta similar
Tuve el mismo problema, aquí está resolver.
Debería mostrarse si agrega meta og: imagen
El problema es que WhatsApp no mostraría 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.