Auf dieser Seite wird beschrieben, wie Sie die Darstellung Ihrer Suchmaschine mithilfe der Kontextdatei, der XML-Spezifikation für Ihre Suchmaschine, anpassen.
- Übersicht
- Das Element
LookAndFeel
- Die Attribute des Elements
LookAndFeel
- Die untergeordneten Elemente von
LookAndFeel
- Logo zu einer von Google gehosteten Ergebnisseite hinzufügen
Überblick
Sie können nicht nur das Steuerfeld der Programmable Search Engine verwenden, sondern auch die Kontext-XML-Datei bearbeiten, um das Design Ihrer Suchmaschine zu steuern. Weitere Informationen zu den Vor- und Nachteilen der einzelnen Formate finden Sie auf der Seite Grundlagen. Wenn Sie mit Kontextdateien nicht vertraut sind, lesen Sie den Artikel Kontext: Suchmaschine definieren.
Wenn Sie die Anzeige Ihrer Suchmaschine noch flexibler gestalten möchten, können Sie das Programmable Search Element verwenden, mit dem Sie die Programmable Search Engine mithilfe von JavaScript in Ihre Webseite und andere Anwendungen einbetten können.
Wenn Ihre Webseiten auch strukturierte Daten enthalten, können Sie Snippets mit umfassenderen Informationen und benutzerdefiniertem Inhalt erstellen. Weitere Informationen zum Anpassen von Ergebnis-Snippets
Bevor Sie damit beginnen, das Design Ihrer Programmable Search Engine zu entwerfen, sollten Sie die Richtlinien zur Implementierung der Programmable Search Engine lesen. Es ist ein kurzes Dokument, in dem Sie erfahren, wie Sie mit Google-Branding und -Quellenangabe umgehen sollten.
Das Element LookAndFeel
In der Kontextdatei werden alle Look-and-feel-Spezifikationen durch das Element LookAndFeel
unter CustomSearchEngine
definiert. Mit diesem Element wird festgelegt, ob Anzeigen, wie der Suchergebnisbereich und wie einzelne Suchergebnisse angezeigt werden. Das folgende Beispiel zeigt alle Attribute und untergeordneten Elemente des Elements 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>
Nicht alle LookAndFeel
-Attribute und -Elemente sind für alle Arten von Suchmaschinen relevant. Beispielsweise wird das Attribut googlebranding
nur für von Google gehostete Suchmaschinen verwendet und ignoriert, wenn Ihre Suchmaschine die Hosting-Option „Suchelement“ verwendet.
Wenn Sie die Kontextdatei der Suchmaschine von der Übersichtsseite des ControlPanels herunterladen, finden Sie einen vollständig definierten LookAndFeel
-Abschnitt. Auch Attribute und Elemente, die für die Art der von Ihnen gewählten Suchmaschine nicht relevant sind, verfügen über definierte Werte. Dies sind nur die Standardwerte, die Sie ignorieren können. Achten Sie nur auf die Elemente und Attribute, die Ihren Suchmaschinentyp beeinflussen.
In den nächsten Abschnitten werden folgende Themen behandelt:
Die Attribute des Elements LookAndFeel
Alle LookAndFeel
-Attribute sind optional. Wenn Sie sie nicht angeben, verwendet die Programmable Search Engine die Standardwerte. Wenn Sie beispielsweise das element_layout
-Attribut des LookAndFeel
-Elements nicht definieren, interpretiert die Programmable Search Engine dies so, dass der element_layout
-Wert "1"
ist. Nicht alle Attribute sind für alle Arten von Suchmaschinen relevant.
Je nachdem, wie Sie die Werte der Attribute definiert haben, generiert die Programmable Search Engine Code für das Suchfeld und die Suchergebnisse. Sie können sich eine Vorschau des generierten Codes im Bereich Code abrufen der Übersichtsseite Ihrer Suchmaschine ansehen. Sie können das generierte Code-Snippet kopieren und in Ihre Webseite einfügen.
Hier ein Beispiel für ein LookAndFeel
-Element mit vollständig definierten Attributen:
<LookAndFeel googlebranding="watermark" element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif" />
In der folgenden Tabelle sind die Attribute von CustomSearchEngine
und die zugehörigen Werte aufgeführt.
Hinweis: Definieren Sie nur die Werte für die Attribute, die für die ausgewählte Hostingoption relevant sind. In der Spalte Hosting options (Hostingoptionen) sehen Sie, für welche Hostingoptionen diese Attribute gelten.
Attribut | Hostingoptionen | Beschreibung | Wert |
---|---|---|---|
googlebranding |
Bei Google gehostet | Hiermit wird das Suchfeld für Ihre Suchmaschine festgelegt. | Verwenden Sie einen der folgenden Werte:
|
element_layout |
Suchelement | Legt fest, wie das Suchfeld und die Suchergebnisse auf der Seite dargestellt werden. Weitere Informationen zu den verschiedenen Layoutoptionen finden Sie unter Layout des Suchelements. |
Verwende einen der folgenden Werte:
|
theme |
Suchelement | Hiermit wird der Stil des Suchfelds und der Suchergebnisse festgelegt. | Verwenden Sie einen der folgenden Werte:
|
custom_theme |
Suchelement | Wenn Sie das Design so anpassen möchten, dass andere Farben und Schriftarten vom Standard abweichen, legen Sie den Wert auf true fest. Andernfalls ignoriert die Programmable Search Engine die Anpassungen, die Sie an den Farben und Schriftarten in den untergeordneten Elementen von LookAndFeel vornehmen. |
Geben Sie eine der folgenden Optionen an:
|
text_font |
Alle | Legt die Schriftfamilie für den Text in den Suchergebnissen fest. |
Im Steuerfeld können Sie zwar nur fünf Schriftfamilien auswählen, aber Sie können auch eine größere Schriftfamilie in der Kontextdatei auswählen. Sie könnten eine durch Kommas getrennte Liste von Schriftfamilien als Wert für dieses Attribut verwenden, wie im folgenden Beispiel: text_font="Arial, sans-serif" Wenn Sie mehrere Schriftfamilien aufgelistet haben, verwendet der Browser die erste Schriftart. Wenn der Browser die erste Schriftart nicht unterstützt, wird die nächste Schriftart verwendet. Beginnen Sie also mit der gewünschten Schriftart und enden Sie mit einer generischen Schrift wie „serif“ oder „san-serif“. Bei generischen Schriftart kann der Browser eine ähnliche Schriftart aus der generischen Schriftfamilie auswählen, wenn keine der aufgeführten Schriftarten verfügbar ist. Wenn Sie eine Schriftfamilie verwenden, deren Name aus mehr als einem Wort besteht, müssen Sie sie in Anführungszeichen ( |
Die untergeordneten Elemente von LookAndFeel
Alle untergeordneten Elemente von LookAndFeel
mit Ausnahme des Promotions
-Elements betreffen nur das Search Element. Die meisten Attribute des Promotions
-Elements gelten für alle Arten von Suchmaschinen. In den meisten Fällen steuern die untergeordneten Elemente die Farben der verschiedenen Komponenten in Ihrer Suchmaschine. Die Farbwerte sind Hexadezimal-Standardschreibweise. Wenn Sie die Attribute des Elements nicht definieren, verwendet die Programmable Search Engine die Standardwerte.
Hinweis: Wenn Sie ein Search-Element anpassen möchten, müssen Sie zuerst das custom_theme
-Attribut des LookAndFeel
-Elements auf true
festlegen, bevor Sie die Werte in den untergeordneten Elementen definieren. Wenn Sie das Attribut custom_theme
nicht auf true
setzen, werden alle Werte, die Sie in den untergeordneten Elementen (außer Promotions
) definiert haben, von der Programmable Search Engine ignoriert.
LookAndFeel
hat die folgenden untergeordneten Elemente.
Colors
: bestimmt die Farben des SuchelementsPromotions
: bestimmt das Design von Angeboten Die Einstellungen gelten für alle Arten von Suchmaschinen.SearchControls
: legt die Farben der Komponenten des Suchfelds für „Suchelemente“ fest.Results
: bestimmt die Farben der Komponenten des Bereichs mit den Ergebnissen des Suchelements.
Das untergeordnete Element Colors
Das Colors
-Element bestimmt die Farbe des Search-Elements. Um die Farben von Unterkomponenten des Search-Elements zu ändern, etwa von einzelnen Suchergebnissen oder bevorzugten Suchergebnissen, müssen Sie die Werte in anderen gleichgeordneten Elementen festlegen.
Hier ein Beispiel für ein Colors
-Element mit vollständig definierten Attributen:
<Colors url="#3366cc" background="#FFFFFF" border="#336699" title="#0000CC" text="#000000" visited="#ffbd10" title_hover="#0000CC" title_active="#0000CC"/>
In der folgenden Tabelle sind die optionalen Attribute von Colors
und die zugehörigen Werte aufgeführt.
Attribut | Komponentenfarbe |
---|---|
url |
Die URL am Ende jedes Ergebnis-Snippets. |
background |
Hintergrund des gesamten Ergebnisbereichs. |
border |
Der Rahmen um das Suchelement. |
title |
Der Titel der Ergebnis-Snippets. Der Titel ist die erste Zeile jedes Ergebnisses. |
text |
Der Text des Ergebnis-Snippets. |
visited |
Der Link, nachdem der Nutzer darauf geklickt hat. |
title_hover |
Die Farbe des Titels, wenn der Nutzer die Maus über den Link bewegt. |
title_active |
Die Farbe des Titels, wenn der Nutzer auf den Link klickt. |
Das untergeordnete Element Promotions
Mit dem Promotions
-Element werden die Farben der Werbeaktion festgelegt und festgelegt, ob Bilder und Beschreibungen angezeigt werden sollen. Während das Erscheinungsbild der Werbung in der Kontextdatei definiert wird, wird der Content der Werbung in der XML-Datei für bevorzugte Suchergebnisse definiert. Weitere Informationen finden Sie unter Angebote.
Hier ein Beispiel für ein Promotions
-Element mit vollständig definierten Attributen:
<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" />
In der folgenden Tabelle sind die optionalen Attribute von Promotions
und die zugehörigen Werte aufgeführt.
Attribut | Komponentenfarbe |
---|---|
title_color |
Der Titel jedes Angebots. |
title_visited_color |
Der Titel, nachdem der Nutzer darauf geklickt hat. |
url_color |
Die URL unter jedem Angebot. |
background_color |
Die Hintergrundfarbe des gesamten Angebotsbereichs. |
border_color |
Der Rahmen um den gesamten Bereich mit Werbung. |
snippet_color |
Die Beschreibung des Angebots. Wenn Ihr Angebot keine Beschreibung hat, ändert sich die Einstellung nicht. |
show_image |
Um in Ihrem Angebot ein Bild anzuzeigen, legen Sie dieses Attribut auf Das anzuzeigende Bild wird in der Datei für Werbeaktionen festgelegt. |
show_snippet |
Um eine Beschreibung in Ihrem Angebot anzuzeigen, legen Sie dieses Attribut auf Der Inhalt der Beschreibung ist in der Promotionsdatei definiert. |
title_hover_color |
Der Titel, wenn der Nutzer die Maus über den Link bewegt. |
title_active_color |
Der Titel, wenn der Nutzer auf den Link klickt. |
Das untergeordnete Element SearchControls
Mit dem SearchControls
-Element werden die Farben des Suchfelds und der Tabs für Optimierungen in einem Search Element festgelegt. Wenn Sie in Ihrer Suchmaschine Suchfilter-Labels erstellt haben, werden die Labels im Suchfeld als Tabs angezeigt. Wenn Sie keine Labels zur Verfeinerung haben, werden die Tabs nicht angezeigt und die Programmable Search Engine ignoriert die Werte der Attribute.
Wenn Sie möchten, dass die Programmable Search Engine Abfragen automatisch vervollständigt, lesen Sie den Abschnitt, in dem das autocompletions
-Attribut des CustomSearchEngine
-Elements in der Kontextdatei beschrieben wird.
Hier ein Beispiel für ein SearchControls
-Element mit vollständig definierten Attributen:
<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" />
In der folgenden Tabelle sind die optionalen Attribute von SearchControls
und die zugehörigen Werte aufgeführt.
Attribut | Komponentenfarbe |
---|---|
input_border_color |
Der Rahmen für das Eingabefeld für Suchanfragen. |
button_border_color |
Der Rahmen um die Suchschaltfläche. |
button_background_color |
Die Schaltfläche „Suchen“. |
tab_border_color |
Der Rahmen um die Tabs, die derzeit nicht im Fokus sind, also nicht vom Nutzer ausgewählt wurden. |
tab_background_color |
Die Tabs, die nicht im Fokus sind. |
tab_selected_border_color |
Der Tab, den der Nutzer durch Klicken ausgewählt hat. Der Tab, auf den der Nutzer zuletzt geklickt hat, übernimmt den ausgewählten Status. |
tab_selected_background_color |
Die Farbe des aktuell ausgewählten Tabs. |
Das untergeordnete Element Results
Mit dem Results
-Element wird die Farbe einzelner Ergebnisse im Search Element festgelegt. Jedes einzelne Ergebnis bildet eine Einheit aus Titel, Ergebnis-Snippet und Link. Wenn Sie dieses untergeordnete Element definieren, können Sie einzelne Ergebnisse visuell voneinander abgrenzen oder von Nutzern ausgewählte Ergebnisse hervorheben. Wenn Sie einzelne Ergebnisse nicht abgrenzen oder ein Ergebnis hervorheben möchten, können Sie die Rahmen und Hintergründe so festlegen, dass sie der Farbe des Hintergrunds für den gesamten Ergebnisbereich entsprechen.
Abbildung 1:Ergebnisse mit abgegrenzten einzelnen Ergebnissen und individuellen Ergebnissen, die beim Mouseover hervorgehoben werden.
Die Ergebnisse haben zwei Status:
- Normaler Zustand - das Anzeigen eines einzelnen Ergebnisses, wenn die Maus nicht darüber bewegt wird.
- Hover-Zustand - das Aussehen eines einzelnen Ergebnisses, wenn der Mauszeiger darauf bewegt wird.
Mit diesem Element wird die Farbe für die einzelnen Ergebnisse festgelegt. Informationen zum Ändern des Hintergrunds für alle Ergebnisse finden Sie im Abschnitt Das untergeordnete Element der Farbe.
Hier ein Beispiel für ein Results
-Element mit vollständig definierten Attributen:
<Results border_color="#FFFFFF" border_hover_color="#FFFFFF" background_color="#FFFFFF" background_hover_color="#FFFFFF" />
In der folgenden Tabelle sind die optionalen Attribute von Results
und die zugehörigen Werte aufgeführt.
Attribut | Komponentenfarbe |
---|---|
border_color |
Der Rahmen der einzelnen Elemente wird im normalen Zustand angezeigt. |
border_hover_color |
Der Rahmen des Ergebnisses, wenn der Mauszeiger darauf bewegt wird. |
background_color |
Die Hintergrundfarbe einzelner Personen bewirkt den normalen Zustand. |
background_hover_color |
Der Hintergrund des Ergebnisses, wenn der Mauszeiger darauf bewegt wird. |
Logo einer von Google gehosteten Ergebnisseite hinzufügen
Wenn Sie Ihre Suchergebnisseite von Google hosten lassen, können Sie direkt neben dem Suchfeld auf der Suchergebnisseite ein Logo oder ein kleines Bild einfügen. Das Bild muss eine JPG-, PNG- oder GIF-Datei sein, die auf einer Website gehostet wird (vermutlich Ihre eigene oder von einer Website ohne Urheberrechtsbeschränkungen). Sie können dem Bild eine URL zuordnen, sodass es anklickbar ist.
Hinweis: Wenn Sie das Programmable Search Element zum Hosten von Suchergebnissen verwenden, können Sie kein Bild über die Systemsteuerung oder die Kontextdatei hinzufügen.
Das folgende Beispiel zeigt eine Ergebnisseite mit einem Logo.
Abbildung 3:Suchfeld mit einem Bild
Das Bild und seine URL werden in den Attributen des Elements Logo
unter dem Element LookAndFeel
definiert. Das folgende Beispiel zeigt, wie Sie Ihrer von Google gehosteten Ergebnisseite ein Logo hinzufügen können.
<LookAndFeel> <Logo url="http://www.ascii.com/logo.gif" destination="http://www.ascii.com/" height="90"/> ... </LookAndFeel>
In der folgenden Tabelle sind die Attribute des Elements Logo
aufgeführt.
Attribut | Beschreibung und Wert |
---|---|
url |
URL des Bildes Das kann eine GIF-, PNG- oder JPG-Datei sein. |
destination |
Wenn das Bild ein Link sein soll, definieren Sie das URL-Ziel. |
height |
Höhe des Bildes in Pixel Die maximale Höhe beträgt 100 Pixel. Sie müssen die Breite nicht angeben, da die Programmable Search Engine das Seitenverhältnis beibehält. Geben Sie nur dann die Höhe an, wenn das Bild zu groß ist und die Programmable Search Engine es verkleinern soll. |