TL; DR: El problema de la imagen de la participación social no es con Beaver Builder. Son los metadatos sociales faltantes. Combina Beaver Builder con un complemento SEO, establece imágenes sociales personalizadas y opcionalmente muestra imágenes destacadas en plantillas de Beaver Themer para tomar el control de cómo se ve tu contenido en las redes sociales.

¿Alguna vez ha compartido una publicación o página de blog en Facebook, solo para ver la imagen incorrecta que se muestra en la vista previa?

Si es así, no estás solo.

Un usuario recientemente hizo esta pregunta en el grupo de Facebook de Beaver Builder:

"¿Alguien tiene una solución amigable para el constructor de Beaver para la publicación cruzada a las redes sociales? Por ejemplo, cuando publico en Facebook, no estoy obteniendo una miniatura adecuada de la imagen destacada: Beaver Builder parece extraer la primera imagen en la página, explota y se ve terrible".

Este es un problema común y, afortunadamente, hay algunas soluciones sólidas (y soluciones proactivas) que lo ayudarán a tomar el control de cómo aparece su contenido cuando se comparte.

Pasemos por qué sucede esto y cómo resolverlo usando complementos de SEO, plantillas Beaver Themer y algunas mejores prácticas de optimización.

¿Cómo solucionar la imagen incorrecta que se muestra cuando comparto mi página?

Cuando publica un enlace a Facebook u otras plataformas sociales, confían en las metaetiquetas de gráficos abiertos para determinar qué imagen, título y descripción mostrar. Si esas etiquetas no están configuradas correctamente, la plataforma podría tomar la primera imagen que encuentra en la página, y no siempre es bonita.

Beaver Builder no maneja metadatos sociales fuera de la caja. Pero con algunas opciones simples, puede solucionar problemas de imagen de compartir social en las plataformas de Beaver Builder y Guide para mostrar exactamente lo que desea:

1. Use un complemento SEO para establecer imágenes sociales personalizadas

La forma más efectiva de solucionar problemas de imagen de compartir social en Beaver Builder es usar un complemento SEO. Algunas opciones populares incluyen:

• Yoast SEO
• Rango de matemáticas
• Todo en un SEO

Estos complementos le permiten establecer una imagen, el título y la descripción de las redes sociales personalizadas para cada publicación y página separadas de su título de SEO regular o imagen destacada:

Cómo establecer una imagen social en Yoast SEO:

• Abra su publicación o página en el editor de WordPress.
• Haga clic en el icono Yoast en la navegación superior.
• Desplácese hacia abajo y haga clic en el botón de apariencia de las redes sociales para abrir la configuración social.
• Cargue su imagen social personalizada y escriba su título y descripción preferidos.

Esto le brinda el control total sobre lo que Facebook, LinkedIn, X (anteriormente Twitter) y otros muestran en vistas previas.

