Última actualización: enero 19, 2023
Cuando agregues enlaces a publicaciones en redes sociales en HubSpot, verás una vista preliminar que incluya una imagen destacada, título de página y descripción de la página. Si la imagen, el título o la descripción no aparecen o ves problemas con la imagen destacada, usa los pasos a continuación para solucionarrlos.
Las vistas preliminares en redes sociales se basan en metaetiquetas en la sección <head> del HTML de tu página. Estas etiquetas informan a los sitios de redes sociales como Facebook, LinkedIn y Twitter en que centrarse cuando creen una vista preliminar de tu enlace compartido. Las meta etiquetas básicas son:
- og:title: el título de tu contenido.
- og:type: el tipo de contenido, como un video o una página web.
- og:image: la URL de la imagen para representar tu contenido.
- og:url: la URL única de tu contenido que se utilizará como su ID permanente.
- og:description: la descripción que resume tu imagen.
El título, la metadescripción y la imagen destacada se configuran automáticamente para publicaciones de blog. Para páginas de destino y páginas de sitio web, si bien el título y la metadescripción se establecen automáticamente, la imagen destacada debe establecerse manualmente.
Nota: LinkedIn mostrará tu imagen destacada, el título de la página y la URL en su tarjeta de vista previa, pero no incluirá tu meta descripción.
La imagen destacada, el título de la página o la descripción de la página no se muestran en la vista preliminar de la publicación
Si la vista preliminar de tu publicación en redes sociales no muestra la imagen destacada esperada, el título de la página o la descripción de la página, puedes resolver problemas en HubSpot usando herramientas de depuración externas.
Solución de problemas dentro de HubSpot
Si estás enlazando a una publicación de blog, página de destino o página de sitio web alojada en HubSpot, asegúrate de que una imagen destacada esté configurada en la configuración de la página o publicación.
También puedes establecer manualmente una etiqueta og:image para agregar una imagen destacada:
-
En tu cuenta de HubSpot, navega a las páginas de destino o páginas del sitio web.
- Coloca el cursor sobre una página y haz clic en Editar.
- En el editor de contenido, haz clic en la pestaña Configuración y luego haz clic en Opciones avanzadas.
- En la sección Fragmentos de código adicionales, escribe este fragmento de código en el campo HTML del encabezado.
<meta property="og:image" content="IMG URL">
- Reemplaza la IMG URL con la URL de tu archivo de imagen.
- Para optimizar aún más una imagen para Twitter, ingresa este fragmento de código adicional en el campo HTML del encabezado
<meta name="twitter:card" content="summary_large_image">
- En la parte superior derecha, haz clic en Publicar o Actualizar para activar los cambios.
Solución de problemas con herramientas de desarrollador de navegador
Si estás compartiendo una página externa en tu publicación en redes sociales, puedes usar herramientas de desarrollador de navegador como herramientas para desarrolladores de Chrome para asegurarte de que se configuren correctamente las metaetiquetas para la página. Consulta la fuente de la página y luego comprueba y confirma lo siguiente:
- La etiqueta
og:imagey otras metaetiquetas se muestran correctamente. - Los detalles de cada etiqueta son correctos. Por ejemplo, comprueba que la URL de imagen destacada para la etiqueta
og:imagees correcta. - Solo hay una ocurrencia de cada tipo de metaetiqueta. Si hay múltiples eventos de la misma metaetiqueta, las redes sociales no pueden seleccionar la opción correcta cuando generas una vista preliminar del enlace.
- Tus metaetiquetas están cerca de la parte superior del HTML. Si tienes códigos adicionales o marcadores antes de tus metaetiquetas, es posible que los rastreadores de redes sociales no puedan ubicar estas etiquetas.
Solución de problemas con las herramientas de depuración de redes sociales
Si ves una discrepancia entre tu vista preliminar en redes sociales y las metaetiquetas, es posible que la red social necesite rastrear nuevamente recargar esa página. Usa las siguientes herramientas de validación en cada red social para descubrir cualquier error o activar un nuevo rastreo de página
- Depurador de contenidos: compartidos de Facebook: Facebook vuelve a rastrear automáticamente el contenido compartido cada 24 horas. Para activar manualmente un nuevo rastreo, haz clic en Raspar nuevamente en el Sharing Debugger.
- Validador de tarjetas de Twitter: Twitter almacena en caché el contenido durante 7 días después de publicar un post. Haz clic en Vista preliminar tarjeta en el Card Validator para desencadenar un resumen de tu contenido.
- Inspector de LinkedIn: LinkedIn almacena en caché el contenido durante 7 días después de publicar un post. Haz clic en Inspeccionar en el Post Inspector para activar un nuevo rastreo de tu contenido.
En general, cualquier post publicado antes del nuevo rastreo de la página seguirá conservando la imagen incorrecta. Si la etiqueta og:image no ha sido establecida para una página, la red social escaneará la página para encontrar la imagen más adecuada para incluirla en publicaciones en redes sociales, que suele ser la primera imagen que encuentra. Una imagen de vista preliminar del enlace pudiera no aparecer en absoluto si se usa un archivo robots.txt o un software de seguridad para evitar rastrear la página.
Problemas de presentación de imágenes destacadas
Si la vista preliminar de tu publicación en redes sociales muestra la imagen destacada esperada, pero la imagen se muestra incorrectamente, puedes comprobar lo siguiente.
El tamaño de la imagen o la proporción es incorrecta
Si la imagen destacada no aparece correctamente en tu vista preliminar de redes sociales (por ejemplo, la imagen está cortada o la proporción es incorrecta), es posible que debas editar la imagen para que tenga las dimensiones adecuadas para la red social en la que estás publicando y luego vuelve a publicar la página.
Se recomiendan las siguientes dimensiones para la optimización de imágenes destacadas en cada red:
- Facebook: 1.91:1
- Twitter: 16:9 para las publicaciones de fotos y 1,91:1 para las imágenes destacadas en las publicaciones de enlaces
- Instagram (cuadrado): 1:1
- Instagram (retrato): 4:5
- Instagram (paisaje): 1.91:1
- LinkedIn (paisaje): 1.91:1
Asegúrate de que cualquier archivo multimedia incluido en tus publicaciones de redes sociales siga las pautas de tamaño de archivo para cada red. Si HubSpot determina que un archivo es demasiado grande para publicarse en una red determinada, aparecerá una advertencia al crear la publicación en redes sociales. Estos son los tamaños de archivos máximos para cada red social
- Facebook: 8MB (se recomienda menos de 1MB para los archivos PNG para evitar el pixelado)
- Instagram: 8MB
- Twitter: 5MB (15MB para GIFs)
- LinkedIn: 10MB
Diferencias en el color de la imagen
Los perfiles de colores incrustados pueden afectar cómo aparece tu imagen destacada en tu publicación en redes sociales. Diferentes sistemas procesan, los perfiles de colores poco comunes de diferentes maneras, por lo que los colores pueden verse diferentes al obtener la vista preliminar de la imagen en tu administrador de archivos.
Puedes ejecutar tu URL de imagen a través de una herramienta externa para ver si usa un perfil de color poco común. Si es necesario, puedes eliminar el perfil de color que interfiere en una herramienta de edición de fotografías externas, como Photoshop y luego volver a publicar la página antes de publicar tu post en redes sociales.
Diferencias en la claridad de la imagen
El administrador de archivos de HubSpot utiliza la compresión de imágenes en JPEG y PNG para ayudar a optimizar velocidades de carga en tu contenido alojado en HubSpot. Las redes sociales también usan la compresión de imágenes en publicaciones, que pueden variar en la calidad de lo que ves en HubSpot.
Por esta razón, se recomienda usar imágenes de resolución relativamente alta para cada red. Si tu imagen no cumple con los requisitos de una red social, aparecerá una advertencia en la herramienta de publicación en redes sociales de HubSpot para ajustar la imagen según corresponda.
