Questa pagina descrive come personalizzare l'aspetto del tuo motore di ricerca utilizzando il file di contesto, che è la specifica XML per il tuo motore di ricerca.
- Panoramica
- L'elemento
LookAndFeel - Gli attributi dell'elemento
LookAndFeel - Gli elementi secondari di
LookAndFeel - Aggiungere un logo a una pagina dei risultati ospitata da Google
Panoramica
Oltre a utilizzare il pannello di controllo di Motore di ricerca programmabile, puoi controllare l'aspetto e il design del tuo motore di ricerca modificando il file XML di contesto. Scopri di più sui vantaggi e sugli svantaggi di ciascun formato nella pagina Nozioni di base. Se non hai dimestichezza con i file di contesto, consulta Contesto: definizione di un motore di ricerca.
Per una maggiore flessibilità di visualizzazione del motore di ricerca, puoi utilizzare l'Elemento di ricerca programmabile, che ti consente di incorporare Motore di ricerca programmabile nella tua pagina web e in altre applicazioni utilizzando JavaScript.
Se le tue pagine web includono anche dati strutturati, puoi creare snippet con presentazioni più complete e contenuti personalizzati. Scopri di più sulla personalizzazione degli snippet dei risultati.
Prima di iniziare a progettare l'aspetto del tuo Motore di ricerca programmabile, leggi le linee guida per l'implementazione di Motore di ricerca programmabile. Si tratta di un breve documento che spiega come gestire il branding e l'attribuzione di Google.
L'elemento LookAndFeel
Nel file di contesto, tutte le specifiche relative all'aspetto sono definite dall'elemento LookAndFeel in CustomSearchEngine. Questo elemento determina se vengono visualizzati gli annunci, come vengono visualizzati i risultati della sezione dei risultati di ricerca e come vengono visualizzati i singoli risultati di ricerca. L'esempio seguente mostra tutti gli attributi e gli elementi secondari dell'elemento LookAndFeel.
<CustomSearchEngine ... >
<Title>...</Title>
<Description>...</Description>
<Context>
...
</Context>
<LookAndFeel googlebranding="watermark"
element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif"/>
<Logo />
<Colors url="#3366cc"
background="#FFFFFF"
border="#336699"
title="#0000CC"
text="#000000"
visited="#ffbd10"
title_hover="#0000CC"
title_active="#0000CC"/>
<Promotions title_color="#006600"
title_visited_color="#663399"
url_color="#3366ff"
background_color="#FFFFFF"
border_color="#ffff33"
show_image="true"
show_snippet="true"
snippet_color="#330000"
title_hover_color="#0000CC"
title_active_color="#0000CC" />
<SearchControls input_border_color="#BCCDF0"
button_border_color="#666666"
button_background_color="#CECECE"
tab_border_color="#E9E9E9"
tab_background_color="#E9E9E9"
tab_selected_border_color="#FF9900"
tab_selected_background_color="#FFFFFF" />
<Results border_color="#FFFFFF"
border_hover_color="#FFFFFF"
background_color="#FFFFFF"
background_hover_color="#FFFFFF" />
</LookAndFeel>
<AdSense />
<EnterpriseAccount />
</CustomSearchEngine>
Non tutti gli attributi e gli elementi LookAndFeel sono pertinenti per tutti i tipi di motori di ricerca. Ad esempio, l'attributo googlebranding viene utilizzato solo per i motori di ricerca in hosting su Google e viene ignorato se il motore di ricerca utilizza l'opzione di hosting "Elemento di ricerca".
Quando scarichi il file di contesto del motore di ricerca dalla pagina Panoramica del pannello di controllo, troverai una sezione LookAndFeel completamente definita. Anche gli attributi e gli elementi che non sono pertinenti per il tipo di motore di ricerca che hai scelto avranno valori definiti. Questi sono solo i valori predefiniti, ignorali. Presta attenzione solo agli elementi e agli attributi che influiscono sul tipo di motore di ricerca.
Nelle sezioni successive vengono trattati i seguenti argomenti:
Gli attributi dell'elemento LookAndFeel
Tutti gli attributi LookAndFeel sono facoltativi; se non li specifichi, Motore di ricerca programmabile utilizzerà i valori predefiniti. Ad esempio, se non definisci l'attributo element_layout dell'elemento LookAndFeel, Motore di ricerca programmabile lo interpreterà per indicare che il valore element_layout è "1". Non tutti gli attributi sono pertinenti per tutti i tipi di motori di ricerca.
In base a come hai definito i valori degli attributi, Motore di ricerca programmabile genera un set di codice per la casella di ricerca e i risultati di ricerca. Puoi visualizzare l'anteprima del codice generato nella sezione Ottieni codice della pagina Panoramica del tuo motore di ricerca. Puoi copiare lo snippet di codice generato e inserirlo nella tua pagina web.
Di seguito è riportato un esempio di elemento LookAndFeel con attributi completamente definiti:
<LookAndFeel googlebranding="watermark"
element_layout="1"
theme="1"
custom_theme="false"
text_font="Arial, sans-serif" />
Nella tabella seguente sono elencati gli attributi di CustomSearchEngine e i relativi valori.
Nota: definisci solo i valori degli attributi pertinenti all'opzione di hosting selezionata. La colonna Opzioni di hosting indica a quali opzioni di hosting si applicano questi attributi.
| Attributo | Opzioni di hosting | Descrizione | Valore |
|---|---|---|---|
googlebranding |
In hosting su Google | Determina la casella di ricerca per il tuo motore di ricerca. | Utilizza uno dei seguenti valori:
|
element_layout |
Elemento di ricerca | Determina la disposizione della casella di ricerca e dei risultati di ricerca nella pagina. Per ulteriori informazioni sulle diverse opzioni di layout, consulta la sezione Layout degli elementi di ricerca. |
Usa uno dei seguenti valori:
|
theme |
Elemento di ricerca | Determina lo stile della casella di ricerca e dei risultati di ricerca. | Utilizza uno dei seguenti valori:
|
custom_theme |
Elemento di ricerca | Per personalizzare il tema in modo da visualizzare colori e famiglie di caratteri diversi rispetto a quelli standard, imposta il valore su true. In caso contrario, Motore di ricerca programmabile ignora la personalizzazione che apporti ai colori e ai caratteri, che sono definiti negli elementi secondari di LookAndFeel. |
Specifica:
|
text_font |
Tutte | Imposta la famiglia di caratteri per il testo nei risultati di ricerca. |
Anche se il pannello di controllo consente di selezionare solo cinque famiglie di caratteri, puoi scegliere una famiglia di caratteri più ampia nel file di contesto. Potresti avere un elenco di famiglie di caratteri separati da virgole come valore per questo attributo, come nell'esempio seguente: text_font="Arial, sans-serif" Se hai elencato più di una famiglia di caratteri, il browser utilizza il primo carattere. Se il browser non supporta il primo carattere, prova a utilizzare quello successivo. Inizia con il font che preferisci e termina con una famiglia generica, come con grazie o san-serif. La famiglia generica consente al browser di selezionare un carattere simile nella famiglia generica quando nessuno dei caratteri elencati è disponibile. Se utilizzi una famiglia di caratteri il cui nome è costituito da più parole, devi racchiuderlo tra virgolette ( |
Gli elementi secondari di LookAndFeel
Tutti gli elementi secondari di LookAndFeel, ad eccezione dell'elemento Promotions, riguardano solo l'elemento di ricerca. La maggior parte degli attributi dell'elemento Promotions si applica a tutti i tipi di motori di ricerca. Per la maggior parte, gli elementi secondari controllano i colori dei diversi componenti del tuo motore di ricerca. I valori dei colori sono notazioni esadecimali HTML standard. Se non definisci gli attributi dell'elemento, Motore di ricerca programmabile utilizza i valori predefiniti.
Nota: per personalizzare un elemento di ricerca, devi prima impostare l'attributo custom_theme dell'elemento LookAndFeel su true prima di definire i valori negli elementi secondari. Se non imposti l'attributo custom_theme su true, tutti i valori definiti negli elementi secondari (tranne Promotions) vengono ignorati dal Motore di ricerca programmabile.
LookAndFeel ha i seguenti elementi secondari.
Colors: determina i colori dell'elemento di ricerca.Promotions: determina l'aspetto delle promozioni. Le impostazioni si applicano a tutti i tipi di motori di ricerca.SearchControls: determina i colori dei componenti della casella di ricerca degli elementi di ricerca.Results: determina i colori dei componenti della sezione dei risultati di Elementi di ricerca.
L'elemento secondario Colors
L'elemento Colors determina il colore dell'elemento di ricerca. Per modificare i colori dei componenti secondari dell'elemento di ricerca, come un singolo risultato di ricerca o promozioni, devi impostare i valori in altri elementi di pari livello.
Di seguito è riportato un esempio di elemento Colors con attributi completamente definiti:
<Colors url="#3366cc"
background="#FFFFFF"
border="#336699"
title="#0000CC"
text="#000000"
visited="#ffbd10"
title_hover="#0000CC"
title_active="#0000CC"/>
Nella tabella seguente sono elencati gli attributi facoltativi di Colors e i relativi valori.
| Attributo | Colore componente |
|---|---|
url |
L'URL nella parte inferiore di ogni snippet dei risultati. |
background |
Lo sfondo dell'intera sezione dei risultati. |
border |
Il bordo attorno all'elemento di ricerca. |
title |
Il titolo degli snippet dei risultati. Il titolo è la prima riga di ogni risultato. |
text |
Il corpo del testo dello snippet del risultato. |
visited |
Il link dopo che l'utente ha fatto clic su di esso. |
title_hover |
Il colore del titolo quando l'utente passa il mouse sopra il link. |
title_active |
Il colore del titolo quando l'utente fa clic sul link. |
L'elemento secondario Promotions
L'elemento Promotions controlla i colori della promozione e determina se visualizzare immagini e descrizioni. Sebbene l'aspetto delle promozioni sia definito nel file di contesto, i contenuti delle promozioni stesse vengono definiti nel relativo file XML. Per scoprire di più, consulta la sezione Promozioni.
Di seguito è riportato un esempio di elemento Promotions con attributi completamente definiti:
<Promotions title_color="#006600"
title_visited_color="#663399"
url_color="#3366ff"
background_color="#FFFFFF"
border_color="#ffff33"
snippet_color="#330000"
show_image="true"
show_snippet="true"
title_hover_color="#0000CC"
title_active_color="#0000CC" />
Nella tabella seguente sono elencati gli attributi facoltativi di Promotions e i relativi valori.
| Attributo | Colore componente |
|---|---|
title_color |
Il titolo di ogni promozione. |
title_visited_color |
Il titolo dopo che l'utente ha fatto clic sul titolo. |
url_color |
L'URL visualizzato nella parte inferiore di ogni promozione. |
background_color |
Il colore di sfondo dell'intera sezione delle promozioni. |
border_color |
Il bordo intorno all'intera sezione della promozione. |
snippet_color |
La descrizione della promozione. Se la promozione non ha una descrizione, l'impostazione non cambia nulla. |
show_image |
Per mostrare un'immagine nella tua promozione, imposta questo attributo su L'immagine da visualizzare è impostata nel file delle promozioni. |
show_snippet |
Per visualizzare una descrizione nella tua promozione, imposta questo attributo su I contenuti della descrizione sono definiti nel file delle promozioni. |
title_hover_color |
Il titolo quando l'utente passa il mouse sopra il link. |
title_active_color |
Il titolo quando l'utente fa clic sul link. |
L'elemento secondario SearchControls
L'elemento SearchControls controlla i colori della casella di ricerca e delle schede per i perfezionamenti in un elemento di ricerca. Se hai creato etichette di perfezionamento nel tuo motore di ricerca, queste verranno visualizzate come schede nell'elemento di ricerca. Se non disponi di etichette di perfezionamento, le schede non vengono visualizzate e Motore di ricerca programmabile ignora i valori degli attributi.
Se vuoi che Motore di ricerca programmabile completi automaticamente le query, consulta la sezione che descrive l'attributo autocompletions dell'elemento CustomSearchEngine nel file di contesto.
Di seguito è riportato un esempio di elemento SearchControls con attributi completamente definiti:
<SearchControls input_border_color="#BCCDF0"
button_border_color="#666666"
button_background_color="#CECECE"
tab_border_color="#E9E9E9"
tab_background_color="#E9E9E9"
tab_selected_border_color="#FF9900"
tab_selected_background_color="#FFFFFF" />
Nella tabella seguente sono elencati gli attributi facoltativi di SearchControls e i relativi valori.
| Attributo | Colore componente |
|---|---|
input_border_color |
Il bordo del campo di immissione delle query di ricerca. |
button_border_color |
Il bordo attorno al pulsante di ricerca. |
button_background_color |
Il pulsante di ricerca. |
tab_border_color |
Il bordo attorno alle schede che non sono attualmente in stato attivo (non selezionate dall'utente). |
tab_background_color |
Le schede non in stato attivo. |
tab_selected_border_color |
La scheda che l'utente ha appena selezionato facendo clic. La scheda su cui l'utente ha fatto clic più di recente assume lo stato selezionato. |
tab_selected_background_color |
Il colore della scheda attualmente selezionata. |
L'elemento secondario Results
L'elemento Results controlla il colore dei singoli risultati nell'elemento di ricerca. Ogni singolo risultato costituisce un'unità di titolo, snippet di risultati e link. La definizione di questo elemento secondario ti consente di delineare visivamente i singoli risultati o di evidenziare i risultati selezionati dagli utenti. Se non vuoi delineare singoli risultati o evidenziare un risultato, puoi impostare bordi e sfondi in modo che corrispondano al colore dello sfondo per l'intera sezione dei risultati.
Figura 1: risultati con singoli risultati definiti e singolo risultato evidenziato al passaggio del mouse.
I risultati hanno due stati:
- Stato normale: l'aspetto di un singolo risultato quando non ci passi il mouse sopra.
- Stato al passaggio del mouse. L'aspetto di un singolo risultato al passaggio del mouse sopra di esso.
Questo elemento controlla il colore dei singoli risultati. Per modificare lo sfondo di tutti i risultati, consulta la sezione Colore dell'elemento secondario.
Di seguito è riportato un esempio di elemento Results con attributi completamente definiti:
<Results border_color="#FFFFFF"
border_hover_color="#FFFFFF"
background_color="#FFFFFF"
background_hover_color="#FFFFFF" />
Nella tabella seguente sono elencati gli attributi facoltativi di Results e i relativi valori.
| Attributo | Colore componente |
|---|---|
border_color |
Il confine di ogni singolo risulta nello stato normale. |
border_hover_color |
Il bordo del risultato quando ci passi il mouse sopra. |
background_color |
Il colore di sfondo di una persona risulta nello stato normale. |
background_hover_color |
Lo sfondo del risultato al passaggio del mouse. |
Aggiungere un logo a una pagina dei risultati ospitata da Google
Se consenti a Google di ospitare la tua pagina dei risultati, puoi 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 (presumibilmente tuo o da un sito web che non presenta limitazioni di copyright). Puoi associare un URL all'immagine, rendendola cliccabile.
Nota: se utilizzi Elemento di ricerca programmabile per ospitare i risultati di ricerca, non puoi aggiungere un'immagine utilizzando il pannello di controllo o il file di contesto.
Di seguito è riportato un esempio di pagina dei risultati con un logo.
Figura 3: casella di ricerca con un'immagine
L'immagine e il relativo URL sono definiti negli attributi dell'elemento Logo all'interno dell'elemento LookAndFeel. L'esempio seguente mostra come aggiungere un logo alla pagina dei risultati in hosting su Google.
<LookAndFeel>
<Logo url="http://www.ascii.com/logo.gif"
destination="http://www.ascii.com/"
height="90"/>
...
</LookAndFeel>
Nella tabella seguente sono elencati gli attributi dell'elemento Logo.
| Attributo | Descrizione e valore |
|---|---|
url |
URL dell'immagine. Può essere un file .gif, .png o .jpg. |
destination |
Se vuoi che l'immagine sia un link, definisci la destinazione dell'URL. |
height |
Altezza dell'immagine in pixel. L'altezza massima è 100 pixel. Non è necessario specificare la larghezza perché Motore di ricerca programmabile conserva le proporzioni. Non preoccuparti di fornire l'altezza, a meno che l'immagine non sia troppo grande e tu voglia che Motore di ricerca programmabile la ridimensiona. |