Social

¿Qué debo hacer si mi imagen destacada no se muestra correctamente en la vista previa de las redes sociales?

Última actualización: March 21, 2018

Requisitos

Marketing Hub: Básico, Pro, Enterprise

Cuando compartes una página en las redes sociales, se muestra una imagen destacada junto con el enlace en la vista previa. Sin embargo, es posible que esta imagen no se muestre siempre de la manera que deseas. Para poder resolver problemas con la vista previa en las redes sociales de manera efectiva, es importante comprender cómo funciona, cuáles son las dimensiones ideales de la imagen destacada y cómo las características exclusivas de cada sitio de redes sociales pueden afectar el aspecto de esta.  

¿Cómo funciona una vista previa en redes sociales? 

Una vista previa depende de las metaetiquetas o de las etiquetas HTML de la sección de tu página. Estas etiquetas son parte de un Protocolo de Gráfico Abierto, que es un conjunto de etiquetas dentro del código HTML de tu sitio que te permite integrar tus páginas con los sitios de redes sociales. Estas etiquetas indican a Facebook, LinkedIn, Google Plus y Twitter en qué deben enfocarse al crear una vista previa de tu enlace compartido. Estas son las etiquetas básicas: 

  • og:title: el título del contenido que estás compartiendo.
  • og:type: el tipo de contenido que estás compartiendo, como un video o una página web.
  • og:image: la URL de una foto; esta será la imagen destacada.
  • og:url: la URL única de la página. 

Existen otras etiquetas, pero estas son las básicas que se utilizan para generar las vistas preliminares de tu enlace, ya sea una vista previa de un enlace de Facebook o una Twitter card.  

Estas etiquetas se configuran automáticamente para las publicaciones del blog: el título, la metadescripción y la imagen destacada. Sin embargo, para las páginas de destino y las páginas de sitio web, solo el título y la metadescripción se configuran automáticamente. La imagen destacada se debe configurar manualmente. Para obtener instrucciones acerca de cómo configurar una imagen destacada para una página de destino o una página de sitio web, lee este artículo.  

¿Qué debo hacer si el tamaño de mi imagen no se muestra como quiero? 

Si tu imagen destacada no se muestra como debería en la vista previa de redes sociales (tal vez está cortada o es de un tamaño inadecuado), es posible que debas ajustar la imagen de modo que cumpla con las dimensiones ideales.

El aspecto de tu imagen destacada variará según la plataforma; sin embargo, para ayudar a mantener la consistencia, lo mejor es mantener una proporción 16:9: 1600 px por 900 px, sin borde, con 65 px de relleno en la parte superior e inferior y 130 px de relleno a la izquierda y a la derecha. Puedes encontrar más información acerca de las dimensiones ideales aquí. 

¿Qué características específicas del sitio pueden afectar el aspecto de mi imagen destacada? 

Aunque tengas las dimensiones ideales y hayas configurado la etiqueta og:image correctamente, aún puede haber problemas con el aspecto de tu imagen destacada. Los siguientes son algunos problemas que surgen con Facebook, Twitter y LinkedIn: 

  • Facebook: tal vez notes que después de compartir un enlace en Facebook la imagen se ve diferente que con la herramienta de redes sociales de HubSpot. La mejor herramienta que se puede usar en este caso es Debugger de Facebook. Esta herramienta te muestra lo que tomará Facebook para la vista previa en las redes sociales además de los errores que hay y por qué la vista previa no se verá como deseabas; por ejemplo, la herramienta te indicará si falta la etiqueta og:image o si la imagen es demasiado pequeña. 
  • Twitter: además de la herramienta Debugger de Facebook, puedes usar la herramienta de validación de Twitter cards aquí para detectar errores que pueda haber con la imagen destacada. Además, Twitter requiere una metaetiqueta especial además de las etiquetas og: . Mientras que en tus publicaciones del blog esta se configura automáticamente, en tus páginas de destino y páginas de sitio web deberás configurarla de forma manual. Puedes colocar esta etiqueta en la configuración de contenido o en el encabezado del código HTML de una página. 
    • Para colocar la etiqueta en la configuración de contenido, navega a Contenido > Configuración de Contenido y selecciona Publicación en la Página a la izquierda. Desplázate hasta el campo HTML de Encabezado del Sitio, pega la etiqueta y haz clic en Guardar Cambios. Esto aplicará la etiqueta a todas las páginas en cualquier dominio que especifiques en tu configuración de contenido.  
    • Para colocar la etiqueta en una página específica, haz clic en Configuración en la parte superior del editor de la página. Desplázate hasta Opciones Avanzadas y haz clic en Editar HTML del Encabezado. En la casilla desplegable, pega la etiqueta y haz clic en Guardar Cambios.

  • LinkedIn: un problema común que puede presentarse en LinkedIn es no ver la imagen destacada nueva inmediatamente. Esto se debe a que LinkedIn no tiene una herramienta para generar una vista previa del enlace y a que el sitio solo analiza las páginas una sola vez por semana. Por lo tanto, es probable que, cuando configures una imagen nueva, no la veas inmediatamente en la vista previa.