• Homepage
  • Articoli
  • Generale
  • Come includere Google Custom Search Engine (CSE) nel sito WordPress senza plug-in (due diversi approcci)

Come includere Google Custom Search Engine (CSE) nel sito WordPress senza plug-in (due diversi approcci)

Pubblicato: 2016-03-16

Ricerca personalizzata di Google per il sito WordPress

Significato della funzionalità di ricerca e perché dovremmo utilizzare Google Ricerca personalizzata su WordPress?

Google o Bing? Nessun dubbio su questo. Google è il miglior motore di ricerca e pioniere della ricerca nel mondo. Non c'è motivo per cui non dovresti utilizzare Google Custom Search sul tuo blog WordPress. Darà la migliore esperienza di ricerca anche ai lettori del tuo blog. In questo tutorial esamineremo semplici passaggi per rendere disponibile la ricerca personalizzata per il tuo sito WordPress.

Sotto l'ombrello di Alphabet ( https://abc.xyz ) Google è una società di ricerca autonoma. Quindi, cosa significa per tutti i consumatori? Bene, credo che non cambierà nulla per noi, tranne che la struttura dei rapporti è cambiata e sicuramente il nome del titolo NYSE.

Perché abbiamo bisogno di CSE (Motore di ricerca personalizzato)?

È molto importante fornire una migliore funzionalità di ricerca sul sito. Di solito la pagina principale contiene meno di 10 post, ma nella maggior parte dei casi gli utenti del tuo blog possono ottenere i migliori articoli correlati solo dalla ricerca.

Inoltre, risultati di ricerca molto più rapidi rispetto a quelli predefiniti di WordPress Search + Buono per la SEO del tuo sito poiché Google conosce questo elenco di risultati dalla query di ricerca e non lo aggiunge all'elenco di contenuti duplicati.

Esistono two ways per configurare Google Ricerca Personalizzata:

  1. Da Google Adsense Console (su Crunchify stiamo usando this approach )
  2. Dal pannello di ricerca personalizzata di Google

Configuration Approach-1. Dalla console di Google Adsense

Passo 1

  • Vai ad Adsense
  • Fai clic sulla scheda My ads
  • Fare clic su Search -> Custom search engines
  • Fare clic su New Custom Search engine

Crea un nuovo motore di ricerca personalizzato - Google Adsense

Passo 2

  • Fornisci Name . È un testo in formato libero
  • Seleziona Only sites I select
  • Specifica il nome del tuo sito web

Google Adsense - CSE - Impostazione di base

Passaggio 3

Modifica le opzioni seguenti in base alle tue esigenze

  • Canale personalizzato
  • Stile casella di ricerca
  • Stile CSS dell'annuncio

Passaggio 4

Sotto l'opzione Risultati di ricerca assicurati di avere le seguenti impostazioni corrette

  • Risultati della ricerca: on my website
  • URL dove verranno visualizzati i risultati della search page del tuo blog

Crunchify Suggerimenti sull'impostazione del motore di ricerca personalizzato di Google

Passaggio 5

Fai clic su Salva e ottieni entrambi i codici

  • Box Code ricerca
  • Result Code ricerca

Risultato della ricerca Adsense e codice della casella di ricerca

Passaggio 6

Vai al tuo sito e crea /search

WordPress Crea pagina di ricerca

Passaggio 7

Nella sezione HTML incolla il search result code e fai clic su Salva.

Passaggio 8

Vai alla sezione Appearance -> Widgets e incolla search box code e fai clic su Salva. Modifica la casella di ricerca CSS secondo le tue necessità. Ecco un CSS personalizzato che sto usando su 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 ;
}

E sei a posto. Prova a cercare le parole chiave e dovresti vedere il risultato di ricerca di Google su /search .

Configuration Approach-2 . Dal pannello di ricerca personalizzata di Google

Passo 1

  • Vai a https://cse.google.com/cse/all
  • Fare clic su Add motore di ricerca

Aggiungi suggerimenti per la ricerca personalizzata

Passo 2

  • Fornisci l'URL del tuo sito
  • Fare clic su Aggiungi

Crunchify-Google-Custom-Search-Engine-Setup

Passaggio 3

  • Fai clic sul tuo motore di ricerca appena creato
  • Vai alla sezione Look and feel
  • Vai alla scheda Layout
  • Seleziona Two Page
  • Fare clic su Save and Get Code

Passaggio 4

  • Ottieni il codice per la casella di ricerca
    • Mettilo nella barra laterale
  • Ottieni il codice per il risultato della ricerca
    • Crea la pagina http://<tuoblog.com>/search
    • Inserisci il codice in questa pagina

Passaggio 5

Prova a cercare parole chiave come Google Apps e dovresti vedere risultati come questo.

Google-Custom-Search-Result-Crunchify

Pannello dei risultati:

Google-CSE-Risultato di ricerca-Crunchify

Passaggio 6

Qualche tempo fa su Crunchify abbiamo modificato il risultato con i seguenti CSS personalizzati:

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 ;
}

Ora diamo un'occhiata a entrambe le query:

Approach-1 :

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

Approach-2 :

  • https://crunchify.com/search/?q =Google% search/?q (questo non funzionerà perché abbiamo la regola .htaccess in atto)

Come puoi vedere sopra, entrambi gli approcci hanno different query parameters .

E dopo?

Assicurati di aggiornare l'URL dello JSON-LD Schema della casella di ricerca dei sitelink di Google.

Convalida l'URL di markup JSON-LD della casella di ricerca dei sitelink di WordPress Schema.org