En este tutorial les mostraremos la manera correcta de agregar una imagen a nuestro sitio web para mostrar en WhatsApp cuando compartimos dicho enlace.
Cuando compartimos algún enlace a un sitio web en WhatsApp, obtenemos una pequeña vista previa del contenido de esa página web, generalmente un título, un resumen del contenido y una imagen. Estos se denominan vistas previas enriquecidas. Quizás se pregunte cómo genera WhatsApp tales vistas previas. La información requerida se recopila en tiempo real visitando el sitio web y leyendo las metaetiquetas del código fuente de la página.
¿Cómo optimizar su blog para vistas previas enriquecidas?
La vista previa enriquecida generada por Whatsapp debería dar a los usuarios una idea de qué se trata un enlace incluso antes de que se abra. Por lo tanto, es mejor si optimizamos el contenido de nuestra web o blog para ayudar a Whatsapp a generar la mejor vista previa posible que atraiga los clics de los usuarios. Pero cómo hacemos eso?
Especificaciones de requisitos: los mismo que las vistas previas enriquecidas de Google.
Compruebe si estas etiquetas están en su lugar. Si no es así, incluya estas etiquetas en la sección <head> de su plantilla cuando sea necesario.
Vistas previas decentes = páginas vistas atractivas. ¡Créeme! La optimización de su web para obtener vistas previas enriquecidas puede generar una gran cantidad de páginas vistas adicionales.
¿Qué son las vistas previas enriquecidas de WhatsApp?
Cuando compartimos algún enlace a un sitio web en WhatsApp, obtenemos una pequeña vista previa del contenido de esa página web, generalmente un título, un resumen del contenido y una imagen. Estos se denominan vistas previas enriquecidas. Quizás se pregunte cómo genera WhatsApp tales vistas previas. La información requerida se recopila en tiempo real visitando el sitio web y leyendo las metaetiquetas del código fuente de la página.
¿Cómo optimizar su blog para vistas previas enriquecidas?
La vista previa enriquecida generada por Whatsapp debería dar a los usuarios una idea de qué se trata un enlace incluso antes de que se abra. Por lo tanto, es mejor si optimizamos el contenido de nuestra web o blog para ayudar a Whatsapp a generar la mejor vista previa posible que atraiga los clics de los usuarios. Pero cómo hacemos eso?
Especificaciones de requisitos: los mismo que las vistas previas enriquecidas de Google.
Title : Agregue un título rico en palabras clave a su página web con un máximo de 65 caracteres.
Meta Description : Describe tu página web en un máximo de 155 caracteres.
og:title : Máximo 35 caracteres.
og:url : Full link to your webpage address.
og:description : Máximo 65 caracteres.
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.
favicon : Un pequeño icono de dimensiones 32 x 32 píxeles.
<title>Tutoriales En Linea</title>
<meta name="description" content="Tutoriales En Linea es un portal web de tutoriales, cursos online y de aprendizaje que pretenden simular al maestro mostrando al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad.">
meta itemprop="name" content="Tutoriales En Linea">
<meta itemprop="description" content="Tutoriales En Linea es un portal web de tutoriales, cursos online y de aprendizaje que pretenden simular al maestro mostrando al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad.">
<meta itemprop="image" content="https://tutorialesenlinea.es/templates/Tutorialesenlinea-es/images/touch-icon-ipad-retina.png">
<meta property="og:site_name" content="Tutoriales En Linea" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Tutoriales En Linea" />
<meta property="og:url" content="https://tutorialesenlinea.es/">
<meta property="og:description" content="Tutoriales En Linea es un portal web de tutoriales, cursos online y de aprendizaje que pretenden simular al maestro mostrando al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad." />
Código específico del blog de Blogger
Compruebe si estas etiquetas están en su lugar. Si no es así, incluya estas etiquetas en la sección <head> de su plantilla cuando sea necesario.
Title : <title><dаta:blog.pageName/></title>
Meta description : <meta expr:content='dаta:post.snippet' name='description'/>
og:title : <meta expr:content='dаta:blog.pageTitle' property='og:title'/>
og:url : <meta expr:content='dаta:blog.canonicalUrl' property='og:url'/>
og:description : <meta expr:content='dаta:blog.metaDescription' property='og:description'/>
og: image : <meta expr:content='dаta:blog.postImageUrl' property='og:image'/>
Comentarios