• Página principal
  • Artículos
  • General
  • Cómo incluir el motor de búsqueda personalizado de Google (CSE) en el sitio de WordPress sin complemento (dos enfoques diferentes)

Cómo incluir el motor de búsqueda personalizado de Google (CSE) en el sitio de WordPress sin complemento (dos enfoques diferentes)

Publicado: 2016-03-16

Búsqueda personalizada de Google para el sitio de WordPress

¿Importancia de la funcionalidad de búsqueda y por qué deberíamos usar la búsqueda personalizada de Google en WordPress?

¿Google o Bing? No hay duda de eso. Google es el mejor motor de búsqueda y pionero de búsqueda en el mundo. No hay ninguna razón por la que no debas usar la Búsqueda personalizada de Google en tu blog de WordPress. También brindará la mejor experiencia de búsqueda a los lectores de su blog. En este tutorial, repasaremos pasos simples para tener la búsqueda personalizada disponible para su sitio de WordPress.

Bajo el paraguas de Alphabet ( https://abc.xyz ), Google es una empresa de búsqueda independiente. Entonces, ¿qué significa eso para todos los consumidores? Bueno, creo que nada va a cambiar para nosotros, excepto que la estructura de informes cambió y definitivamente el nombre de las acciones de NYSE.

¿Por qué necesitamos CSE (motor de búsqueda personalizado)?

Es muy importante proporcionar una mejor funcionalidad de búsqueda en el sitio. Por lo general, la página principal contiene menos de 10 publicaciones, pero en la mayoría de los casos, los usuarios de su blog pueden obtener los mejores artículos relacionados solo de la Búsqueda.

Además, un resultado de búsqueda mucho más rápido que la búsqueda predeterminada de WordPress + Bueno para el SEO de su sitio, ya que Google conoce esta lista de resultados de la consulta de búsqueda y no la agrega a la lista de contenido duplicado.

Hay two ways configurar la Búsqueda personalizada de Google:

  1. Desde Google Adsense Console (en Crunchify estamos usando this approach )
  2. Desde el panel de búsqueda personalizada de Google

Configuration Approach-1. Desde la consola de Google Adsense

Paso 1

  • Ir a Adsense
  • Haga clic en la pestaña My ads
  • Haga clic en Search -> Custom search engines
  • Haga clic en New Custom Search engine

Crear nuevo motor de búsqueda personalizado - Google Adsense

Paso 2

  • Proporcionar Name . Es texto de forma libre
  • Seleccione Only sites I select
  • Especifique el nombre de su sitio web

Google Adsense - CSE - Configuración básica

Paso 3

Modifique las siguientes opciones según sus necesidades

  • Canal personalizado
  • Estilo del cuadro de búsqueda
  • Estilo CSS del anuncio

Etapa 4

En la opción Resultados de búsqueda, asegúrese de que la configuración a continuación sea correcta

  • Resultados de búsqueda: on my website
  • URL donde se mostrarán los resultados de la búsqueda: la search page de tu blog

Consejos de Crunchify para configurar el motor de búsqueda personalizado de Google

Paso-5

Haz clic en guardar y obtén ambos códigos

  • Box Code búsqueda
  • Result Code búsqueda

Resultado de búsqueda de Adsense y código de cuadro de búsqueda

Paso-6

Vaya a su sitio y cree /search

Crear página de búsqueda de WordPress

Paso-7

En la sección HTML , pegue el search result code y haga clic en Guardar.

Paso-8

Vaya a la sección Appearance -> Widgets y pegue search box code y haga clic en guardar. Modifique el cuadro de búsqueda CSS según sus necesidades. Aquí hay un CSS personalizado que estoy usando en Crunchify.

style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
. crunchify - search {
     width : 76 % ! important ;
     padding : 9px 6px 7px 6px ! important ;
     max - width : 275px ;
     margin : 10px 0px 0px 0px ! important ;
}
 
input [ type = "submit" ] {
     background - color : #dd7127;
     border : none ;
     box - shadow : none ;
     color : #fff;
     cursor : pointer ;
     font - family : 'Oswald' , sans - serif ;
     font - size : 14px ;
     font - weight : 400 ;
     letter - spacing : 1px ;
     padding : 6px 10px ;
     width : auto ;
    - webkit - font - smoothing : antialiased ;
     border - radius : 3px ;
}

Y ya está todo listo. Intente buscar palabras clave y debería ver el resultado de búsqueda de Google en /search .

Configuration Approach-2 . Desde el panel de búsqueda personalizada de Google

Paso 1

  • Vaya a https://cse.google.com/cse/all
  • Haga clic en Add motor de búsqueda

Agregar-Búsqueda-Personalizada-Crunchify-Consejos

Paso 2

  • Proporcione la URL de su sitio
  • Haga clic en Agregar

Crunchify-Google-Custom-Search-Engine-Setup

Paso 3

  • Haga clic en su motor de búsqueda recién creado
  • Ir a la sección Look and feel
  • Ir a la pestaña Layout
  • Seleccionar Two Page
  • Haga clic en Save and Get Code

Etapa 4

  • Obtener código para el cuadro de búsqueda
    • Ponlo en la barra lateral
  • Obtener código para el resultado de la búsqueda
    • Crear página http://<tublog.com>/buscar
    • Poner código en esta página

Paso-5

Intente buscar una palabra clave como Google Apps y debería ver un resultado como este.

Resultado de búsqueda personalizado de Google-Crunchify

Panel de resultados:

Google-CSE-Resultado-de-búsqueda-Crunchify

Paso-6

Hace algún tiempo en Crunchify hemos modificado el resultado con el siguiente CSS personalizado:

Stylish Google Custom Search - Custom CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/* Change Search Button Code  */
input . gsc - search - button {
     padding : 10px ! important ;
     height : 35px ! important ;
     border - color : #c12129 !important;
     background - color : #c12129 !important;
     color : #fff !important;
}
 
/* Change Search Button Hover Color */
input . gsc - search - button : hover {
     border - color : #444 !important;
     background - color : #444 !important;
}
 
/* Change Bottom Margin after each result */
. gsc - control - cse . gsc - table - result {
     margin - bottom : 10px ! important ;
}
 
/* Hide URL from search result */
. gsc - url - top , . gsc - url - bottom {
     display : none ! important ;
}
 
/* Change input field look and feel */
input . gsc - input {
     padding : 10px ! important ;
     margin - left : 0px ;
     background - position : right center ! important ;
     background - repeat : no - repeat ! important ;
}
 
/* Hide number of result count */
. gsc - result - info {
     display : none ;
}
. gs - webResult : hover {
     background - color : #eee;
}
 
/* Change mouse hover result background change */
. gsc - cursor - page {
     font - size : 1.1em ;
     padding : 3px 7px ;
     border : 2px solid #eee;
     background - color : #eee !important;
}
 
/* Change search result heading font size change */
. gsc - result . gs - title {
     height : 2.0em ! important ;
     font - size : 16px ! important ;
}
 
. gs - result . gs - snippet {
     line - height : 19px ! important ;
}
 
/* Remove Clear cross image and CSS adjustment - below 3 CSS prop changes */
div . gsc - clear - button {
     display : none ! important ;
}
td . gsc - clear - button {
     width : 0px ! important ;
}
td . gsc - input {
     padding - right : 1px ! important ;
}

Ahora echemos un vistazo a ambas consultas:

Approach-1 :

  • https://crunchify.com/ search/?cx= partner-pub-xxxxxxxxxxxxxxxxx%3A9846869911&cof=FORID%3A10&ie=UTF-8&q=Crunchify&sa=Search……

Approach-2 :

  • https://crunchify.com/ search/?q =Google%20Apps (Esto no funcionará ya que tenemos la regla .htaccess en su lugar)

Como ve arriba, ambos enfoques tienen different query parameters .

¿Qué sigue?

Asegúrese de actualizar la URL JSON-LD Schema del cuadro de búsqueda de enlaces de sitio de Google.

Valide el cuadro de búsqueda de enlaces de sitio de WordPress JSON-LD URL de marcado de Schema.org