Optimizar y publicar tu sitio en Webflow

Curso de Webflow para Crear Sitios No-code: Componentes, Layouts e Interacciones

Contenido del curso

Introducción a Webflow

Proyecto: portafolio

Interacciones en Webflow

Detalles finales

18
Optimizar y publicar tu sitio en Webflow
Viendo ahora

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:16

Optimizar y publicar tu sitio en Webflow

Curso de Webflow para Crear Sitios No-code: Componentes, Layouts e Interacciones

Clase 18 de 18

Clase 18 / 18

Recursos

Launching a website is more than hitting publish. If you want your Webflow project to rank on search engines, look good when shared on social media, and load fast on any device, you need to fine tune a few settings before going live. Here you'll learn how to optimize and publish a Webflow site for SEO, page speed, and social sharing, step by step.

¿Cómo configurar el SEO de una página en Webflow?

Todo empieza en el panel de Pages del Webflow Designer. Al hacer clic en el ícono de engranaje junto al nombre de tu página, accedes a los SEO settings, donde defines cómo se verá tu sitio en Google y en redes sociales.

¿Qué son el title tag y la meta description?

El title tag es el nombre que aparece como enlace azul en los resultados de búsqueda. Puede ser el nombre de tu marca, de tu sitio o algo descriptivo como Home. La meta description es el resumen corto debajo del título: una o dos líneas que expliquen de qué trata tu página o qué servicios ofreces.

Webflow te muestra un preview en vivo mientras escribes, así puedes ajustar el texto hasta que se vea bien. Una buena práctica es reutilizar la descripción de tu hero section como base para la meta description.

¿Qué es una meta description? Es el texto corto que aparece bajo el título en los resultados de búsqueda. Sirve para convencer al usuario de hacer clic y debe describir el contenido de la página en una o dos líneas.

¿Cómo configurar Open Graph para compartir en redes sociales?

Los Open Graph settings controlan cómo se ve tu sitio cuando alguien lo comparte en plataformas como Facebook. Puedes marcar la casilla para reutilizar el title tag y la meta description que ya escribiste, lo que ahorra tiempo.

La parte clave es la Open Graph image URL: la imagen de preview que aparece junto al enlace compartido. Para obtenerla:

Abre el panel de Assets y elige la imagen que quieres usar.
Haz clic en el ícono de engranaje sobre esa imagen.
Copia la URL con el ícono de link y pégala en el campo de Open Graph image URL.
Guarda los cambios.

Después verás un preview de cómo se mostrará tu sitio al compartirse desde un dispositivo móvil [04:30].

¿Cómo optimizar Webflow para page speed?

La velocidad de carga afecta directamente la experiencia del usuario y el ranking en buscadores. Webflow ofrece varias herramientas para reducir el peso del sitio sin tocar una sola línea de código.

¿Cómo limpiar estilos no usados en Webflow?

En el Style Manager se almacenan todas las clases CSS de tu proyecto. Mientras diseñas, es normal crear clases que luego no usas, y ese código sobrante se carga en el navegador aunque no aporte nada visual.

Webflow incluye un botón Clean Up que detecta esos estilos huérfanos y te permite eliminarlos con un clic. Puedes hacer lo mismo con las interacciones que ya no estés usando. Menos código, carga más rápida [05:30].

¿De qué tamaño deben ser las imágenes en una web?

Uno de los errores más comunes entre diseñadores web es subir imágenes demasiado pesadas. Una imagen de 1 o 2 megabytes ralentiza el sitio de forma drástica.

Estas son las reglas prácticas que conviene seguir:

Imágenes a ancho completo, como un hero section: máximo 1920 píxeles de ancho.
Imágenes en secciones de portafolio o columnas: alrededor de 600 píxeles de ancho.
Peso ideal de una imagen full width: entre 400 y 500 kilobytes como máximo.
Peso ideal de imágenes pequeñas: alrededor de 50 kilobytes.

Si una imagen es más pequeña de lo necesario se ve borrosa, y si es más grande, desperdicias velocidad de carga. El equilibrio está en optimizar antes de subir.

¿Cuál es el tamaño máximo recomendado para una imagen full width? 1920 píxeles de ancho y entre 400 y 500 kilobytes de peso. Más grande hace que el sitio cargue lento; más pequeño se verá pixelado.

¿Cómo publicar un sitio en Webflow con dominio gratuito?

Webflow te regala un subdominio gratuito con la estructura nombredetuproyecto.webflow.io. Es un staging domain perfecto para probar tu sitio en vivo, abrirlo desde el móvil y revisar cómo se comporta en distintos dispositivos.

¿Qué hace Minify CSS al publicar?

Antes de hacer clic en Publish, abre el menú Advanced options y activa todas las casillas, especialmente:

Minify CSS: elimina espacios y saltos innecesarios del código CSS para que cargue más rápido en el navegador.
Use secure frame headers: protege tu sitio contra intentos de clickjacking, una medida de seguridad básica pero importante.

Con esas opciones marcadas, seleccionas el dominio donde quieres publicar y listo, tu sitio queda en línea optimizado [08:15].

¿Se puede usar un dominio .com en Webflow?

Sí. Desde la misma ventana de publicación puedes ir a la configuración del proyecto, contratar un hosting plan de Webflow y conectar tu dominio personalizado. Mientras tanto, el subdominio gratuito te permite compartir y testear sin pagar nada.

Ya tienes tu sitio publicado, optimizado para SEO, listo para compartirse en redes y con tiempos de carga cuidados. Cuéntame en los comentarios cómo quedó tu proyecto y qué parte del proceso te resultó más útil.

Introducción a Webflow

Creación de un Portafolio Web en Webflow paso a paso

Creación de un Portafolio Web con Webflow

Principios de HTML, CSS y modelo de caja en diseño web

Diseño y Herramientas del Editor Webflow

Proyecto: portafolio

Construcción de la Sección Hero en Webflow

Diseño de Encabezados y Botones en Webflow

Diseño de Barra de Navegación en Webflow

Construcción de la Sección de Servicios en un Sitio Web

Creación de Colecciones CMS en Webflow para Portafolios Dinámicos

Diseño de Sección de Portafolio en Webflow CMS

Creación de la Sección Acerca de en Webflow

Creación de un Footer en Webflow para Sitios Web

Diseño Responsivo en Webflow para Todos los Dispositivos

Diseño de Barra de Navegación Responsive en Webflow

Interacciones en Webflow

Interacciones y Animaciones en Webflow: Guía Práctica

Formulario de Contacto en Webflow: Creación y Diseño Interactivo

Interacciones de Webflow: Animar Formularios Emergentes

Detalles finales

Optimizar y publicar tu sitio en Webflow

Optimizar y publicar tu sitio en Webflow

Progreso del curso

Introducción a Webflow

Proyecto: portafolio

Interacciones en Webflow

Detalles finales

Recursos

Recursos