Consejo de un Beaver Builder Pro (ver #5 a continuación): Use el depurador de intercambio de Facebook para probar cómo aparece su página y obligar a Facebook a volver a cortarla después de hacer cambios.

2. Use Beaver Themer para emitir la imagen destacada

Otro enfoque sugerido por un usuario en el grupo de Facebook de Beaver Builder es asegurarse de que su imagen destacada sea realmente visible en la página.

Por qué funciona este enfoque:

Las plantillas de Beaver Builder a menudo reemplazan la salida de tema predeterminada. Si no agrega explícitamente la imagen destacada a su diseño, es posible que no haya existido en el HTML de la página y las plataformas sociales no la detectarán.

Si está construyendo diseños personalizados con Beaver Themer, puede seguir estos pasos para establecer una imagen destacada:

1. Vaya a Beaver Builder> Temer Diseños .
2. Edite su plantilla de publicación singular o cree una nueva.
3. Agregue el módulo de imagen destacado del panel de módulos Beaver Builder (intente usar la barra de búsqueda para buscar 'módulo de imagen presentado' si al principio no lo ves en la lista).
4. Coloque estratégicamente, como en la parte superior de la página, o visualmente oculto usando CSS si se prefiere.

Más allá del intercambio social, este enfoque crea consistencia visual en las publicaciones de su blog. Cada publicación tendrá una imagen destacada bien posicionada de tamaño adecuado que mejore la experiencia del lector. También puede aplicar un estilo, filtros o superposiciones consistentes a través de la configuración del módulo, creando una estética de marca cohesiva.

3. Establezca una imagen social de acción social predeterminada (como copia de seguridad)

Incluso si olvida establecer una imagen personalizada, su complemento SEO puede definir una imagen social predeterminada para todas las páginas o publicaciones. Esto garantiza que si algo se desliza a través de las grietas, el enlace compartido todavía se ve limpio y profesional, no como un logotipo zoom o una imagen aleatoria.

¿Por qué usar una imagen predeterminada?

• Actúa como una red de seguridad cuando no se establece una imagen personalizada.
• Mantiene una apariencia profesional de marca.
• Evita que las plataformas sociales tire de imágenes irrelevantes o de baja calidad.

¿Qué hace una buena imagen predeterminada?

• Su logotipo en un fondo limpio y de marca
• Un gráfico de blog genérico con su URL y colores de marca
• Dimensiones: 1200 × 630 píxeles

La mayoría de los complementos de SEO le permiten cargar una imagen predeterminada en su configuración global. Navegue a la sección de redes sociales de la configuración de su complemento y busque opciones como "imagen predeterminada" o "imagen respaldo". Algunos complementos incluso le permiten establecer diferentes valores predeterminados para Facebook y Twitter.

Revise periódicamente su imagen predeterminada para asegurarse de que aún se alinee con su marca actual y no se haya quedado desactualizado.

4. Consejos de optimización de imágenes para compartir social

Para hacer que sus imágenes compartidas brille, siga estas pautas:

• Tamaño: 1200 x 630 píxeles (ideal para Facebook y LinkedIn)
• Formato: JPG o PNG
• Relación de aspecto: 1.91: 1
• Menos texto, más imágenes: las imágenes pesadas de texto pueden obtener menos alcance en algunas plataformas.

Especificaciones técnicas Dive Deep Dive: La dimensión de 1200 x 630 píxeles no es arbitraria; Es el punto óptimo que funciona en múltiples plataformas. Facebook recomienda este tamaño, LinkedIn lo muestra perfectamente y Twitter lo cultiva adecuadamente. Si bien el formato nativo de Twitter es diferente (1200 x 675), la relación de aspecto 1.91: 1 garantiza que su imagen se muestre bien en todas partes.

El tamaño del archivo también es importante. Mantenga imágenes por debajo de 1 MB para tiempos de carga más rápidos. JPG funciona mejor para fotografías e imágenes complejas con muchos colores, mientras que PNG es ideal para gráficos con texto, logotipos o diseños simples con menos colores.

5. Actualiza el caché de Facebook con el depurador compartido

Si su página se ha compartido en Facebook antes de actualizar la imagen de Social Share, Facebook aún puede mostrar la anterior. Esto sucede porque Facebook almacena los metadatos de su página (título, descripción e imagen).

Para obligar a Facebook a usar su imagen actualizada:

1. Visite el depurador compartido de Facebook.
2. Ingrese la URL de su página y haga clic en la depuración .
3. Revise la vista previa. Si ve la imagen incorrecta, haga clic en Scrape nuevamente .
4. Facebook actualizará su caché con su última configuración.

Tenga en cuenta que si realiza varios cambios seguidos, es posible que deba raspar nuevamente después de cada actualización.

¿Cuál es tu solución preferida?

¿Tiene un método de referencia para resolver los problemas de imagen de compartir social en Beaver Builder?

Únase a la conversación en el grupo de Facebook: ¿Has encontrado un consejo específico de Beaver Beaver Beaver, nos encantaría escucharla!

¡Feliz edificio (y compartir)!