Última actualización: 4 de septiembre de 2025
Disponible con cualquiera de las siguientes suscripciones, a no ser que se indique de otro modo:
-
Marketing Hub
Pro, Enterprise
Cuando agregues enlaces a publicaciones de redes sociales en HubSpot, verás una vista preliminar que incluya una imagen destacada, el título de la página y su descripción.
Las vistas previas sociales se basan en las metaetiquetas de la sección <head> de su página HTML. Estas etiquetas informan a los sitios de redes sociales como Facebook, LinkedIn y X (antes Twitter) en qué 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 su contenido que se utilizará como ID permanente.
- og:description: la descripción que resume tu imagen.
El título, la meta descripción y la imagen destacada se ajustan automáticamente para las entradas del blog. En las landing page y páginas web, mientras que el título y la meta descripción se ajustan automáticamente, la imagen destacada debe ajustarse 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 entrada de blog, landing page o página web alojada en HubSpot, asegúrate de que la imagen destacada está ajustada en la configuración de la página o entrada .
También puedes establecer manualmente una etiqueta og:image para agregar una imagen destacada:
-
Ve al contenido:
- Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
- Landing Pages: En tu cuenta de HubSpot, dirígete a Contenido > Landing pages.
- Haz clic en el nombre de tu página.
- En el editor, haz clic en el menú Configuración y selecciona Clic.
- En el cuadro de diálogo, pega este fragmento de código en el campo HTML del encabezado:
<meta property="og:image" content="IMG URL">
- Sustituye URL IMG por la URL de tu archivo de imagen.
- Para optimizar aún más una imagen para X, introduzca este fragmento de código adicional en el campo Head HTML :
<meta name="twitter:card" content="summary_large_image">
- En la parte superior derecha, haga clic en Publicar o Actualizar para aplicar los cambios.
Solución de problemas con herramientas de desarrollador de navegador
Si compartes una página externa en tu publicación de redes sociales, puedes usar las herramientas de desarrollador del navegador como herramientas para desarrolladores de Chrome para asegurarte de que se configuren correctamente las meta etiquetas para la página. Consulta la fuente de la página y luego comprueba y confirma lo siguiente:
- La etiqueta
og:imagey las otras meta etiquetas se muestran correctamente. - Los detalles de cada etiqueta son correctos. Por ejemplo, comprueba que la URL de la imagen destacada para la etiqueta
og:imagees correcta. - Sólo hay una aparición 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 meta etiquetas, es posible que los rastreadores de redes sociales no puedan ubicarlas.
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 contenidoscompartidos 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 X: X almacena en caché el contenido durante siete días después de publicar un post. Escribe tu URL y haz clic en Vista preliminar de la tarjeta en el Card Validator para desencadenar un nuevo rastreo de tu contenido.
- Inspector de publicaciones de LinkedIn: LinkedIn almacena en caché el contenido durante siete 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 incluir en publicaciones de redes sociales, lo 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
- X: 16:9 para publicaciones de fotos y 1.91:1 para imágenes destacadas en publicaciones con 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: 8 MB (se recomienda menos de 1 MB para archivos PNG para evitar el pixelado)
- Instagram: 8 MB
- X: 5 MB (15 MB para GIF)
- LinkedIn: 10 MB
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 gestor de archivos de HubSpot utiliza la compresión de imágenes JPEG y PNG para ayudar a optimizar la velocidad de carga de 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.
