Cuando creas y publicas un post social en HubSpot, la red social correspondiente intentará generar una vista preliminar de la imagen para tu publicación. En función del enlace que ingresaste para el post, la red social escaneará las metaetiquetas en el código fuente de tu página y rastrea el archivo robots.txt de tu sitio web.
Si estás alojando tu sitio web en un proveedor externo, como WordPress, y la vista preliminar de tu publicación no aparece como se esperaba, sigue las instrucciones a continuación.
Actualiza tu robots.txt
Un archivo robots.txt informa a los motores de búsqueda de cómo indexar tu sitio web. Si no has agregado o configurado correctamente tu archivo robots.txt, las redes sociales no podrán analizar el contenido de tus páginas. Facebook y X proporcionan las cadenas del agente del usuario que tendrás que Agregar a tu archivo Robots.txt:
User-agent: facebookexternalhit
Disallow:
User-agent: Twitterbot
Disallow:
LinkedIn no proporciona documentación para su cadena de agente de usuario, pero puedes usar el Inspector de publicación de LinkedIn para confirmar si LinkedIn puede rastrear el contenido de tu sitio web.
Agrega metaetiquetas a la sección <head> de las páginas de tu sitio web
Los motores de búsqueda y redes sociales analizarán la sección del encabezado de tu HTML para buscar los metadatos necesarios para generar una vista preliminar de la página. Debes incluir los metadatos para Facebook y X después de tus metaetiquetas principales:
<!-- Primary Meta Tags -->
<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate">
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta property="og:title" content="Title of your Website Page">
<meta property="og:description" content="Description of your Website Page">
<meta property="og:image" content="https://example.com/image.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://example.com/">
<meta property="twitter:title" content="Title of your Website Page">
<meta property="twitter:description" content="Description of your Website Page">
<meta property="twitter:image" content="https://example.com/image.png">
Completa los atributos de contenido para cada una de las metaetiquetas anteriores con los valores correspondientes de tu página. Puedes validar tus metaetiquetas utilizando la herramienta de depuración de Facebook , validador de tarjetas X, y inspector de publicaciones de LinkedIn.
Requisitos de tamaño para imágenes destacadas
Si la imagen destacada de un enlace que has insertado no se muestra correctamente en tu vista previa social (por ejemplo, la imagen está cortada o la proporción es incorrecta), puede que tengas que editar la imagen para que tenga las dimensiones correctas para la red social en la que estás publicando, y luego volver a publicar la página. Si publicas en Facebook, puedes obtener más información sobre sus requisitos de imagen destacados en su documentación.
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 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 medio que incluyas en tus publicaciones de redes sociales sigue las pautas de tamaño de archivo para cada red. Si HubSpot determina que un archivo es demasiado grande para publicar en una red determinada, se mostrará una advertencia. Los tamaños de archivos máximos para cada red social aparecen a continuación:
- Facebook: 8 MB (menos de 1 MB recomendado para archivos PNG para evitar pixelación)
- Instagram: 8 MB
- X: 5MB (15MB para GIFs)
- LinkedIn: 10 MB
Discrepancias de color y claridad de la imagen
Diferencias en el color de la imagen
Los perfiles de colores incrustados podrían afectar cómo se muestra 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 podrían verse diferentes cuando se realiza una vista preliminar de la imagen en tu administrador de archivos. Puedes pasar la URL de tu imagen por una herramienta externa para ver si está utilizando 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 fotos, como Photoshop, luego republicar la página antes de publicar los posts 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 y pueden variar en la calidad de lo que ves en HubSpot. Por esta razón, se recomienda usar imágenes de resolución relativamente altas (en la relación de aspecto recomendada) para cada red. Si tu imagen no cumple con los requisitos de una red social, una advertencia aparecerá en la herramienta de publicación en redes sociales de HubSpot para ajustar la imagen según corresponda.
Si aún encuentras problemas con tus vistas preliminares de enlaces que no se muestran correctamente, echa un vistazo a nuestra guía de solución de problemas.
Marketing Hub
Pro
,
Enterprise
