En esta página, se explica cómo puedes personalizar la apariencia de tu cuadro de búsqueda y los resultados de la búsqueda. Si deseas implementar el diseño de tu motor de búsqueda con el archivo de contexto, consulta la página "Diseño de la apariencia con XML.
- Descripción general
- Diseño de componentes individuales de la IU de la Búsqueda
- Cómo alojar los resultados con el elemento de búsqueda
- Cómo establecer el diseño del elemento de búsqueda
- Cómo diseñar el cuadro de búsqueda
- Diseño de los resultados
- Implementa el diseño en tu sitio web
Descripción general
Puedes cambiar tanto el cuadro de búsqueda como los resultados de la búsqueda de tu motor de búsqueda programable en el panel de control o en el archivo de contexto XML. Si tienes pocos motores de búsqueda, administrarlos y personalizarlos con el panel de control es bastante sencillo. Solo debes navegar a la página Aspecto, seleccionar un estilo, diseñar los componentes, hacer clic en Guardar y listo. En esta página, se explica cómo hacer todo eso. Sin embargo, si creas y administras una gran cantidad de motores de búsqueda, incluso ese procedimiento simple se vuelve tedioso cuando se repite en varios motores de búsqueda. En esos casos, sería mejor trabajar con XML. Si decides usar XML, primero lee esta página para tener una idea de cómo funciona todo en general. Luego, lee la página Diseño de la apariencia con XML para obtener información sobre los elementos y atributos XML.
Si no sabes si debes usar el panel de control o el formato XML, consulta la página Conceptos básicos, en la que se analizan los beneficios y los desafíos de cada formato.
Nota: Antes de comenzar a diseñar la apariencia y el estilo de tu motor de búsqueda personalizado, lee los Lineamientos para implementar el Motor de Búsqueda Programable . Es un documento breve que te indica cómo debes manejar la atribución y la marca de Google.
Cómo alojar los resultados con el elemento de búsqueda
Un elemento de búsqueda es un objeto que puedes incorporar en tu página web y que permite una amplia personalización. Puede mostrar el cuadro de búsqueda y los resultados de la búsqueda, ya sea juntos en la misma página web que está viendo el lector o en diferentes páginas web.
Nota: El elemento de búsqueda, cuando se combina con un diseño compacto, funciona bien en dispositivos móviles.
También puedes aprovechar la API de Programmable Search Element Control para personalizar aún más la IU de la búsqueda. Se admiten muchas personalizaciones a través de atributos HTML. Por ejemplo, puedes seleccionar entre seis diseños para la página de resultados o establecer la cantidad de resultados de la búsqueda que se mostrarán.
El Motor de Búsqueda Programable ya no admite la opción de hosting de iframe. Te recomendamos que uses los diseños "Dos páginas" o "Solo resultados" en el elemento de Búsqueda como las nuevas opciones. Consulta nuestra entrada de blog para obtener más información.
Diseño de componentes individuales de la IU de búsqueda
Los componentes personalizables
Los componentes que puedes personalizar dependen del diseño del elemento seleccionado de tu motor de búsqueda. Por ejemplo, el panel de control te permite agregar un logotipo solo para los motores de búsqueda alojados por Google. No puedes agregar un logotipo a los motores de búsqueda que usan otras opciones de alojamiento.
Puedes definir los siguientes componentes con el panel de control:
- Diseño del elemento de búsqueda
- El cuadro de búsqueda
- Los resultados de la búsqueda
- Las pestañas de refinamiento
- Las promociones
- El logotipo (solo alojado en Google)
Cómo establecer el diseño del elemento de búsqueda
Tienes la opción de personalizar el diseño de la IU de búsqueda en la página web. Puedes colocar el cuadro de búsqueda y la sección de resultados en la misma columna, o bien mostrarlos en columnas separadas, con el cuadro de búsqueda en una columna y la sección de resultados en otra, o incluso en otra página.
Estas son las opciones de diseño disponibles (haz clic en los vínculos para ver demostraciones):
| Opción | Descripción |
|---|---|
| OverLay | Muestra los resultados de la búsqueda de forma superpuesta. |
|
Dos páginas
Simple Varias secciones de resultados y cuadros de búsqueda |
El cuadro de búsqueda y la sección de resultados de la búsqueda se colocan en dos páginas web diferentes.
Nota: La sección de resultados de la búsqueda también contiene un cuadro de búsqueda. Los usuarios pueden enviar consultas directamente en la página de resultados de búsqueda. |
| Ancho completo | El cuadro de búsqueda y la sección de resultados de la búsqueda ocupan todo el ancho de la página o la columna en la que insertaste el elemento de búsqueda. |
| Dos columnas | El cuadro de búsqueda y la sección de resultados de búsqueda se encuentran en diferentes columnas o secciones de tu página web. Para cerrar la sección de resultados de la búsqueda, el usuario hace clic en el ícono de la X junto al cuadro de búsqueda. |
| Compacta |
Al igual que la opción de ancho completo, esta ocupa todo el ancho de la página o la columna, pero la sección de resultados muestra menos resultados, por lo que ocupa menos espacio vertical cuando se expande en la página web.
Nota: Esta opción está optimizada para smartphones y dispositivos móviles. |
|
Solo resultados
Buscar por URL Buscar por cuadro de búsqueda |
Los resultados de la búsqueda se colocan en una de tus páginas web, y la página de resultados de la búsqueda no contiene un cuadro de búsqueda. Usa tu propio cuadro de búsqueda para enviar la búsqueda.
Nota: Un Motor de Búsqueda Programable que no muestra anuncios no tiene la opción de inhabilitar la marca. Demostración: Cómo personalizar las opciones de desarrollo de la marca |
|
Alojado en Google
Ventana actual Ventana nueva |
El cuadro de búsqueda se coloca en una de tus páginas web. Los resultados de la búsqueda se muestran en una página web alojada en Google, que se puede abrir en la misma ventana o en una nueva. |
Diseño del cuadro de búsqueda
Puedes insertar el cuadro de búsqueda en cualquier lugar dentro del cuerpo HTML de tu página web, aunque, por convención, los cuadros de búsqueda se colocan en la parte superior (o cerca de la parte superior) de las páginas web, como en el siguiente ejemplo:
Figura 1: Página web con el cuadro de búsqueda ubicado en la parte superior.
Cómo habilitar la función de autocompletar
El autocompletado ofrece opciones de búsqueda a los usuarios a medida que ingresan sus búsquedas en el cuadro de búsqueda. Es similar a las búsquedas opcionales que ves en la Búsqueda de Google.
Figura 2: Con solo escribir algunos caracteres en el cuadro de búsqueda, aparece una lista desplegable que proporciona opciones para diferentes búsquedas.
El Motor de Búsqueda Programable adapta la función de autocompletado específicamente a tu motor de búsqueda. Utiliza un algoritmo diferente que se basa en múltiples fuentes, incluidas las búsquedas en tu motor de búsqueda, así como las palabras clave y las frases extraídas del contenido de los sitios web que abarca tu motor de búsqueda.
La función de autocompletado se encuentra en la sección Autocompletar de la página Funciones de la Búsqueda.
Para habilitar las autocompletaciones, haz lo siguiente:
- Ve a la sección Autocompletar de la página Funciones de la Búsqueda.
-
Activa el control Habilitar la función para autocompletar.
Nota: Dado que las búsquedas autocompletadas se generan para cada motor de búsqueda, el autocompletado tarda algunas horas en aparecer en tu motor de búsqueda.
- Si habilitas las autocompletaciones en un motor de búsqueda existente por primera vez, debes quitar el fragmento de código del cuadro de búsqueda que insertaste en tu página web. Reemplázalo por el nuevo que se generó en la pestaña Obtener código. Si deseas obtener instrucciones más detalladas, consulta la sección Cómo implementar el diseño en tu sitio web.
Diseño de los resultados
Puedes cambiar los siguientes componentes de la página de resultados:
- Los resultados individuales
- El tipo de fuente
- Los colores del texto
- Las pestañas de refinamiento
- Las promociones
- El logotipo (solo alojado en Google)
Los resultados individuales
Si deseas delinear visualmente los resultados individuales o destacar los que seleccionan los usuarios, puedes definir los bordes y el fondo de cada resultado.
Figura 3: Resultados con resultados individuales delineados y resultado individual destacado cuando se coloca el cursor sobre él.
Las pestañas de Refinement
Si creaste etiquetas de refinamiento en tu motor de búsqueda, las etiquetas aparecerán como pestañas en el elemento de búsqueda. Puedes usar el panel de control para cambiar los colores de las pestañas de refinamiento.
Promociones
Si creaste promociones en tu motor de búsqueda, puedes cambiar su aspecto. Las promociones son un tipo especial de resultados de la búsqueda que creas.
El logotipo (solo para el alojamiento de Google)
Si permites que Google aloje tu página de resultados, puedes incluir un logotipo o una imagen pequeña junto al cuadro de búsqueda en la página de resultados de la búsqueda. La imagen debe ser un archivo .jpg, .png o .gif alojado en un sitio web (ya sea tuyo o de un sitio web que no tenga restricciones de derechos de autor). Tienes la opción de asociar una URL a la imagen para convertirla en una imagen en la que se puede hacer clic.
A continuación, se muestra un ejemplo de una página de resultados con un logotipo.
Figura 4: Cuadro de búsqueda con una imagen
Implementa el diseño en tu sitio web
Después de diseñar el aspecto de tu motor de búsqueda, puedes implementarlo en tu página web de la siguiente manera:
- Haz clic en Guardar en las secciones que modificaste en la página Apariencia.
- Haz clic en Obtener código en la sección Diseño de la página Aspecto.
-
Copia el fragmento de código generado en la ventana emergente Código.
Si seleccionaste el diseño de dos columnas, copia dos fragmentos de código: uno para el cuadro de búsqueda y otro para los resultados.
Si seleccionaste el diseño de dos páginas, escribe la URL de la página web que mostrará los resultados de tu motor de búsqueda. Escribe el nombre del parámetro de consulta incorporado en la URL, que analiza la página de resultados de la búsqueda. Por último, copia los dos fragmentos de código.
El fragmento de código para el diseño solo de resultados es para el caso en que los resultados de la búsqueda se muestran en una página nueva. Escribe el nombre del parámetro de consulta incorporado en la URL, que analiza la página de resultados de la búsqueda. Por último, copia el fragmento de código de los resultados de la búsqueda.
-
Inserta el código en cada página en la que quieras que aparezca un cuadro del Motor de Búsqueda Programable. Puedes pegar el
código en cualquier lugar dentro de la etiqueta
<body></body>de tu página web.Nota: Para obtener la mayor compatibilidad entre navegadores, se recomienda que tus páginas HTML usen un doctype compatible, como
<!DOCTYPE html>.Si usas efectos de desplazamiento para tu elemento de la Búsqueda, tu página HTML debe usar un doctype compatible, como
<!DOCTYPE html>.
Si seleccionaste el diseño de dos columnas, inserta el código del cuadro de búsqueda en una columna y el código de los resultados en otra columna.
Si seleccionaste el diseño de dos páginas, inserta el código del cuadro de búsqueda en la página web en la que quieras que aparezca el cuadro de búsqueda y el código de los resultados en la página web en la que quieras que aparezcan los resultados de la búsqueda.
Si seleccionaste el diseño solo de resultados, inserta el fragmento de código en la página web en la que deseas que aparezcan los resultados de la búsqueda.