Logo Lainformacion.com
< Más calor que en el Sol
La Mars Reconaissance Orbiter llega esta noche a Marte >

Cómo añadir una caja de búsquedas de Google para tu sitio web

Esto es más viejo que yo que sé… pero hoy tuve que hacerlo para la web de un proyecto y no conseguía encontrarlo fácilmente, así que tal vez a alguien le venga bien la página y la explicación.

Google Free es el nombre del servicio de Google en el que puedes conseguir el código necesario para poner una caja de Google en tu web. También existe en castellano, pero mucho menos completo, como Agregue un vínculo a Google. El código de Google Free es un «formulario» (FORM) de caja de búsqueda que debes incluir en el HTML de la portada o de las páginas en que quieras que aparezca, normalmente en la plantilla de la cabecera o del lateral, si es que si utilizas un editor de contenidos.

Poner una caja de búsqueda de Google tal cual «para buscar en toda la Internet» puede no tener mucho sentido, pero Google Free with Site Search que es la tercera opción que ofrece Google es la más interesante: con ella puedes hacer que esa caja de búsquedas que pones en tu web encuentre cosas únicamente dentro de tu propia web.

Si copias y pegas en tu página el código tal y como viene y personalizas el dominio sobre el que debe buscar, consigues algo como esto:

Google
WWW Microsiervos.com

Esto está bastante bien y es bastante resultón, sobre todo para páginas web que no tienen ningún tipo de buscador. Como se ve, la opción marcada por omisión es la de tu sitio y los resultados se muestran en Google pero limitados a la URL que le hayas indicado. Tecleando algo y pulsando Retorno el invento ya funciona.

Pero lo más interesante es que sobre el código original de Google Free with Site Search se pueden cambiar algunas cosillas si necesitas personalizarlo más. Lo primero obviamente es cambiar YOUR DOMAIN NAME por el dominio de tu sitio web. Los dos primeros valores van ocultos en el formulario, y el tercero es el que se ve realmente debajo de la caja, así que puedes escribirlo como más bonito quede.

Sobre el aspecto puedes cambiar algunas cosas:
  • El bgcolor="#FFFFFF" de la tabla se puede eliminar si lo prefieres transparente, tal vez porque el color de tu página no sea blanco.
  • El texto del botón originalmente es Google Search pero puedes cambiarlo por algo en tu idioma, como Buscar en el parámetro value del tercer input.
  • Para cambiar tipo de letra y tamaño del texto lo mejor es eliminar los font del original y a todos los input añadirles el parámetro class="xyz" habiendo definido antes el estilo de esa clase en la hoja de estilos CSS de la página.
  • El tamaño de la caja se cambia donde pone size=31, con 15 ó 20 suele ser suficiente.
  • El logo de Google es obligatorio que aparezca (condiciones de uso), pero seguramente puedes cambiar sin problemas un poco la imagen original, Logo_40wht.gif por una un poco más pequeña o acorde con lo que necesites. Moviendo el img (cuidado con las celdas de la «tabla») puedes cambiarla de posición antes o después del botón e incluso modificar la ruta del fichero de imagen, para hosperarlo en un directorio de tu servidor.
  • Tal y como dicen las instrucciones, asegúrate que la codificación del texto en tus páginas es Unicode UTF-8 y, si no lo es, para que las búsquedas funcionen correctamente, cambia los valores UTF-8 de los dos primeros input por lo que corresponda. La alternativa típica es ISO-8859-1.
  • Podrías eliminar los botones de radio pero conservar la misma funcionalidad, quitando el input type=radio y añadiendo otros dos input="hidden" ocultos con estos parámetros name="domains" value="xyz.com" y name="sitesearch" value="xyz.com" (donde pone xyz.com pones tu dominio).
  • Si prefieres que los resultados aparezcan en Google España en vez de en en Google.com (el internacional, en inglés) puedes cambiar google.com por google.es en el form de la primera línea del código.
Para terminar con esto de la caja de búsqueda para tu web y asegurarte de que funciona bien, necesitas que Google ya haya leído todas tus páginas con anterioridad, de la mejor forma posible. Esto lo hace el famoso robot de Google automáticamente. Puedes comprobar cuántas páginas tiene indexadas buscando site:xyz.com en Google. Si no hay muchos resultados, la caja no servirá de gran cosa, pero normalmente el robot de Google habrá encontrado tu web y lo habrá indexado a fondo a las pocas semanas de haberlo creado.

Para asegurarte de que Google encuentra bien todas tus páginas, una opción es crear y utilizar Google Sitemaps, con lo cual le generas un fichero con todas las URLs de tu site para que le resulte más fácil encontrarlo (aquí expliqué cómo hacer un generador de Sitemap para Movable Type.) Una vez dado de alta y cuando Google lo lea, los resultados se notan al cabo de unos días o unas semanas.

Actualización (octubre 2006): En este mismo blog hemos terminando implementando una variante de esta solución como buscador principal (el de Movable Type se volvió demasiado lento). Se puede ver la explicación completa en Buscador de Google en Microsiervos.