Ir a contenido principal
Inicio
HubSpot Base de conocimientos de
Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.

Configura las etiquetas robots.txt de tu sitio web y las metaetiquetas de imagen para la vista preliminar del enlace de posts sociales

Última actualización: enero 19, 2023

Disponible con cualquiera de las siguientes suscripciones, a no ser que se indique lo contrario:

Marketing Hub Professional, Enterprise
Marketing Hub Básico (versión anterior)

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 Twitter proporcionan las cadenas de agente de usuario que necesitarás agregar a tu archivo:

Agente de usuario: facebookexternalhit
No permitir:

Agente de usuario: Twitterbot
No permitir:

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. Deberías incluir los metadatos para Facebook y Twitter después de tus metaetiquetas principales:

<!-- Primary Meta Tags -->
<title>Metaetiquetas — Vista preliminar, Editar y Generar</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 usando la herramienta de depuración de Facebook, el validador de tarjetas de Twitter y el inspector de publicación de LinkedIn.

Si la imagen destacada de un enlace que insertaste no se muestra correctamente en tu vista preliminar de redes sociales (por ejemplo, la imagen está desactivada o la proporción es incorrecta), es posible que debas editar la imagen para que tenga las dimensiones adecuadas para la red social que publicas y luego vuelve a publicar la página. Si publicas en Facebook, puedes obtener más información sobre sus requisitos de imagen destacadas en su documentación.

Se recomiendan las siguientes dimensiones para la optimización de imágenes destacadas en cada red:

  • Facebook: 1.91:1
  • Twitter: 16:9 para publicaciones de fotos y 1.91:1 para imágenes destacadas en posts
  • 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: 8MB (menos de 1MB recomendado para archivos PNG para evitar pixelación)
  • Instagram: 8MB
  • Twitter: 5MB (15MB para GIF)
  • LinkedIn: 10MB

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 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 fotos, como Photoshop, luego republicar la página antes de publicar los posts 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 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.
¿Te resultó útil este artículo?
Este formulario se utiliza solo para recibir comentarios a la documentación. Cómo recibir ayuda con HubSpot.
New to HubSpot? Use these guides to get started.
/es/social/configure-your-websites-robots.txt-and-image-meta-tags-for-social-post-link-previews