Como usar el cuadro de búsqueda personalizada de Google en mi sitio

Todos los que entran a este sitio web han visto y muchos de ellos han usado, el cuadro que permite buscar contenido ya sea artículos o imágenes en las páginas publicadas.
El buscador usa Google Custom Search Engine (CSE) o la Búsqueda Personalizada de Google.
Al usarlo se busca no en nuestro sitio, sino en la base de datos de Google el que tiene indexadas casi todas nuestras páginas.
Usar este sistema de búsqueda ofrece muchas ventajas, las que compartimos con nuestros lectores, principalmente los que tienen un sitio o un blog en internet.
Más abajo explicamos cómo usar este servicio y como insertar el cuadro en todas las páginas.

Ventajas y beneficios de usar la Búsqueda Personalizada de Google

Muchos sitios de internet, al igual que los blogs de Blogger y WordPress poseen un buscador interno.
Al usar el cuadro de búsqueda de Google todas las peticiones pasan por el buscador, lo que puede mejorar ligeramente nuestro posicionamiento de nuestro sitio.
Es una de las mejores ventajas para todos los que dependemos en mayor o menor medida del tráfico que envía el buscador.
El funcionamiento del servicio de Google Custom Search Engine es rápido, los resultados muestran una miniatura de cada página y su aspecto se puede personalizar así como la forma en que se muestran los resultados.

Otra de las ventajas del servicio es la opción de poder buscar además del método predeterminado que es la búsqueda web (paginas), poder buscar solo imágenes y fotos.
El resultado de la búsqueda de imágenes es algo similar al servicio de Google Imágenes.

Esto beneficia a todos los sitios que publican regularmente fotos e imágenes.

Como crear un cuadro de búsqueda con Google para mi sitio

Para poder usar el servicio de Búsqueda Personalizada de Google (Google Custom Search Engine o CSE), el único requisito es poseer una cuenta de Google y adicionalmente es necesario que las páginas de nuestro sitio o la mayoría estén indexadas por el buscador.
Solo basta con acceder a la página del servicio, crear un nuevo motor de búsqueda, copiar el código que nos ofrecen y pegarlo en las páginas para que se muestre el cuadro de buscar.
Sigue los siguientes pasos:
Cierra la página para probar el funcionamiento del nuevo motor, las otras opciones de configuración y personalización podrás modificarlas más tarde.

Como usar e insertar el código para el buscador

El código obtenido es necesario insertarlo en las páginas de nuestro sitio.
Los que usen WordPress o Blogger solo necesitan agregarlo en la plantilla del blog, justo en el lugar que desean que se muestre el cuadro de búsqueda.
En WordPress hay disponible plugins que hacen más fácil la tarea de insertar el código, pero es preferible hacerlo manualmente y no depender de una aplicación externa.
Después de que comprobemos que el cuadro funciona correctamente, podemos retroceder a nuestro panel en la página de Búsqueda Personalizada y personalizarla a nuestro gusto.
Los cambios se actualizarán inmediatamente sin tener que tocar más el código.
Se pueden probar varias opciones en la personalización y hasta incluso usar el motor de búsqueda para buscar en otros sitios de internet, en páginas que contengan un marcado específico de schema.org.

Como hacer que valide el código de Búsqueda Personalizada de Google

Al insertar el código del buscador en las páginas de nuestro sitio y verificarlas con el Validador HTML de W3C, comprobaremos que no validan.
La responsable del error es la siguiente etiqueta:

<gcse:search></gcse:search>

Hacer que el código valide es algo sencillo, solo sustituye la etiqueta anterior por la siguiente:

<div class="gcse-search"></div>

Compruébalo en la siguiente imagen:

Finalmente puedes agregar cualquier mensaje junto con el script, para animar a que los lectores usen el cuadro de búsqueda.
De esa forma facilitas encontrar el contenido publicado en tu sitio y te beneficias de forma secundaria con el buscador.