Todo lo que tu página web necesita

Como agregar un buscador HTML (interno) a tu web

Crear una caja de busqueda HTML

Hola, espero estés bien. En este post aprenderás a crear un buscador propio en HTML5 para tu página web, con un algoritmo bastante inteligente. Espero te guste.

Un ejemplo de buscador HTML para TodopatuWeb (de Google):

¿Qué tan importante es tener un buscador interno?

Es bien sabido que la organización de la información en internet es muy demandada por parte de los internautas, estos quieren encontrar lo que buscan de la manera más sencilla.

Por ello en un principio en internet se crearon directorios para buscar las páginas web, pero era muy tardado y a veces complicado hallar la correcta.

Se quería algo más eficiente y aparecieron los motores de búsqueda, que al parecer ahorraban y siguen ahorrando mucho tiempo y esfuerzo.

A veces nuestra mente se cierra y no pensamos como los fundadores de Google y queremos manejar nuestra web como un directorio desfasado e irrelevante.

Actualmente el usuario no tiene mucha paciencia y si necesita algo de tu web , tienes que ponerle el medio para que lo encuentre en tiempo record y más aun si tu web tiene o planea tener gran contenido.

En blogs y tiendas online medianas y grandes el buscador interno puede hacer la diferencia entre una buena y una mala experiencia de usuario.

¿Cómo crear un buscador HTML5 interno para tu web?

  • Con Google Custom Search


Es la mejor opción que existe, ya que emplea parte del famoso algoritmo de Google, el cual técnicamente es el más eficaz del mundo.

Además proporciona la útil función de “Autocompletado” y la de “Sugerencias”. Incluso le permite al usuario buscar imágenes de nuestra página web.

Su configuración es bastante grande, por cierto, la versión que tenia de pago, paso a no estar disponible. Ahora es totalmente gratis, según entiendo.

  1. Ingresa con una cuenta de Google a la herramienta y empieza a crear tu buscador

Dirígete a la siguiente página web:

Y después haz a hacer clic en el botón “Crear Motor de Búsqueda” (necesitaras obviamente una Google account).

2. Define la información básica pero esencial de tu motor de búsqueda

Lo que sigue es especificar en qué web se va a buscar y que idioma emplea. También debes de ponerle un título al cuadro de búsqueda.

MIra:  Crear popups HTML | CSS y Jquery o sin códigos

Terminado lo anterior podrás copiar el código HTML (haciendo clic en botón “Obtener código”) del buscador y añadirlo a tu sitio, donde quieres que se muestre el widget.

Claro, que eso significaría dejar la configuración por defecto, pero en caso de que quieras personalizarlo, haz click en el botón “Panel de Control”.

4. Configura todo tu buscador interno tal como lo necesitas (opcional)

Como dije anteriormente, ofrece bastantes opciones para configurarse, desde lo más básico hasta lo más avanzado.

Se le puede incluir una descripción y definir palabras clave objetivo, además es posible permitir la búsqueda de imágenes y por voz.

De hecho también puedes obtener ingresos vinculando una cuenta de Adsense. Finalizando los aspectos básicos, otras opciones ofrecidas son la importación y exportación de resultados.

En el apartado de apariencia, puedes elegir el modo en que se mostrara la hoja de resultados y el diseño del buscador en general, teniendo mas de 5 plantillas a disposición, aunque puedes hacer una propia.

Personalizar motor de búsqueda

Es posible especificar términos prohibidos y los autocompletados en la sección de “Funciones de Búsqueda”.

La mejor parte es que ofrece estadísticas acerca de su uso. Perfecto para los amantes de la analítica web.

Sin duda Google Custom Search puede ser más efectivo que lo que dan muchos sistemas de desarrollo web por defecto.

Alternativas:

  • Con Site Search 360

Esta herramienta es una de las mejores, puesto que ofrece un buscador HTML realmente potente y que se adapta perfectamente a cada sitio web, además su interfaz es muy amigable, y por ende tiene un panel de control bastante limpio.

Probar ahora
  • Con Zoomd

Zoomd es una aplicación muy novedosa que presenta una búsqueda con un diseño bastante atractivo y basada más en artículos. Es una de las pocas que permite visualizar un demo de cómo se vería el buscador HTML5 en una web determinada.

Probar ahora
  • Con Swiftype

