La imagen Open Graph de Webflow no funciona
Webflow configura Open Graph por página, nunca de forma global. Las páginas de plantilla de CMS necesitan un campo de Imagen, y todas las imágenes de esa colección deben tener el mismo tamaño.
Última actualización
Solución rápida
Abre la configuración de la página y la configuración de Open Graph de la página que compartes.
En las plantillas de CMS, elige un campo de imagen de la colección.
Usa JPG o PNG a 1200 x 630 px, el mismo tamaño para toda la colección.
Publica y, a continuación, actualiza el enlace con la herramienta de actualización.
Por qué no se muestra la imagen de Webflow
La página no tiene imagen Open Graph. Webflow no puede configurar etiquetas Open Graph de forma global; cada página necesita la suya propia.
La colección de CMS no tiene ningún campo de Imagen, por lo que el menú desplegable de imagen Open Graph en la plantilla está vacío.
Las imágenes de una colección tienen diferentes tamaños. Webflow requiere que todas las imágenes Open Graph de una colección compartan las mismas dimensiones.
La imagen está en formato WebP o AVIF. El selector de recursos solo muestra JPG y PNG. Webflow señala que algunas plataformas, entre ellas LinkedIn, no admiten WebP o AVIF en este caso.
El cambio aún no se ha publicado o la plataforma ha guardado en caché la tarjeta antigua.
Cómo solucionarlo
En el panel Páginas, abre Configuración de página y luego Configuración de Open Graph.
Haz clic en Seleccionar imagen y elige un archivo JPG o PNG de tus recursos, o pega la URL pública de una imagen.
Para una página de plantilla de CMS, elige un campo de Imagen como la imagen principal en el menú desplegable de imagen Open Graph.
Si todas las imágenes comparten un mismo tamaño, añade
og:image:widthyog:image:heighten Configuración del sitio, Código personalizado, Código Head.Publica el sitio y comprueba la URL activa con el comprobador de etiquetas meta.
Etiquetas que genera Webflow
og:title(o tu título SEO, si marcas la casilla)og:descriptionog:imageCualquier otra cosa, como
og:image:width, va en código personalizado
Reglas para el tamaño de las imágenes
Al menos 1200 x 630 px en 1,91:1, según la guía de Webflow
JPG o PNG desde el selector de recursos
Un único tamaño para cada imagen Open Graph de una colección
Evita una compresión excesiva; Webflow sugiere subir una copia sin comprimir para Open Graph
Cómo forzar una actualización
Publicar no borra las memorias caché de otras plataformas. Pasa la URL por el Sharing Debugger de Facebook y el Post Inspector de LinkedIn, y añade una cadena de consulta al compartir en X, Slack o Discord. La herramienta de actualización las enlaza todas.
Fuentes
Preguntas frecuentes
¿Puedo configurar una sola imagen de Open Graph para todo mi sitio de Webflow?
No. Webflow indica que las etiquetas Open Graph solo se aplican a la página en la que las configuras, así que configúralas página por página.
¿Por qué el menú desplegable de la imagen de Open Graph está vacío en mi plantilla de CMS?
La colección no tiene ningún campo de imagen. Añade uno, rellénalo para cada elemento y selecciónalo en los ajustes de Open Graph.
¿Puedo usar WebP para una imagen Open Graph en Webflow?
Solo pegando su URL; el selector muestra JPG y PNG. Webflow recomienda JPG o PNG porque algunas plataformas no leen WebP.
Comprueba tu página y, a continuación, actualiza la vista previa
Pega tu URL en el comprobador gratuito para ver las etiquetas exactas que lee cada aplicación. Una vez que las etiquetas sean correctas, usa la herramienta de actualización para borrar la vista previa antigua.
Guías relacionadas
La vista previa para redes sociales de Framer no se actualiza
Framer define una vista previa para redes sociales en todo el sitio, anulaciones de página e imágenes de CMS por elemento. Si la nueva imagen ya está publicada pero sigue apareciendo la antigua, la causa es la caché de la plataforma.
La imagen para compartir en redes sociales de Shopify no funciona
Shopify elige la imagen para compartir en un orden fijo: primero el código del tema, luego la configuración del tema y, por último, la imagen en Preferencias. Subirla al lugar equivocado es el error más común.
La vista previa del enlace de LinkedIn no funciona o no se actualiza
LinkedIn genera la tarjeta a partir de cuatro etiquetas og: y guarda una copia en caché. Corrige las etiquetas y, después, haz que LinkedIn vuelva a rastrear la página con Post Inspector.