Questa pagina spiega come personalizzare l'aspetto e il design della casella di ricerca e dei risultati di ricerca. Se vuoi implementare il design del tuo motore di ricerca utilizzando il file di contesto, consulta la pagina "Progettare l'aspetto con XML".
- Panoramica
- Progettazione dei singoli componenti dell'interfaccia utente di ricerca
- Ospitare i risultati utilizzando l'elemento di ricerca
- Impostare il layout dell'elemento di ricerca
- Progettare la casella di ricerca
- Progettazione dei risultati
- Implementare il design nel tuo sito web
Panoramica
Puoi modificare sia la casella di ricerca sia i risultati di ricerca del tuo Motore di ricerca programmabile nel pannello di controllo o nel file di contesto XML. Se hai pochi motori di ricerca, gestirli e personalizzarli con il pannello di controllo è piuttosto semplice. Basta andare alla pagina Aspetto, selezionare uno stile, progettare i componenti, fare clic su Salva e il gioco è fatto. Questa pagina spiega come fare tutto. Tuttavia, se crei e gestisci un numero elevato di motori di ricerca, anche questa semplice procedura, ripetuta su più motori di ricerca, diventa noiosa. In questi casi, è meglio lavorare con XML. Se decidi di utilizzare XML, leggi prima questa pagina per farti un'idea di come funzionano le cose in generale; dopodiché, leggi la pagina Progettare l'aspetto con XML per scoprire di più sugli elementi e sugli attributi XML.
Se non sai se utilizzare solo il pannello di controllo o il formato XML, consulta la pagina Nozioni di base, che illustra i vantaggi e le sfide di ogni formato.
Nota:prima di iniziare a progettare l'aspetto del tuo motore di ricerca personalizzato, leggi le Linee guida per l'implementazione del Motore di ricerca programmabile . Si tratta di un breve documento che indica come gestire il branding e l'attribuzione di Google.
Ospitare i risultati utilizzando l'elemento di ricerca
Un elemento di ricerca è un oggetto che puoi incorporare nella tua pagina web e che consente un'ampia personalizzazione. Può mostrare la casella di ricerca e i risultati di ricerca insieme nella stessa pagina web che il lettore sta visualizzando o in pagine web diverse.
Nota:L'elemento di ricerca, se abbinato a un layout compatto, funziona bene sui dispositivi mobili.
Puoi anche sfruttare l'API Programmable Search Element Control per personalizzare ulteriormente la UI di ricerca. Molte personalizzazioni sono supportate tramite gli attributi HTML. Ad esempio, puoi scegliere tra sei layout per la pagina dei risultati o impostare il numero di risultati di ricerca da restituire.
Motore di ricerca programmabile non supporta più l'opzione di hosting iframe. Ti consigliamo i layout "Due pagine" o "Solo risultati" nell'elemento di ricerca come nuove opzioni. Per saperne di più, consulta il nostro post del blog .
Progettare i singoli componenti dell'interfaccia utente di ricerca
Componenti personalizzabili
I componenti che puoi personalizzare dipendono dal layout degli elementi del tuo motore di ricerca. Ad esempio, il pannello di controllo ti consente di aggiungere un logo solo per i motori di ricerca ospitati da Google; non puoi aggiungere un logo ai motori di ricerca che utilizzano altre opzioni di hosting.
Puoi definire i seguenti componenti utilizzando il pannello di controllo:
- Layout dell'elemento di ricerca
- La casella di ricerca
- I risultati di ricerca
- Le schede di perfezionamento
- Le promozioni
- Il logo (solo con hosting Google)
Impostare il layout dell'elemento di ricerca
Hai la possibilità di personalizzare il layout della UI di ricerca nella pagina web. Puoi posizionare la casella di ricerca e la sezione dei risultati nella stessa colonna o visualizzarle in colonne separate, con la casella di ricerca in una colonna e la sezione dei risultati in un'altra colonna o persino in un'altra pagina.
Le opzioni di layout sono (fai clic sui link per visualizzare le demo):
| Opzione | Descrizione |
|---|---|
| OverLay | Visualizza i risultati di ricerca in un overlay. |
|
Due pagine
Semplice Più caselle di ricerca/sezioni dei risultati |
La casella di ricerca e la sezione dei risultati di ricerca si trovano in due pagine web diverse.
Nota: la sezione dei risultati di ricerca contiene anche una casella di ricerca. Gli utenti possono inviare query direttamente nella pagina dei risultati di ricerca. |
| A tutta larghezza | La casella di ricerca e la sezione dei risultati di ricerca occupano l'intera larghezza della pagina o della colonna in cui hai inserito l'elemento Ricerca. |
| Due colonne | La casella di ricerca e la sezione dei risultati di ricerca si trovano in colonne o sezioni diverse della tua pagina web. Per chiudere la sezione dei risultati di ricerca, l'utente fa clic sull'icona X accanto alla casella di ricerca. |
| Compatto |
Come l'opzione a larghezza intera, questa occupa l'intera larghezza della pagina o della colonna, ma
la sezione dei risultati mostra meno risultati, quindi occupa meno spazio verticale quando
viene espansa nella pagina web.
Suggerimento:questa opzione è ottimizzata per smartphone e dispositivi mobili. |
|
Solo risultati
Ricerca tramite URL Ricerca tramite casella di ricerca |
I risultati di ricerca vengono inseriti in una delle tue pagine web e la pagina dei risultati di ricerca
non contiene una casella di ricerca. Utilizza la tua casella di ricerca per inviare la query di ricerca.
Nota: un Motore di ricerca programmabile che non mostra annunci non ha la possibilità di disattivare il branding. |
|
Ospitato da Google
Finestra corrente Nuova finestra |
La casella di ricerca viene posizionata su una delle tue pagine web. I risultati di ricerca vengono visualizzati in una pagina web ospitata su Google, che può essere aperta nella stessa finestra o in una nuova finestra. |
Progettare la casella di ricerca
Puoi inserire la casella di ricerca ovunque all'interno del corpo HTML della tua pagina web, anche se, per convenzione, le caselle di ricerca vengono posizionate nella parte superiore (o vicino alla parte superiore) delle pagine web, come nell'esempio seguente:
Figura 1: Pagina web con la casella di ricerca posizionata in alto.
Attivazione del completamento automatico
Il completamento automatico offre opzioni di query agli utenti mentre inseriscono le query di ricerca nella casella di ricerca. È simile alle query facoltative che vedi nella Ricerca Google.
Figura 2: Se digiti solo pochi caratteri nella casella di ricerca, viene visualizzato un elenco a discesa che fornisce opzioni per diverse query di ricerca.
Il Motore di ricerca programmabile personalizza il completamento automatico in base al tuo motore di ricerca. Utilizza un algoritmo diverso che attinge a più fonti, tra cui le query al tuo motore di ricerca, nonché le parole chiave e le frasi estratte dai contenuti dei siti web coperti dal tuo motore di ricerca.
La funzionalità di completamento automatico si trova nella sezione Completamento automatico della pagina Funzionalità di ricerca.
Per attivare i completamenti automatici:
- Vai alla sezione Completamento automatico della pagina Funzionalità di ricerca.
-
Attiva il controllo Attiva completamento automatico.
Nota: Poiché le query con completamento automatico vengono generate per ogni motore di ricerca, sono necessarie alcune ore prima che il completamento automatico inizi a essere visualizzato nel tuo motore di ricerca.
- Se attivi i completamenti automatici in un motore di ricerca esistente per la prima volta, devi rimuovere lo snippet di codice per la casella di ricerca che avevi inserito nella tua pagina web. Sostituiscilo con quello nuovo generato nella scheda Ottieni codice. Per istruzioni più dettagliate, consulta la sezione Implementare il design nel tuo sito web.
Progettare i risultati
Puoi modificare i seguenti componenti della pagina dei risultati:
- I risultati individuali
- Il tipo di carattere
- I colori del testo
- Le schede di perfezionamento
- Le promozioni
- Il logo (solo con hosting Google)
Risultati individuali
Se vuoi delineare visivamente i singoli risultati o evidenziare quelli selezionati dagli utenti, puoi definire i bordi e lo sfondo dei singoli risultati.
Figura 3: risultati con singoli risultati delineati e singolo risultato evidenziato al passaggio del mouse.
Schede di perfezionamento
Se hai creato etichette di perfezionamento nel tuo motore di ricerca, le etichette vengono visualizzate come schede nell'elemento di ricerca. Puoi utilizzare il pannello di controllo per modificare i colori delle schede di perfezionamento.
Promozioni
Se hai creato promozioni nel tuo motore di ricerca, puoi modificarne l'aspetto. Le promozioni sono un tipo speciale di risultati di ricerca che crei.
Il logo (solo Google)
Se consenti a Google di ospitare la pagina dei risultati, puoi scegliere di includere un logo o una piccola immagine accanto alla casella di ricerca nella pagina dei risultati di ricerca. L'immagine deve essere un file .jpg, .png o .gif ospitato su un sito web (tuo o di un sito web che non presenta limitazioni del copyright). Hai la possibilità di associare un URL all'immagine, trasformandola in un'immagine cliccabile.
Di seguito è riportato un esempio di pagina dei risultati con un logo.
Figura 4: Casella di ricerca con un'immagine
Implementare il design nel tuo sito web
Dopo aver progettato l'aspetto del tuo motore di ricerca, puoi implementarlo nella tua pagina web procedendo nel seguente modo:
- Fai clic su Salva nelle sezioni che hai modificato nella pagina Aspetto.
- Fai clic su Genera codice nella sezione Layout della pagina Aspetto e design.
-
Copia lo snippet di codice generato nel popup Codice.
Se hai selezionato il layout a due colonne, copia due snippet di codice: uno per la casella di ricerca e l'altro per i risultati.
Se hai selezionato il layout a due pagine, digita l'URL della pagina web che mostrerà i risultati del motore di ricerca. Digita il nome del parametro di ricerca incorporato nell'URL, che viene analizzato dalla pagina dei risultati di ricerca. Infine, copia i due snippet di codice.
Lo snippet di codice per il layout Solo risultati è per il caso in cui i risultati di ricerca vengono visualizzati in una nuova pagina. Digita il nome del parametro di ricerca incorporato nell'URL, che viene analizzato dalla pagina dei risultati di ricerca. Infine, copia lo snippet di codice dei risultati di ricerca.
-
Inserisci il codice in ogni pagina in cui vuoi inserire una casella di Motore di ricerca programmabile. Puoi incollare il
codice in qualsiasi punto all'interno del tag
<body></body>della pagina web.Nota:Per la maggior compatibilità tra i browser, è consigliabile utilizzare per le pagine HTML un tipo di documento supportato, ad esempio
<!DOCTYPE html>.Se utilizzi gli effetti di passaggio del mouse per l'elemento della Ricerca Google, la pagina HTML deve utilizzare un tipo di documento supportato, ad esempio
<!DOCTYPE html>.
Se hai selezionato il layout a due colonne, inserisci il codice della casella di ricerca in una colonna e il codice per i risultati in un'altra colonna.
Se hai selezionato il layout a due pagine, inserisci il codice della casella di ricerca nella pagina web in cui vuoi visualizzare la casella di ricerca e il codice per i risultati nella pagina web in cui vuoi visualizzare i risultati di ricerca.
Se hai selezionato il layout Solo risultati, inserisci lo snippet di codice nella pagina web in cui vuoi visualizzare i risultati di ricerca.