Es probablemente la alternativa a “GCS” más conocida, ya que sinceramente ha creado una robusta plataforma de motores de búsqueda profesionales. Presenta muchas funciones y características avanzadas, además de un análisis de uso detallado.

MIra:  Como poner un traductor HTML en tu web
Probar ahora
  • Con Crawlit

Crwalit proporciona un buscador interno HTML gratuito para páginas web, aunque su interfaz es un poco anticuada, su proceso de configuración e instalación es bastante sencillo. Incluso su paquetes de pago son realmente muy económicos.

Probar ahora
  • Con AddSearch

Se trata de una de las opciones más amigables y fáciles de usar, ya que su interfaz es realmente clara y directa. Su cuadro de búsqueda HTML5 ofrece la función de “Autocompletado”, que ha demostrado ser bastante eficaz en cuanto a UX, Además, sus precios son muy buenos.

Probar ahora
  • Con Cludo

Cludo es una herramienta dirigida al sector empresarial de alto nivel, su motor de búsqueda personalizado es uno de los más completos y a la vez más cotizados de la lista. Aun así, permite explorar su funcionamiento a través de un “free trial”.

Probar ahora
  • Con Algolia

Algolia es una aplicación que también ha ganado bastante popularidad como fuerte alternativa a Google Custom Search, ya que proporciona un paquete gratuito increíble. Su proceso de indexación puede ser un poco confuso para algunos principiantes

Probar ahora
  • Con Sooqr

Se trata de una de las opciones en la lista más nuevas, sin embargo, es uno de las más completas, ya que ofrece no solo una búsqueda de simples artículos, sino un inteligente sistema de búsqueda para ecommerce, es un todo-en-uno.

Probar ahora
  • Con SearchIQ

SearchIQ es una de las mejores opciones en general de la lista, debido a su potencia, facilidad de uso dentro de la configuración de su buscador HTML5 y a su precio tan asequible. Cuenta con un plugin especial para el CMS WordPress.

Probar ahora
  • Con FusioNBot

Esta herramienta proporciona un cuadro de búsqueda HTML muy simple y un proceso de configuración un poco desfasado, sin embargo no deja de ser eficaz en lo absoluto. Fue una de las primeras opciones (pioneras) en ofrecer este tipo de servicio.

Probar ahora
  • Con Coveo

Esta herramienta se encuentra dirigida al igual al sector empresarial, ofreciendo un sistema de búsqueda HTML bastante inteligente, adema trae consigo otras características como la personalización de contenidos y un servicio de usuario a usuario.

MIra:  Gran Widget - Como Saber Quien Visita tu Web
Probar ahora
  • Con SearchBlox

Este Software se descarga e instala manualmente dentro del archivo del sitio web al que se le quiere incorporar su buscador interno, proporciona una increíble función de análisis de texto avanzada, además es muy asequible en general.

Probar ahora
  • Con Bing Custom Search

Es la solución del motor de búsqueda de Bing, de hecho es una de las más potentes y corre bajo el respaldo de Microsoft Azure, proporciona funciones de adaptación y comportamiento únicas, además su API hace que sea flexible toda su implementación.

Probar ahora
  • Con Thunderstone

La empresa Thunderstone ofrece desde ya hace varios años un software de búsqueda HTML, divido en varias presentaciones, la más completa contiene un algoritmo de alta calidad dirigido también a grandes corporaciones.

Probar ahora

CMS’s que ya ofrecen un buscador interno como función

Algunos creadores web ya te proporcionan un buscador HTML (algunas como función Premium) un poco menos eficientes que los mencionados en el post, los cuales son:

  • WordPress
  • WordPress.com
  • Weebly (Premium)
  • emiweb
  • Blogger
  • Wix
  • SquareSpace

¿Cómo se pone el código HTML en una web?

Una vez que se te genera el código HTML de tu cuadro de búsqueda, copialo y pegalo en tu sitio web, exactamente dónde quieres que se visualice.

Lo más recomendado es que sea dentro del “Header” o encabezado ya que es la ubicación para el buscador de una web, plasmada en la mente los visitantes, según estudios sobre UX.

  • Si no sabes realmente como se inserta un código HTML a una web, te dejo este tutorial introductorio en donde explico cómo hacerlo en los más plataformas de creación web más famosos como JIMDO y Weebly.

Si te surgen más problemas o dudas tan solo deja un comentario abajo para que te responda lo antes posible.

Espero sinceramente te haya servido esta información, si fue asi, comparte el post, muchas gracias.