Tras poco más de un mes en fase beta, la búsqueda en el sitio ya está lista para toda la comunidad de Webflow. Con un control total sobre el diseño y el contenido, tendrás todo lo necesario para crear la función de búsqueda que tus proyectos requieren.
Para algunos sitios, la búsqueda es simplemente imprescindible. Por ejemplo, piensa en los siguientes tipos de sitios web:
- Centro de ayuda
- Blog
- Sitio de noticias
- Sitio de recetas
La navegación puede ayudar a guiar a los usuarios por el sitio, pero cuando un sitio empieza a llenarse de contenido, la búsqueda es la forma más intuitiva (y sin duda la más rápida) para que los visitantes encuentren lo que necesitan.
Con el lanzamiento hoy de la búsqueda en el sitio para todos los sitios con planes CMS y Business, ya puedes crear esos sitios repletos de contenido sabiendo que ofrecerás una experiencia de búsqueda de alto nivel. Y, como todo en Webflow, tendrás control total sobre el diseño de esa experiencia.
Cómo funciona la búsqueda en Webflow
Trabajar con la búsqueda en Webflow consta de 3 elementos:
- Diseñar la barra de búsqueda
- Diseñar la página de resultados de búsqueda
- Refinar el contenido de tu motor de búsqueda
A continuación, explicaré brevemente cada una de estas tres partes, pero para obtener una visión completa de todo esto y más, consulta nuestra guía de búsqueda en el sitio en Webflow University.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Diseñar tu barra de búsqueda
Encontrarás la búsqueda como un componente en el panel Añadir, en el lado izquierdo del Diseñador. Una vez que hayas añadido el componente de búsqueda a tu sitio, funciona de forma muy parecida a los elementos de formulario que ya conoces. Al igual que con los formularios (o cualquier otro elemento en Webflow), tienes control total sobre el diseño y el estilo de tu barra de búsqueda para que combine con tu sitio. (Consejo profesional: echa un vistazo a nuestro artículo sobre mejores prácticas para el diseño de búsqueda en sitios para obtener algunos consejos antes de empezar).
Diseñar tu página de resultados de búsqueda
El diseño de los resultados de búsqueda se realiza en una nueva página de utilidad creada específicamente para ese fin, a la que ahora puedes acceder desde el panel de Páginas.
La página de resultados presenta un diseño básico, relleno con resultados de muestra para que puedas ajustarlos antes de añadir el hosting o crear un índice. (Nota: La búsqueda completa solo está disponible en sitios con hosting CMS o Business, pero puedes diseñar la búsqueda y probar con resultados de muestra en cualquier sitio).
Desde este punto de partida, puedes personalizar el diseño como quieras: añadir miniaturas, eliminar elementos y ajustar el espaciado según lo necesites. Como verás, dar estilo a la lista de resultados de búsqueda es muy parecido a dar estilo a una Lista de colección, ya que cada cambio que haces se aplica a todos los resultados de la lista.
Esto abre un abanico de posibilidades para crear diseños creativos en tu página de resultados de búsqueda, para que no te quedes atrapado con un muro de texto poco útil que los usuarios tengan que descifrar.
Refinar el contenido del motor de búsqueda
Para sacarle el máximo partido a la búsqueda, también querrás dedicar algo de tiempo a refinar tu índice de búsqueda. Esto tiene dos aspectos principales:
- Configurar títulos y miniaturas específicos para cada página
- Excluir el contenido que no quieres que aparezca en los resultados de búsqueda
Configurar títulos y miniaturas de búsqueda
En la página de resultados de búsqueda, los títulos de cada elemento se extraen de lo que hayas configurado en la nueva sección de ajustes de búsqueda de tu panel de configuración de página (justo debajo de los controles existentes para metadatos SEO y contenido OG). Puedes personalizarlos página por página para las páginas estáticas, o a nivel de Colección para las Páginas de colección gestionadas por el CMS.
Excluir contenido de la búsqueda
Además de establecer títulos y miniaturas específicos para cada página, también puedes excluir páginas enteras de la búsqueda, como tu página de inicio, por ejemplo, que generalmente sirve como punto de conexión para otras páginas de tu sitio y podría desentonar en una lista de resultados de búsqueda.
Para excluir páginas, marca la casilla en los ajustes de búsqueda de esa página. Esto también se puede hacer a nivel de Página de colección para excluir un tipo de contenido completo de la búsqueda.
También puedes excluir elementos recurrentes comunes como barras de navegación, formularios y pies de página de tu motor de búsqueda para centrar la búsqueda en el contenido que realmente importa. (Por ejemplo, en la búsqueda de nuestro blog, hemos restringido la búsqueda para que solo cubra el título y el cuerpo de cada artículo).
¿Y qué hay de la tecnología?
Entre bastidores, hemos construido la búsqueda sobre Elasticsearch, una tecnología de código abierto que pone a tu alcance bibliotecas de procesamiento de lenguaje natural y una relevancia líder en el sector.
No solo obtienes una búsqueda sencilla basada en bases de datos, sino que ejecutas tu propia instancia de una de las mejores tecnologías de búsqueda disponibles en la web. (Pronto publicaremos un artículo con más detalles sobre la tecnología detrás de esta función).
Dónde aprender más
Para conocer todos los detalles sobre cómo configurar la búsqueda en tu sitio, consulta nuestra guía de búsqueda en el sitio de Webflow University. ¡Para ver cómo funciona, prueba a buscar en este blog!
Nos encantaría ver cómo usas la búsqueda, ¡así que anímate a compartir tus enlaces en los comentarios!
